java - 文字移动动画

我对JavaFX中的动画是不熟悉的，并且了解其工作原理。您需要一个开始关键帧并结束一个关键帧，然后播放它。

我想要做的是有一个字符串列表，例如“ 0、1、2、3、4、5 ... 10”和一个变量index。然后，我想做的就是一次在三个不同的Text对象中，一次在屏幕上显示3个对象：

0   1   2

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

1   2   3

您明白了，所以我想做的是每次index递增（必须为Property），会有数字交易空间的动画。

像这样（符号数字代表衰落）：

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

因此，从理论上讲，存储这些数字的列表可以是无限的，因此我不能（不应该）为每个数字拥有单独的Text对象。我不知道应该怎么做，因为移动Text对象的关键帧本身会使事情变得复杂。

最佳答案

这是一个样本。

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时自动更新每个标签中的文本。

效果是，当按下增量按钮时，第一个标签中的数字消失，右侧标签中的数字向左移动，一旦到达该位置，将返回其原始位置，但其值将设置为次高的数字。这样可以提供问题中要求的效果。

关于java - 文字移动动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31352337/