Question

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

Rectangle 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定义矩形的填充，该线性渐变引用矩形左右边缘的查找颜色。（这可以是内联样式或外部样式表。）

定义表示左右边缘不透明度的几个DoubleProperty。

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

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

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);
    }
}

使用JavaFX淡化效果

1 个答案: