JavaFX 的淡入淡出效果

Question

我正在尝试实现一种特殊的 FadeTransition 效果。但我不知道如何管理它。对于某些节点，我想从左到右增加不透明度（例如在 Powerpoint 中，您可以更改具有这种效果的幻灯片）。这是矩形的一个简单示例。但是第二个应该从左到右淡入淡入（不透明度应该在左侧比在右侧更早地增加）。使用时间线和 KeyValues/KeyFrames 我也没有找到解决方案。 提前致谢。

矩形rec2;

@Override
public void start(Stage stage) {
    Group root = new Group();
    Scene scene = new Scene(root, 400, 300, Color.BLACK);
    stage.setTitle("JavaFX Scene Graph Demo");       

    Pane pane = new Pane();
    Button btnForward = new Button();
    btnForward.setText(">");
    btnForward.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            FadeTransition ft = new FadeTransition(Duration.millis(2000), rec2);
            ft.setFromValue(0.);
            ft.setToValue(1.);
            ft.play();
        }
    });        
    Rectangle rec1 = new Rectangle(0, 0, 300,200);        
    rec1.setFill(Color.RED);
    rec2 = new Rectangle(100, 50, 100,100);        
    rec2.setFill(Color.GREEN);
    rec2.setOpacity(0.);
    pane.getChildren().addAll(rec1,rec2);
    root.getChildren().add(pane);
    root.getChildren().add(btnForward);
    stage.setScene(scene);
    stage.show();
}

Answer 1

使用带有线性渐变的 css 定义矩形的填充，该渐变引用矩形左右边缘的查找颜色。 （这可以是内联的，也可以是外部样式表。）

定义几个DoublePropertys 代表左右边缘的不透明度。

使用绑定到两个双属性的内联样式在矩形或其父对象之一上定义查找颜色。

使用时间线更改不透明度属性的值。

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class FadeInRectangle extends Application {

    @Override
    public void start(Stage primaryStage) {
        Group root = new Group();
        Scene scene = new Scene(root, 400, 300, Color.BLACK);
        primaryStage.setTitle("JavaFX Scene Graph Demo");       

        Pane pane = new Pane();
        Rectangle rec1 = new Rectangle(0, 0, 300,200);        
        rec1.setFill(Color.RED);
        Rectangle rec2 = new Rectangle(100, 50, 100,100);

        rec2.setStyle("-fx-fill: linear-gradient(to right, left-col, right-col);");

        final DoubleProperty leftEdgeOpacity = new SimpleDoubleProperty(0);
        final DoubleProperty rightEdgeOpacity = new SimpleDoubleProperty(0);

        root.styleProperty().bind(
            Bindings.format("left-col: rgba(0,128,0,%f); right-col: rgba(0,128,0,%f);", leftEdgeOpacity, rightEdgeOpacity)   
        );

        Button btnForward = new Button();
        btnForward.setText(">");
        btnForward.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                Timeline timeline = new Timeline(
                    new KeyFrame(Duration.ZERO, new KeyValue(leftEdgeOpacity, 0)),
                    new KeyFrame(Duration.ZERO, new KeyValue(rightEdgeOpacity, 0)),
                    new KeyFrame(Duration.millis(500), new KeyValue(rightEdgeOpacity, 0)),
                    new KeyFrame(Duration.millis(1500), new KeyValue(leftEdgeOpacity, 1)),
                    new KeyFrame(Duration.millis(2000), new KeyValue(rightEdgeOpacity, 1)),
                    new KeyFrame(Duration.millis(2000), new KeyValue(leftEdgeOpacity, 1))
                );
                timeline.play();
            }
        });        
        pane.getChildren().addAll(rec1,rec2);
        root.getChildren().add(pane);
        root.getChildren().add(btnForward);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

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