javascript - 您可以使用 Nashorn 将动画从 Javascript 应用于 Java-FX 对象吗?

标签 javascript java animation javafx nashorn

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

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

示例

  • 使文本对象根据定时周期“脉动”。 (用JS创建的自定义动画)

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

最佳答案

您可以使用 javafx.animation 简单地为任何节点设置动画(淡入、淡出、滑动、脉动等)无需将 javascript 程序包装在 Nashron 中。

淡入

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

使用这些动画的文本的简单演示,

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

关于javascript - 您可以使用 Nashorn 将动画从 Javascript 应用于 Java-FX 对象吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41993887/

相关文章:

javascript - 如何在 PHP/Javascript 中下载 "unlimited"数据量 x 秒?

java - 从字符串中提取目录

java - 检查我的应用程序的通知是否正在运行

react-native - 如何修复 React Native 中的 "transform with key of translatex must be a number"错误?

html - 在背景图像动画之后创建背景颜色 CSS3 动画

javascript - 从构建对象上传到 CloudSearch 的最佳文档

c# - 鼠标悬停时图像闪烁

html - CSS 关键帧 - 缩放和平移

javascript - 在 Javascript 中提取大型多维数组的切片

java - 并发:同步与锁