Question

我发现this top answer（第一段代码）帮助我旋转图像（在我的情况下是一张卡片）。但是如何将后盖（example）附加到旋转卡上？

Answer 1

假设您没有更换相机，而您完全看不到图像的角度仍然是90°和270°，您可以只更换Image中的ImageView这些角度也会将scaleX属性分别更改为-1和1，以便您无需镜像原始图像。

以下代码是jewelsea's answer to "Flip a card animation"的修改版本，因此必须将部分代码提供给该用户。

public class QuickFlip extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        BooleanProperty showFront = new SimpleBooleanProperty(true);

        Node card = createCard(showFront,
                new Image("http://www.ohmz.net/wp-content/uploads/2012/05/Game-of-Throne-Magic-trading-cards-2.jpg"),
                new Image("https://upload.wikimedia.org/wikipedia/en/a/aa/Magic_the_gathering-card_back.jpg")
                );

        stage.setScene(createScene(card));
        stage.show();

        // first 90° -> show front
        RotateTransition rotator1 = createRotator(card, 0, 90);

        // from 90° to 270° show backside
        rotator1.setOnFinished(evt -> showFront.set(false));
        RotateTransition rotator2 = createRotator(card, 90, 270);

        // from 270° to 360° show front again
        rotator2.setOnFinished(evt -> showFront.set(true));
        RotateTransition rotator3 = createRotator(card, 270, 360);

        SequentialTransition rotator = new SequentialTransition(card, rotator1, rotator2, rotator3);
        rotator.setCycleCount(10);
        rotator.play();
    }

    private Scene createScene(Node card) {
        StackPane root = new StackPane();
        root.getChildren().addAll(card);

        Scene scene = new Scene(root, 600, 700, true, SceneAntialiasing.BALANCED);
        scene.setCamera(new PerspectiveCamera());

        return scene;
    }

    private Node createCard(BooleanProperty showFront, Image front, Image back) {
        ImageView imageView = new ImageView();

        imageView.setFitHeight(front.getHeight());
        imageView.setFitWidth(front.getWidth());

        // show front/back depending on value of the showFront property
        imageView.imageProperty().bind(Bindings.when(showFront).then(front).otherwise(back));

        // mirror image, when backside is shown to prevent wrong orientation
        imageView.scaleXProperty().bind(Bindings.when(showFront).then(1d).otherwise(-1d));
        return imageView;
    }

    private RotateTransition createRotator(Node card, double fromAngle, double toAngle) {
        // animation length proportional to the rotation angle
        RotateTransition rotator = new RotateTransition(Duration.millis(Math.abs(10000 * (fromAngle - toAngle) / 360)), card);
        rotator.setAxis(Rotate.Y_AXIS);
        rotator.setFromAngle(fromAngle);
        rotator.setToAngle(toAngle);
        rotator.setInterpolator(Interpolator.LINEAR);

        return rotator;
    }

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

Answer 2

您可以使旋转过渡与离散时间轴并行发生，该时间轴在卡片翻转时切换图像。在原始QuickFlip演示的情况下，这些时间是2500和7500毫秒：

import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;

public class QuickFlip2 extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        ImageView card = new ImageView();

        stage.setScene(createScene(card));
        stage.show();

        Animation rotator = createRotator(card);
        rotator.play();
    }

    private Scene createScene(Node card) {
        StackPane root = new StackPane();
        root.getChildren().add(card);

        Scene scene = new Scene(root, 600, 700, true, SceneAntialiasing.BALANCED);
        scene.setCamera(new PerspectiveCamera());

        return scene;
    }

    private Animation createRotator(ImageView card) {
        RotateTransition rotator = new RotateTransition(Duration.millis(10000), card);
        rotator.setAxis(Rotate.Y_AXIS);
        rotator.setFromAngle(0);
        rotator.setToAngle(360);
        rotator.setInterpolator(Interpolator.LINEAR);
        rotator.setCycleCount(10);

        Image front = new Image(
            "http://www.ohmz.net/wp-content/uploads/2012/05/Game-of-Throne-Magic-trading-cards-2.jpg",
            false);
        Image back = new Image(
            "https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Card_back_05a.svg/329px-Card_back_05a.svg.png",
            front.getWidth(), front.getHeight(), true, true);

        Timeline imageSwitcher = new Timeline(
            new KeyFrame(Duration.ZERO,
                new KeyValue(card.imageProperty(), front, Interpolator.DISCRETE)),
            new KeyFrame(Duration.millis(2500),
                new KeyValue(card.imageProperty(), back, Interpolator.DISCRETE)),
            new KeyFrame(Duration.millis(7500),
                new KeyValue(card.imageProperty(), front, Interpolator.DISCRETE)),
            new KeyFrame(Duration.millis(10000),
                new KeyValue(card.imageProperty(), front, Interpolator.DISCRETE))
        );
        imageSwitcher.setCycleCount(10);

        return new ParallelTransition(card, rotator, imageSwitcher);
    }

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

将封底附加到卡片图片

2 个答案: