如何摆脱时间轴播放时短暂显示的文本？

Question

我一直在研究这个 JavaFX 程序，我想要一些文本（“黄飞鸿...”）在您按下按钮后淡入淡出。我使用时间轴让它工作，但每次按下按钮触发代码时，我都会看到“曾几何时...”在消失前短暂闪烁，然后淡入淡出 in/out 过渡播放.

        Label FirstText = new Label("Once Upon a Time...");
        FirstText.setVisible(false);

        FadeTransition ft = new FadeTransition(Duration.millis(3000),FirstText);
        ft.setFromValue(0);
        ft.setToValue(1);
        ft.setAutoReverse(true);
                
        FadeTransition TextOut = new FadeTransition(Duration.millis(3000), FirstText);
        TextOut.setFromValue(1);
        TextOut.setToValue(0);
            
        Start.addEventHandler(MouseEvent.MOUSE_CLICKED, (MouseEvent e) ->{
            scene.setFill(Color.BLACK);
            Start.setVisible(false);
           
            Timeline TextFade = new Timeline(
                    new KeyFrame(Duration.ZERO, event -> ft.play()),
                    new KeyFrame(Duration.seconds(5), event -> TextOut.play())
                   
            );
            
            TextFade.play();
            FirstText.setVisible(true);
        });

我该怎么做才能解决这个问题？谢谢！

Answer 1

我不太确定您为什么会看到您所看到的，但是有一种更简单且可能更正确的方法来创建您想要的动画。看起来目标是让文本在三秒内淡入，显示两或五秒（取决于我如何解释您的代码），然后在另外三秒内淡出秒。这可以用一个 FadeTransition、一个 PauseTransition 和一个 SequentialTransition 来完成。这是一个例子：

import javafx.animation.Animation;
import javafx.animation.Animation.Status;
import javafx.animation.FadeTransition;
import javafx.animation.PauseTransition;
import javafx.animation.SequentialTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Duration;

public class App extends Application {

  @Override
  public void start(Stage primaryStage) {
    var text = new Label("Once upon a time...");
    text.setFont(Font.font(24));
    text.setOpacity(0);

    var animation = createAnimation(text);

    var button = new Button("Play animation");
    button.disableProperty().bind(animation.statusProperty().isEqualTo(Status.RUNNING));
    button.setOnAction(
        e -> {
          e.consume();
          animation.playFromStart();
        });

    var root = new BorderPane(text, button, null, null, null);
    root.setPadding(new Insets(10));
    BorderPane.setAlignment(button, Pos.CENTER);

    primaryStage.setScene(new Scene(root, 600, 400));
    primaryStage.show();
  }

  private Animation createAnimation(Label text) {
    var fadeTrans = new FadeTransition(Duration.seconds(3));
    fadeTrans.setFromValue(0);
    fadeTrans.setToValue(1);

    // Since we're auto-reversing this animation will be played
    // again immediately after it finishes. That means we set the
    // time to 2.5 seconds so that the *total* time is 5 seconds.
    // If this should actually be 2 seconds then set the time to 
    // 1 second.
    var pauseTrans = new PauseTransition(Duration.seconds(2.5));

    var seqTrans = new SequentialTransition(text, fadeTrans, pauseTrans);
    seqTrans.setAutoReverse(true);
    // Forwards is one cycle, the auto-reverse is the second cycle
    seqTrans.setCycleCount(2);

    return seqTrans;
  }
}

如何摆脱时间轴播放时短暂显示的文本？

How to get rid of the text that briefly shows up when a timeline plays?

javafx