JavaFX 動畫 · ZetCode 中文系列教程

# JavaFX 動畫 > 原文： [http://zetcode.com/gui/javafx/animation/](http://zetcode.com/gui/javafx/animation/) 在本章中，我們將使用 JavaFX 中的動畫。我們使用`AnimationTimer`，`Transition`和`Timeline`創建動畫。動畫是連續的圖像，使人產生了運動的幻覺。但是，動畫不僅限于運動。隨著時間的推移更改節點的背景也被視為動畫。 JavaFX 提供了三種創建動畫的基本工具： * 動畫計時器 * 過渡 * 時間線 `AnimationTimer`是創建動畫的最簡單工具。這是一個基本計時器。在動畫的每一幀中都會調用其`handle()`方法。 `Transition`是定義動畫的基本高級框架。動畫由`interpolate()`方法的`frac`值控制。 `Timeline`是用于制作高級動畫的最復雜的工具。 `Timeline`動畫由`KeyFrames`定義，該動畫概述了沿`Timeline`插補的一組變量在指定時間點的節點目標值。動畫屬性由`KeyValues`定義。 ## 動畫類 `Animation`是 JavaFX 中定義高級動畫的基本類。 `Transition`和`Timeline`都擴展了`Animation`。動畫以`play()`或`playFromStart()`方法開始，以`stop()`方法結束。可以通過調用`pause()`方法暫停動畫，然后下一個`play()`調用從暫停的位置繼續播放動畫。 `rate`屬性定義了預期播放動畫的方向和速度。 `delay`屬性指定動畫的初始延遲量。動畫可以循環運行； `cycleCount`屬性中定義了循環數，`cycleDuration`指示了循環的持續時間。可以使用`autoReverseProperty`以交替的周期反轉動畫。 ## 動畫計時器 `AnimationTimer`允許創建一個定時器，該定時器在活動時在每個幀中被調用。這是一個抽象類；因此，我們需要創建一個擴展它的自定義類。在每個幀中調用的`handle()`方法都必須重寫。 `AnimationTimer`的`start()`方法啟動計時器，`stop()`方法停止計時器。 `AnimationTimerEx.java` ```java package com.zetcode; import javafx.animation.AnimationTimer; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.StackPane; import javafx.scene.text.Font; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program uses AnimationTimer to * create an animation. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class AnimationTimerEx extends Application { private double opacity = 1; private Label lbl; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { StackPane root = new StackPane(); lbl = new Label("JavaFX"); lbl.setFont(Font.font(48)); root.getChildren().add(lbl); AnimationTimer timer = new MyTimer(); timer.start(); Scene scene = new Scene(root, 300, 250); stage.setTitle("AnimationTimer"); stage.setScene(scene); stage.show(); } private class MyTimer extends AnimationTimer { @Override public void handle(long now) { doHandle(); } private void doHandle() { opacity -= 0.01; lbl.opacityProperty().set(opacity); if (opacity <= 0) { stop(); System.out.println("Animation stopped"); } } } public static void main(String[] args) { launch(args); } } ``` 該示例使用`AnimationTimer`在節點上創建淡出效果。 ```java lbl = new Label("JavaFX"); lbl.setFont(Font.font(48)); root.getChildren().add(lbl); ``` 我們的動畫更改了此`Label`控件的屬性。 ```java AnimationTimer timer = new MyTimer(); timer.start(); ``` 創建一個`AnimationTimer`并調用其`start()`方法。 ```java private class MyTimer extends AnimationTimer { @Override public void handle(long now) { doHandle(); } ... } ``` 我們創建`AnimationTimer`的具體子類并覆蓋其`handle()`方法。 ```java private void doHandle() { opacity -= 0.01; lbl.opacityProperty().set(opacity); if (opacity <= 0) { stop(); System.out.println("Animation stopped"); } } ``` 在`doHandle()`方法中，我們減小`opacity`變量并更新`opacityProperty`。如果`opacity`達到最小值，則使用`stop()`方法停止計時器。 ## 漸隱過渡 `Transition`動畫最適合計劃的動畫。 `Transition`具有具體的類，可用于創建可以并行或順序執行的各種動畫；例如`FadeTransition`，`PathTransition`，`RotateTransition`或`ScaleTransition`。 `FadeTransition`創建一個跨越其持續時間的淡入淡出效果動畫。這是通過定期更新節點的`opacity`變量來完成的。 `FadeTransitionEx.java` ```java package com.zetcode; import javafx.animation.Animation; import javafx.animation.FadeTransition; import javafx.application.Application; import javafx.event.EventHandler; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.input.MouseEvent; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; import javafx.util.Duration; /** * ZetCode JavaFX tutorial * * This program uses a FadeTransition. A rectangle * fades out after we click into its area. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class FadeTransitionEx extends Application { private FadeTransition ft; private Rectangle rect; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Group root = new Group(); rect = new Rectangle(20, 20, 150, 150); rect.setOnMouseClicked(new RectClickHandler()); ft = new FadeTransition(Duration.millis(5000), rect); ft.setFromValue(1.0); ft.setToValue(0.0); root.getChildren().add(rect); Scene scene = new Scene(root, 300, 250); stage.setTitle("Fading transition"); stage.setScene(scene); stage.show(); } private class RectClickHandler implements EventHandler<MouseEvent> { @Override public void handle(MouseEvent event) { doHandle(); } private void doHandle() { Double opa = rect.getOpacity(); if (opa.intValue() == 0) { return; } Animation.Status as = ft.getStatus(); if (as == Animation.Status.RUNNING) { return; } if (as == Animation.Status.STOPPED) { ft.play(); } } } public static void main(String[] args) { Application.launch(args); } } ``` 本示例使用`FadeTransition`在矩形上創建淡出效果。在矩形區域內單擊鼠標后開始動畫。 ```java rect = new Rectangle(20, 20, 150, 150); rect.setOnMouseClicked(new RectClickHandler()); ``` 鼠標單擊的處理器設置為矩形。 ```java ft = new FadeTransition(Duration.millis(5000), rect); ``` 創建了`FadeTransition`。它的第一個參數是過渡的持續時間。第二個參數是更新其`opacity`參數的節點。 ```java ft.setFromValue(1.0); ft.setToValue(0.0); ``` `setFromValue()`設置不透明度的開始值，`setToValue()`設置不透明度的結束值。 ```java Double opa = rect.getOpacity(); ``` 當前的不透明度值是通過`getOpacity()`方法確定的。 ```java if (opa.intValue() == 0) { return; } ``` 矩形淡出后，我們取消了鼠標單擊。 ```java Animation.Status as = ft.getStatus(); if (as == Animation.Status.RUNNING) { return; } if (as == Animation.Status.STOPPED) { ft.play(); } ``` `getStatus()`方法確定轉換的狀態。如果狀態為`Animation.Status.STOPPED`，我們將使用`play()`方法開始轉換。 ## 路徑轉換 `PathTransition`沿路徑創建動畫。通過更新節點的`translateX`和`translateY`變量來完成沿路徑的轉換。請注意，我們必須使用支持元素絕對定位的節點。 `PathTransitionEx.java` ```java package com.zetcode; import javafx.animation.PathTransition; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.shape.CubicCurveTo; import javafx.scene.shape.MoveTo; import javafx.scene.shape.Path; import javafx.stage.Stage; import javafx.util.Duration; /** * ZetCode JavaFX tutorial * * This program uses a PathTransition to move * a circle along a path. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class PathTransitionEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Path path = new Path(); path.getElements().add(new MoveTo(20, 120)); path.getElements().add(new CubicCurveTo(180, 60, 250, 340, 420, 240)); Circle circle = new Circle(20, 120, 10); circle.setFill(Color.CADETBLUE); PathTransition ptr = new PathTransition(); ptr.setDuration(Duration.seconds(6)); ptr.setDelay(Duration.seconds(2)); ptr.setPath(path); ptr.setNode(circle); ptr.setCycleCount(2); ptr.setAutoReverse(true); ptr.play(); root.getChildren().addAll(path, circle); Scene scene = new Scene(root, 450, 300); stage.setTitle("PathTransition"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例使用`PathTransition`沿路徑移動圓。動畫在初始延遲 2 秒后開始。它由兩個周期組成。動畫受到尊敬；也就是說，圓從起點到終點再返回。 ```java Pane root = new Pane(); ``` 我們使用`Pane`作為我們的根節點。它支持動畫所需的絕對定位。 ```java Path path = new Path(); path.getElements().add(new MoveTo(20, 120)); path.getElements().add(new CubicCurveTo(180, 60, 250, 340, 420, 240)); ``` 在這里，我們定義了動畫對象將沿其移動的`Path`。 ```java Circle circle = new Circle(20, 120, 10); circle.setFill(Color.CADETBLUE); ``` 這個圓是動畫中的運動對象。 ```java PathTransition ptr = new PathTransition(); ``` 創建一個`PathTransition`對象。 ```java ptr.setDuration(Duration.seconds(6)); ``` `setDuration()`方法設置動畫的持續時間。 ```java ptr.setDelay(Duration.seconds(2)); ``` `setDelay()`方法設置動畫的初始延遲。 ```java ptr.setPath(path); ptr.setNode(circle); ``` `setPath()`方法設置路徑，`setNode()`設置動畫的目標節點。 ```java ptr.setCycleCount(2); ``` 我們的動畫有兩個循環。循環次數通過`setCycleCount()`方法設置。 ```java ptr.setAutoReverse(true); ``` 使用`setAutoReverse()`方法，我們可以反轉動畫的方向。圓會移回到起始位置。 ```java ptr.play(); ``` 最后，`play()`方法開始播放動畫。 ![PathTransition](https://img.kancloud.cn/d5/2e/d52eebf3bf347b9b9c179ef94edc5c88_452x326.jpg) 圖：`PathTransition` ## 并行轉換 `ParallelTransition`并行播放`Animations`的列表。 `ParallelTransitionEx.java` ```java package com.zetcode; import javafx.animation.FillTransition; import javafx.animation.ParallelTransition; import javafx.animation.RotateTransition; import javafx.animation.ScaleTransition; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; import javafx.util.Duration; /** * ZetCode JavaFX tutorial * * This program creates a parallel * transition animation. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ParallelTransitionEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Rectangle rect = new Rectangle(50, 50, 30, 30); rect.setArcHeight(10); rect.setArcWidth(10); rect.setFill(Color.CADETBLUE); RotateTransition rottr = new RotateTransition(Duration.millis(2000), rect); rottr.setByAngle(180); rottr.setCycleCount(2); rottr.setAutoReverse(true); ScaleTransition sctr = new ScaleTransition(Duration.millis(2000), rect); sctr.setByX(2); sctr.setByY(2); sctr.setCycleCount(2); sctr.setAutoReverse(true); FillTransition fltr = new FillTransition(Duration.millis(2000), rect, Color.CADETBLUE, Color.STEELBLUE); fltr.setCycleCount(2); fltr.setAutoReverse(true); root.getChildren().add(rect); ParallelTransition ptr = new ParallelTransition(); ptr.getChildren().addAll(rottr, sctr, fltr); ptr.play(); Scene scene = new Scene(root, 300, 250); stage.setTitle("ParallelTransition"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例并行播放三個過渡。有一個旋轉，縮放和背景顏色變化的矩形對象。 ```java RotateTransition rottr = new RotateTransition(Duration.millis(2000), rect); rottr.setByAngle(180); rottr.setCycleCount(2); rottr.setAutoReverse(true); ``` `RotateTransition`將矩形旋轉指定角度。旋轉以兩個周期發生并反轉。 ```java ScaleTransition sctr = new ScaleTransition(Duration.millis(2000), rect); sctr.setByX(2); sctr.setByY(2); ``` `ScaleTransition`將矩形放大和縮小 2 倍。 ```java FillTransition fltr = new FillTransition(Duration.millis(2000), rect, Color.CADETBLUE, Color.STEELBLUE); ``` `FillTransition`將矩形的填充顏色從一種顏色值更改為另一種顏色值。 ```java ParallelTransition ptr = new ParallelTransition(); ptr.getChildren().addAll(rottr, sctr, fltr); ptr.play(); ``` 三種類型的過渡放置在`ParallelTransition`中，它們并行（即同時）播放它們。 ## 順序轉換 `SequentialTransition`按順序播放`Animations`的列表。 `SequentialTransitionEx.java` ```java package com.zetcode; import javafx.animation.FillTransition; import javafx.animation.RotateTransition; import javafx.animation.ScaleTransition; import javafx.animation.SequentialTransition; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; import javafx.util.Duration; /** * ZetCode JavaFX tutorial * * This program plays three transitions in * a sequential order. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class SequentialTransitionEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Rectangle rect = new Rectangle(50, 50, 30, 30); rect.setArcHeight(10); rect.setArcWidth(10); rect.setFill(Color.CADETBLUE); RotateTransition rottr = new RotateTransition(Duration.millis(2000), rect); rottr.setByAngle(180); rottr.setCycleCount(2); rottr.setAutoReverse(true); ScaleTransition sctr = new ScaleTransition(Duration.millis(2000), rect); sctr.setByX(2); sctr.setByY(2); sctr.setCycleCount(2); sctr.setAutoReverse(true); FillTransition fltr = new FillTransition(Duration.millis(2000), rect, Color.CADETBLUE, Color.STEELBLUE); fltr.setCycleCount(2); fltr.setAutoReverse(true); root.getChildren().add(rect); SequentialTransition str = new SequentialTransition(); str.getChildren().addAll(rottr, sctr, fltr); str.play(); Scene scene = new Scene(root, 300, 250); stage.setTitle("SequentialTransition"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例按順序播放三個過渡-一個接一個。 ```java SequentialTransition str = new SequentialTransition(); str.getChildren().addAll(rottr, sctr, fltr); str.play(); ``` 這三個轉換被添加到`SequentialTransition`中。 ## 時間線 `Timeline`是使用 JavaFX 創建動畫的最復雜的工具。動畫用`KeyFrames`定義，其中包含更改的節點的屬性。這些屬性封裝在`KeyValues`中。 `Timeline`內插屬性的更改。 `TimelineEx.java` ```java package com.zetcode; import javafx.animation.KeyFrame; import javafx.animation.KeyValue; import javafx.animation.Timeline; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.effect.Lighting; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; import javafx.util.Duration; /** * ZetCode JavaFX tutorial * * This program uses a Timeline to * move a rectangle. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class TimelineEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Rectangle rect = new Rectangle(20, 20, 60, 60); rect.setEffect(new Lighting()); rect.setFill(Color.CADETBLUE); Timeline tl = new Timeline(); tl.setCycleCount(2); tl.setAutoReverse(true); KeyValue kv = new KeyValue(rect.translateXProperty(), 200); KeyFrame kf = new KeyFrame(Duration.millis(2000), kv); tl.getKeyFrames().addAll(kf); tl.play(); root.getChildren().addAll(rect); Scene scene = new Scene(root, 350, 250); stage.setTitle("Timeline"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例使用`Timeline`為矩形動畫。 ```java Rectangle rect = new Rectangle(20, 20, 60, 60); rect.setEffect(new Lighting()); rect.setFill(Color.CADETBLUE); ``` 此矩形是動畫中的移動對象。 ```java Timeline tl = new Timeline(); ``` 創建一個`Timeline`對象。 ```java tl.setCycleCount(2); tl.setAutoReverse(true); ``` 動畫由兩個循環組成，并且被反轉。矩形前后移動。 ```java KeyValue kv = new KeyValue(rect.translateXProperty(), 200); ``` `KeyValue`包含`translateX`屬性，該屬性會隨著時間變化為 200。 ```java KeyFrame kf = new KeyFrame(Duration.millis(2000), kv); ``` 實例化了`KeyFrame`。第一個參數是其持續時間，第二個參數是`KeyValue`。動畫持續 2 秒鐘，其`translateX`屬性更改為 200。 ```java tl.getKeyFrames().addAll(kf); ``` 關鍵幀將添加到幀列表。 ## 順序時間線動畫我們沒有在時間軸中定義所有關鍵幀。我們定義一些幀，其余的幀被插值。關鍵幀在指定的時間點為時間軸內插的一組變量提供目標值。為了順序執行關鍵幀，我們利用了`SequentialTransition`類。 `SequentialTimelineEx.java` ```java package com.zetcode; import javafx.animation.KeyFrame; import javafx.animation.KeyValue; import javafx.animation.SequentialTransition; import javafx.animation.Timeline; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.stage.Stage; import javafx.util.Duration; /** * ZetCode JavaFX tutorial * * This program creates a sequential Timeline * animation. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class SequentialTimelineEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { Pane root = new Pane(); Circle c = new Circle(50, 100, 10); c.setFill(Color.CADETBLUE); KeyValue kv1 = new KeyValue(c.scaleXProperty(), 4); KeyValue kv2 = new KeyValue(c.scaleYProperty(), 4); KeyFrame kf1 = new KeyFrame(Duration.millis(3000), kv1, kv2); Timeline scale = new Timeline(); scale.getKeyFrames().add(kf1); KeyValue kv3 = new KeyValue(c.centerXProperty(), 250); KeyFrame kf2 = new KeyFrame(Duration.millis(5000), kv3); Timeline move = new Timeline(); move.getKeyFrames().add(kf2); KeyValue kv4 = new KeyValue(c.scaleXProperty(), 1); KeyValue kv5 = new KeyValue(c.scaleYProperty(), 1); KeyFrame kf3 = new KeyFrame(Duration.millis(3000), kv4, kv5); Timeline scale2 = new Timeline(); scale2.getKeyFrames().add(kf3); SequentialTransition seqtr = new SequentialTransition(scale, move, scale2); seqtr.play(); root.getChildren().add(c); Scene scene = new Scene(root, 300, 250); stage.setTitle("Sequential Timeline animation"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例創建順序時間軸動畫。動畫由三個`Timelines`組成，它們與`SequentialTransition`順序執行。 ```java Circle c = new Circle(50, 100, 10); c.setFill(Color.CADETBLUE); ``` 此動畫中的移動對象是`Circle`。 ```java KeyValue kv1 = new KeyValue(c.scaleXProperty(), 4); KeyValue kv2 = new KeyValue(c.scaleYProperty(), 4); KeyFrame kf1 = new KeyFrame(Duration.millis(3000), kv1, kv2); Timeline scale = new Timeline(); scale.getKeyFrames().add(kf1); ``` 這是第一個`Timeline`。它會在三秒鐘的時間內放大圓圈。 ```java KeyValue kv3 = new KeyValue(c.centerXProperty(), 250); KeyFrame kf2 = new KeyFrame(Duration.millis(5000), kv3); Timeline move = new Timeline(); move.getKeyFrames().add(kf2); ``` 第二個`Timeline`將圓圈向前移動。動畫的這一部分持續五秒鐘。 ```java KeyValue kv4 = new KeyValue(c.scaleXProperty(), 1); KeyValue kv5 = new KeyValue(c.scaleYProperty(), 1); KeyFrame kf3 = new KeyFrame(Duration.millis(3000), kv4, kv5); Timeline scale2 = new Timeline(); scale2.getKeyFrames().add(kf3); ``` 第三個`Timeline`按比例縮小圓圈。 ```java SequentialTransition seqtr = new SequentialTransition(scale, move, scale2); seqtr.play(); ``` 這三個時間線放置在`SequentialTransition`中。時間軸依次播放。在本章中，我們介紹了 JavaFX 動畫。