將封底附加到卡片圖像

Question

我發現this top answer（第一塊代碼）幫助我旋轉圖像（在我的情況下是卡片）。但是，如何將封底（example）連接到旋轉的卡上？

Answer 1

假設您沒有改變相機和拍攝角度，你沒有看到在所有的圖像仍然是90°和270°，你可以交換在ImageView那些角度Image以及改變scaleX財產在那些角度分別爲-1和1，以便您不需要鏡像原始圖像。

以下代碼是jewelsea'sanswer 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(); 
    } 
}