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

Question

I have a Text object in JavaFX, that acts as a Title for a Scene.

Can i call animation effects (fadeIn, fadeOut) on said FX object or create Animation Queues in JS and then apply that to my FX objects, using Nashorn, and have the effects display accordingly in the Scene?

Examples

• Making the Text object "pulsate" based on a timed cycle. (Custom Animation created in JS)

• Slowly unfolding the text element with slideDown function from JS.

Answer 1

You can simply animate (fadeIn, fadeOut, slideDown, pulsate, etc) any node using javafx.animation without wrapping javascript program in Nashron.

FadeIn

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

FadeOut

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

Pulsate

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

A simple demo for Text using those animations,

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