Question

我是JavaFX动画的新手，我对它的工作方式有了基本的了解。你需要一个起始关键帧并结束一个，然后你就播放它。

我想要做的是有一个字符串列表，比如说，＆＃34; 0,1,2,3,4,5 ... 10＆＃34;和一个变量index。那么我想要做的就是在3个不同的Text对象中同时在屏幕上有3个：

0   1   2

在上面的示例中，index = 0。如果index = 1，它将如下所示：

1   2   3

你得到了这个想法，所以我想做的是，每次index递增（它必须是Property），就会有数字交易空间的动画。< / p>

所以这样（符号数字代表褪色）：

index = 0 : 0   1   2
index = 1 : )  1   2#
frame --- : ) 1   2 #
frame --- : )1   2  #
frame --- : 1   2   3

因此从理论上讲，存储这些数字的列表可能是无限的，因此我不能（不应该）为每个数字分别设置Text个对象。我无法弄清楚应如何做到这一点，因为关键帧移动Text对象本身会使事情变得复杂。

Answer 1

以下是一个示例。

app

import javafx.animation.*;
import javafx.application.Application;
import javafx.beans.binding.StringBinding;
import javafx.beans.property.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Duration;

import java.util.List;
import java.util.stream.*;

public class NumberSwitcher extends Application {

    private static final int NUM_NUMS_DISPLAYED = 3;
    private static final Duration TRANSITION_TIME = Duration.seconds(0.5);

    private final IntegerProperty idx   = new SimpleIntegerProperty(0);
    private final IntegerProperty toIdx = new SimpleIntegerProperty(0);

    private final List<Label> labels =
            IntStream.range(0, NUM_NUMS_DISPLAYED)
                    .mapToObj(
                            this::createLabel
                    )
                    .collect(Collectors.toList());

    private final Button incrementButton = new Button("Increment");

    @Override
    public void start(Stage stage) {
        stage.setScene(
                new Scene(
                        createLayout(),
                        Color.PALEGREEN
                )
        );
        stage.show();

        enableTransitions();
    }

    private StackPane createLayout() {
        incrementButton.setStyle("-fx-base: darkslateblue; -fx-text-fill: papayawhip; -fx-font-size: 20px;");

        HBox numbers = new HBox(10);
        numbers.getChildren().addAll(labels);
        numbers.setPadding(new Insets(15));
        numbers.setMaxWidth(HBox.USE_PREF_SIZE);

        VBox layout = new VBox(
                15,
                numbers,
                incrementButton
        );
        layout.setAlignment(Pos.CENTER);
        layout.setPadding(new Insets(15));
        layout.setStyle("-fx-background-color: null;");

        StackPane centered = new StackPane(layout);
        centered.setStyle("-fx-background-color: null;");
        return centered;
    }

    private Label createLabel(final int i) {
        Label label = new Label();
        label.setStyle(
                "-fx-font-size: 50px; -fx-font-family: monospace; -fx-text-fill: midnightblue;"
        );

        label.textProperty().bind(new StringBinding() {
            {
                super.bind(idx);
            }

            @Override
            protected String computeValue() {
                return "" + ((idx.get() + i) % 10);
            }
        });

        return label;
    }

    private void enableTransitions() {
        ParallelTransition changeNumbers = new ParallelTransition(
                createFadeFirst()
        );

        IntStream.range(1, labels.size())
                .mapToObj(this::createMoveLeft)
                .forEachOrdered(
                        moveLeft -> changeNumbers.getChildren().add(moveLeft)
                );

        changeNumbers.setOnFinished(e -> idx.set(toIdx.get()));

        toIdx.addListener((observable, oldValue, newValue) ->
                changeNumbers.play()
        );

        // You can disable incrementing while the transition is running,
        // but that is kind of annoying, so I chose not to.
//        incrementButton.disableProperty().bind(
//                changeNumbers.statusProperty().isEqualTo(
//                        PauseTransition.Status.RUNNING
//                )
//        );

        incrementButton.setOnAction(e -> {
            if (idx.get() != toIdx.get()) {
                idx.set(toIdx.get());
            }

            toIdx.set((toIdx.get() + 1) % 10);
        });
    }

    private FadeTransition createFadeFirst() {
        FadeTransition fadeFirst = new FadeTransition(
                TRANSITION_TIME,
                labels.get(0)
        );
        fadeFirst.setFromValue(1);
        fadeFirst.setToValue(0);
        fadeFirst.setOnFinished(e -> labels.get(0).setOpacity(1));
        return fadeFirst;
    }

    private TranslateTransition createMoveLeft(int i) {
        TranslateTransition moveLeft = new TranslateTransition(
                TRANSITION_TIME,
                labels.get(i)
        );
        double dx =
                labels.get(i).getBoundsInParent().getMinX()
                        - labels.get(i-1).getBoundsInParent().getMinX();

        moveLeft.setFromX(0);
        moveLeft.setToX(-dx);
        moveLeft.setOnFinished(e -> labels.get(i).setTranslateX(0));

        return moveLeft;
    }

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

}

其他问题的答案

我看到你正在翻译节点，但是，你在什么时候改变了HBox中的位置？

此样本的HBox中的位置（例如layoutX和layoutY）在最初布局在HBox中后永远不会更改。 HBox是一个布局管理器，它将自动设置HBox中的项目的layoutX和layoutY坐标。 HBox布局算法会将每个项目从左到右依次放置在其子列表中（默认情况下），并将每个项目的大小调整为其首选大小。 HBox基于脏标志工作，因此它只会在需要时重新布局内部组件（例如组件更改或组件的CSS样式更改或HBox的可用区域更改），这些都不会发生在此样品

您只是翻译它们，切换文本，然后重置翻译吗？

是

您能否快速概述一下这是如何运作的？

HBox中添加了三个标签。每个标签使用等宽字体和相同数量的字符，因此每个标签的宽度相等。记录两个指数。一个是显示字符的文本区域中的当前索引，另一个是要移动到的文本数组中的下一个索引的toIdx。提供了一个增量按钮，它将增加toIdx。更改侦听器放置在toIdx上，以便在更改时启动一组动画，第一个动画淡化第一个标签，其他动画将剩余标签移动到下一个左侧位置。动画完成后，每个标签的平移设置为0，因此每个移动的标签都会移回其原始位置。此外，动画完成后，当前索引将设置为toIdx。更新toIdx时，绑定用于自动更新每个标签中的文本。

效果是，当按下增量按钮时，第一个标签中的数字逐渐消失，右边标签中的数字向左移动，一旦到那里，返回到原始位置，但是它们的值设置为下一个最高数字。这提供了问题中要求的效果。

文字移动动画

1 个答案: