Java一分钟之JavaFX动画：Timeline与Transition

精选原创

Jimaks 2024-05-28 15:26:04 博主文章分类：后端 ©著作权

文章标签 Time 时间设置 JavaFX 文章分类 Java 后端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者Jimaks的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaFX提供了丰富的动画功能，使得开发者可以轻松创建吸引人的用户界面。本文将聚焦于两种主要的动画类型：Timeline和Transition，介绍它们的工作原理，常见问题以及如何避免这些错误。同时，我们将通过代码示例来加深理解。

1. Timeline

Timeline是JavaFX中最基本的动画工具，它可以按照指定的时间间隔执行一系列动作。KeyFrame是Timeline的基本单位，包含了特定时间点上要执行的动作。

示例代码

下面是一个简单的Timeline动画，让一个矩形在5秒内平移到屏幕右侧：

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class TimelineExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Rectangle rect = new Rectangle(50, 50, Color.BLUE);
        StackPane root = new StackPane(rect);
        Scene scene = new Scene(root, 300, 250);

        // 创建Timeline
        Timeline timeline = new Timeline(
                new KeyFrame(Duration.seconds(5), event -> rect.setX(250))
        );
        timeline.play();  // 开始播放

        primaryStage.setTitle("Timeline Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

常见问题及避免方法

问题1：忘记启动Timeline。创建了Timeline但忘记调用play()方法，动画将不会执行。
- 避免方法：确保在适当的时候调用Timeline的play()或playFromStart()方法。
问题2：KeyFrame时间设置不当。如果时间设置不合理，动画效果可能不符合预期。
- 避免方法：仔细检查KeyFrame的时间设置，确保它们符合动画的逻辑。

2. Transition

Transition是一组预定义的动画，如FadeTransition（淡入淡出）、TranslateTransition（平移）等。它们比Timeline更易于使用，但灵活性较低。

示例代码

下面是一个TranslateTransition的例子，让矩形在5秒内从左到右平移：

import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class TransitionExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Rectangle rect = new Rectangle(50, 50, Color.BLUE);
        StackPane root = new StackPane(rect);
        Scene scene = new Scene(root, 300, 250);

        // 创建TranslateTransition
        TranslateTransition transition = new TranslateTransition(Duration.seconds(5), rect);
        transition.setByX(250);
        transition.play();  // 开始播放

        primaryStage.setTitle("Transition Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

常见问题及避免方法

问题1：未指定目标位置。例如在TranslateTransition中忘记设置setByX或setToX。
- 避免方法：确保为Transition指定明确的起始和结束位置。
问题2：Transition类型选择错误。选择不适合的Transition类型可能导致动画效果不理想。
- 避免方法：根据实际需求选择合适的Transition类型，或者使用Timeline自定义动画。