Nashornを使用してJavascriptからJava-FXオブジェクトにアニメーションを適用できますか？

Question

私はTextオブジェクトをJavaFXに持っています。これはシーンのタイトルとして機能します。

FXオブジェクトでアニメーションエフェクト（fadeIn、fadeOut）を呼び出したり、JSでアニメーションキューを作成して、それをNashornを使ってFXオブジェクトに適用したりすることはできますか？

例

• の時限サイクルに基づいてテキストオブジェクト "脈動" を作ります。 （JSで作成されたカスタムアニメーション）

• ゆっくりとテキストエレメントをJSのslideDown関数でアンフォールディングします。

Answer 1

私はNashornについてあまり知らないが、あなたは、単に外部JSプログラムのサポートなしでjavafx.animationを使用して（などフェードイン、フェードアウト、slideDown、）任意のノードをアニメーション化することができます。簡単なデモ、

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

Answer 2

NashornからJavafxアニメーションを行うことができます。 Shekkar Raeeが上記のJavaコードをnashornに移植しました。 nashorn jjsシェルツールを使用して、次のスクリプトを実行できます。

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