使用动画更改对象的属性答案

【问题标题】：Change the object's properties using animation使用动画更改对象的属性
【发布时间】：2019-12-24 04:47:39
【问题描述】：

import javafx.animation.FillTransition;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.ParallelTransition;
import javafx.animation.Timeline;
import javafx.scene.Scene;
import javafx.scene.SceneAntialiasing;
import javafx.scene.effect.BoxBlur;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;

public class NewFXMain extends javafx.application.Application {

    @Override
    public void start(Stage primaryStage) {
        var pane = new Pane();
        var rectangle = new Rectangle(300, 100, 400, 400);
        var text = new Text(100, 100, "Java");
        rectangle.setOnMouseEntered((event) -> {
            var fill = new FillTransition(Duration.millis(1000), rectangle, (Color) rectangle.getFill(), Color.GREEN);
            var timeline = new Timeline(new KeyFrame(Duration.millis(1000), new KeyValue(text.effectProperty(), new BoxBlur(4, 4, 4))));
            var transition = new ParallelTransition(fill, timeline);
            transition.play();
        });
        pane.getChildren().addAll(rectangle, text);
        Scene scene = new Scene(pane, 1000, 720, true, SceneAntialiasing.BALANCED);
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

这段代码应该创建一个动画来改变矩形的颜色和模糊文本。

然而，虽然FillTransition 工作得非常好，但BoxBlur 效果会在 1 秒后出现而没有动画。

如何正确编写effectProperty 来创建动画？

请帮忙。

谢谢

【问题讨论】：

标签： java animation javafx timeline effect

【解决方案1】：

从 JavaFX 12 开始，Effect 类都没有实现 Interpolatable。这意味着动画不能逐渐从无效果到结束效果，因此您的动画会从null 跳转到BoxBlur。您应该为BoxBlur 实例的属性设置动画，而不是effect 属性本身。

这是一个例子：

import javafx.animation.FillTransition;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.ParallelTransition;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.BoxBlur;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.util.Duration;

public final class App extends Application {

    @Override
    public void start(Stage primaryStage) {
        var rectangle = new Rectangle(150, 100);

        var text = new Text("Hello, World!");
        text.setFill(Color.WHITE);

        var effect = new BoxBlur(0, 0, 1);
        text.setEffect(effect);

        var animation = new ParallelTransition(
                new FillTransition(Duration.seconds(1), rectangle, Color.BLACK, Color.GREEN),
                new Timeline(
                        new KeyFrame(Duration.ZERO,
                                new KeyValue(effect.widthProperty(), 0),
                                new KeyValue(effect.heightProperty(), 0)
                        ),
                        new KeyFrame(Duration.seconds(1),
                                new KeyValue(effect.widthProperty(), 10),
                                new KeyValue(effect.heightProperty(), 10)
                        )
                )
        );
        rectangle.setOnMouseEntered(event -> {
            event.consume();
            animation.setRate(1);
            animation.play();
        });
        rectangle.setOnMouseExited(event -> {
            event.consume();
            animation.setRate(-1);
            animation.play();
        });

        primaryStage.setScene(new Scene(new StackPane(rectangle, text), 500, 300));
        primaryStage.show();
    }

}

【讨论】：