你能用Nashorn将动画从Javascript应用到Java-FX对象吗?

时间:2017-02-02 03:50:12

标签: javascript java animation javafx nashorn

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

我可以在所述FX对象上调用动画效果(fadeInfadeOut)或在JS中创建动画队列,然后使用Nashorn将其应用于我的FX对象,并相应地显示效果场景?

实施例

  • 制作Text对象" pulsate"基于定时循环。 (在JS中创建的自定义动画)

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

2 个答案:

答案 0 :(得分:0)

我不太了解 Nashorn ,但您可以使用 javafx简单地为任何节点制作动画( fadeIn,fadeOut,slideDown 等)。动画,不支持外部 JS 程序。一个简单的演示,

public class AnimateText extends Application {  
    @Override
    public void start(Stage primaryStage) {
        //target node
        Text text = new Text("Title");

        //fade-in animation
        Button fadeIn = new Button("Fade In");
        fadeIn.setOnAction(e -> {
            @SuppressWarnings("deprecation")
            FadeTransition fade1 = FadeTransitionBuilder
                    .create()
                    .node(text)
                    .duration(Duration.millis(900))
                    .fromValue(0)
                    .toValue(1)
                    .build();
            fade1.play();
        });

        //fade-out animation
        Button fadeOut = new Button("Fade Out");
        fadeOut.setOnAction(e -> {
            @SuppressWarnings("deprecation")
            FadeTransition fade2 = FadeTransitionBuilder
                    .create()
                    .node(text)
                    .duration(Duration.millis(900))
                    .fromValue(1)
                    .toValue(0)
                    .build();
            fade2.play();
        });

        //slide-down animation
        Button slideDown = new Button("Slide-Down");
        slideDown.setOnAction((ActionEvent event) -> {
            @SuppressWarnings("deprecation")
            TranslateTransition slide = TranslateTransitionBuilder.create()
                    .node(text).duration(Duration.millis(900))
                    .fromY(-400)
                    .toY(0)
                    .build();
            slide.play();
        });


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

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

        primaryStage.setTitle("Animation Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

答案 1 :(得分:0)

你可以从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()
}