您可以使用 Nashorn 应用从 Javascript 到 Java-FX Objects 的动画吗？

Question

我在 JavaFX 中有一个 Text object，用作场景的标题。

我可以在所述 FX object 上调用动画效果 (fadeIn、fadeOut) 或在 JS 中创建动画 Queues 然后将其应用到我的 FX objects，使用 Nashorn，并在场景中相应地显示效果？

例子

根据定时循环制作文本object"pulsate"。（在 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();
}

Slide-down

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

您可以使用 Nashorn 应用从 Javascript 到 Java-FX Objects 的动画吗？

Can you apply animations from Javascript to Java-FX Objects using Nashorn?

javascript

java

animation

javafx

nashorn