您可以使用 Nashorn 将 Javascript 中的动画应用到 Java-FX 对象吗？

Question

我在 JavaFX 中有一个 Text 对象，它充当场景的标题。

我可以在上述 FX 对象上调用动画效果（fadeIn，fadeOut）或在 JS 中创建动画队列，然后使用 Nashorn 将其应用于我的 FX 对象，并在场景中相应地显示效果吗？

示例

• 根据定时循环使文本对象“脉动”。 （在 JS 中创建的自定义动画）

• 用JS中的slideDown函数慢慢展开文本元素。

Answer 1

您可以使用javafx.animation 简单地为任何节点设置动画（fadeIn, fadeOut, slideDown, pulsate 等），而无需在Nashron 中包装javascript 程序。

淡入

private void fadeIn(Node node) {
    FadeTransition fadeTransition = new FadeTransition(
            Duration.millis(900), 
            node
    );
    fadeTransition.setFromValue(0);
    fadeTransition.setToValue(1);
    fadeTransition.play();
}

淡出

private void fadeOut(Node node) {
    FadeTransition fadeTransition = new FadeTransition(
            Duration.millis(900), 
            node
    );
    fadeTransition.setFromValue(1);
    fadeTransition.setToValue(0);
    fadeTransition.play();
}

向下滑动

private void slideDown(Node node) {
    TranslateTransition slideDown = new TranslateTransition(
            Duration.millis(900), 
            node
    );
    slideDown.setFromY(-400);
    slideDown.setToY(0);
    slideDown.play();
}

脉动

private void pulsate(Node node) {

    node.setEffect(new DisplacementMap());

    ScaleTransition scaleUp = new ScaleTransition(
            Duration.millis(400), node
    );
    scaleUp.setFromX(1);
    scaleUp.setFromY(1);
    scaleUp.setToX(1.4);
    scaleUp.setToY(1.4);
    scaleUp.play();

    scaleUp.setOnFinished(su -> {
        ScaleTransition scaleDown = new ScaleTransition(
                Duration.millis(400), node
        );
        scaleDown.setFromX(1.4);
        scaleDown.setFromY(1.4);
        scaleDown.setToX(1);
        scaleDown.setToY(1);
        scaleDown.play();
        scaleDown.setOnFinished(sd -> node.setEffect(null));
    });
}

Text 使用这些动画的简单演示，

public class TextAnimationDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        Scene scene = new Scene(getContent(), 300, 250);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private BorderPane getContent() {
        Text text = new Text("Title");

        Button fadeIn = new Button("Fade In");
        fadeIn.setOnAction(e -> fadeIn(text));

        Button fadeOut = new Button("Fade Out");
        fadeOut.setOnAction(e -> fadeOut(text));

        Button slideDown = new Button("Slide-Down");
        slideDown.setOnAction(event -> slideDown(text));

        BorderPane root = new BorderPane();
        root.setCenter(text);
        root.setRight(fadeOut);
        root.setLeft(fadeIn);
        root.setBottom(slideDown);
        return root;
    }

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

Answer 2

您可以从 Nashorn 制作 Javafx 动画。我将 Shekkar Raee 的上述 Java 代码移植到 nashorn。您可以使用 nashorn jjs shell 工具运行以下脚本。

// Usage: jjs -fx textanimation.js

// JavaFX classes used
var BorderPane = Java.type("javafx.scene.layout.BorderPane")
var Button = Java.type("javafx.scene.control.Button")
var Duration = Java.type("javafx.util.Duration")
var FadeTransitionBuilder = Java.type("javafx.animation.FadeTransitionBuilder")
var Scene = Java.type("javafx.scene.Scene")
var Text = Java.type("javafx.scene.text.Text")
var TranslateTransitionBuilder = Java.type("javafx.animation.TranslateTransitionBuilder")

function start(stage) {
    //target node
    var text = new Text("Title")

    //fade-in animation
    var fadeIn = new Button("Fade In")
    fadeIn.onAction = function(e) {
         var fade1 = FadeTransitionBuilder
                .create()
                .node(text)
                .duration(Duration.millis(900))
                .fromValue(0)
                .toValue(1)
                .build()
         fade1.play()
    }

    //fade-out animation
    var fadeOut = new Button("Fade Out")
    fadeOut.onAction = function(e) {
         var fade2 = FadeTransitionBuilder
                .create()
                .node(text)
                .duration(Duration.millis(900))
                .fromValue(1)
                .toValue(0)
                .build()
         fade2.play()
    }

    //slide-down animation
    var slideDown = new Button("Slide-Down")
    slideDown.onAction = function(event) {
         var slide = TranslateTransitionBuilder.create()
                .node(text).duration(Duration.millis(900))
                .fromY(-400)
                .toY(0)
                .build()
         slide.play()
    }

    var root = new BorderPane()
    root.setCenter(text)
    root.setRight(fadeOut)
    root.setLeft(fadeIn)
    root.setBottom(slideDown)

    var scene = new Scene(root, 300, 250)

    stage.title = "Animation Demo"
    stage.scene = scene
    stage.show()
}