翻转卡片动画
我正在尝试翻转彩色矩形。 是否可以使用rotateTransition来执行此操作？
我试过以下代码：
public void rotateField(){ RotateTransition rt = new RotateTransition(Duration.millis(3000), field[4][4]); rt.setByAngle(360); rt.setCycleCount(1); rt.play(); } 但是，这不会翻转矩形，只是旋转它。 我想实际翻转矩形，就像你翻转一张扑克牌一样。
是否可以使用rotateTransition类？
我喜欢谢尔盖的解决方案，它是如此巧妙地使用ScaleTransition并在2D工作意味着你不需要处理3D的一些复杂性。
这里有几个3D旋转样本。
围绕Y轴旋转2D节点（ImageView）（需要JavaFX 2.2 + 3D支持）。
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 QuickFlip extends Application { @Override public void start(Stage stage) throws Exception { Node card = createCard(); stage.setScene(createScene(card)); stage.show(); RotateTransition rotator = createRotator(card); 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() { return new ImageView( new Image( "http://www.ohmz.net/wp-content/uploads/2012/05/Game-of-Throne-Magic-trading-cards-2.jpg" ) ); } private RotateTransition createRotator(Node 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); return rotator; } public static void main(String[] args) { launch(); } }
围绕Y轴旋转3D节点（TriangleMesh）（需要Java 8 + 3D支持）。
import javafx.animation.*; import javafx.application.Application; import javafx.scene.*; import javafx.scene.image.Image; import javafx.scene.layout.StackPane; import javafx.scene.paint.*; import javafx.scene.shape.*; import javafx.scene.transform.Rotate; import javafx.stage.Stage; import javafx.util.Duration; public class CardFlip extends Application { final Image CARD_IMAGE = new Image( "http://fc05.deviantart.net/fs70/i/2010/345/7/7/vitam_et_mortem_by_obviouschild-d34oni2.png" // sourced from: http://obviouschild.deviantart.com/art/Vitam-et-Mortem-189267194 ); final int W = (int) (CARD_IMAGE.getWidth() / 2); final int H = (int) CARD_IMAGE.getHeight(); @Override public void start(Stage stage) throws Exception { Node card = createCard(); stage.setScene(createScene(card)); stage.show(); RotateTransition rotator = createRotator(card); rotator.play(); } private Scene createScene(Node card) { StackPane root = new StackPane(); root.getChildren().addAll(card, new AmbientLight(Color.WHITE)); Scene scene = new Scene(root, W + 200, H + 200, true, SceneAntialiasing.BALANCED); scene.setFill(Color.MIDNIGHTBLUE.darker().darker().darker().darker()); scene.setCamera(new PerspectiveCamera()); return scene; } private RotateTransition createRotator(Node 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); return rotator; } private Node createCard() { MeshView card = new MeshView(createCardMesh()); PhongMaterial material = new PhongMaterial(); material.setDiffuseMap(CARD_IMAGE); card.setMaterial(material); return card; } private TriangleMesh createCardMesh() { TriangleMesh mesh = new TriangleMesh(); mesh.getPoints().addAll(-1 * W/2, -1 * H/2 , 0, 1 * W/2, -1 * H/2, 0, -1 * W/2, 1 * H/2, 0, 1 * W/2, 1 * H/2, 0); mesh.getFaces().addAll(0, 0, 2, 2, 3, 3, 3, 3, 1, 1, 0, 0); mesh.getFaces().addAll(0, 4, 3, 7, 2, 6, 3, 7, 0, 4, 1, 5); mesh.getTexCoords().addAll(0, 0, 0.5f, 0, 0, 1, 0.5f, 1, 0.5f, 0, 1, 0, 0.5f, 1, 1, 1); return mesh; } public static void main(String[] args) { launch(); } }
不在2D世界。 但你可以使用两个ScaleTransition模仿卡片翻转：
Rectangle front = new Rectangle(50, 50); ScaleTransition stHideFront = new ScaleTransition(Duration.millis(1500), front); stHideFront.setFromX(1); stHideFront.setToX(0); Rectangle back = new Rectangle(50, 50, Color.RED); back.setScaleX(0); ScaleTransition stShowBack = new ScaleTransition(Duration.millis(1500), back); stShowBack.setFromX(0); stShowBack.setToX(1); stHideFront.setOnFinished(new EventHandler() { @Override public void handle(ActionEvent t) { stShowBack.play(); } }); StackPane root = new StackPane(); root.getChildren().addAll(front, back); Scene scene = new Scene(root, 300, 250); primaryStage.setScene(scene); primaryStage.show(); stHideFront.play();