- JavaFX 教程
- JavaFX - 首頁
- JavaFX - 概述
- JavaFX 安裝和架構
- JavaFX - 環境
- JavaFX - 使用 Netbeans 安裝
- JavaFX - 使用 Eclipse 安裝
- JavaFX - 使用 Visual Studio Code 安裝
- JavaFX - 架構
- JavaFX - 應用程式
- JavaFX 2D 形狀
- JavaFX - 2D 形狀
- JavaFX - 繪製線條
- JavaFX - 繪製矩形
- JavaFX - 繪製圓角矩形
- JavaFX - 繪製圓形
- JavaFX - 繪製橢圓
- JavaFX - 繪製多邊形
- JavaFX - 繪製折線
- JavaFX - 繪製三次貝塞爾曲線
- JavaFX - 繪製二次貝塞爾曲線
- JavaFX - 繪製弧線
- JavaFX - 繪製 SVGPath
- JavaFX 2D 物件的屬性
- JavaFX - 描邊型別屬性
- JavaFX - 描邊寬度屬性
- JavaFX - 描邊填充屬性
- JavaFX - 描邊屬性
- JavaFX - 描邊線連線屬性
- JavaFX - 描邊斜接限制屬性
- JavaFX - 描邊線端點屬性
- JavaFX - 平滑屬性
- JavaFX 路徑物件
- JavaFX - 路徑物件
- JavaFX - LineTo 路徑物件
- JavaFX - HLineTo 路徑物件
- JavaFX - VLineTo 路徑物件
- JavaFX - QuadCurveTo 路徑物件
- JavaFX - CubicCurveTo 路徑物件
- JavaFX - ArcTo 路徑物件
- JavaFX 顏色和紋理
- JavaFX - 顏色
- JavaFX - 線性漸變圖案
- JavaFX - 徑向漸變圖案
- JavaFX 文字
- JavaFX - 文字
- JavaFX 效果
- JavaFX - 效果
- JavaFX - 顏色調整效果
- JavaFX - 顏色輸入效果
- JavaFX - 影像輸入效果
- JavaFX - 混合效果
- JavaFX - 泛光效果
- JavaFX - 輝光效果
- JavaFX - 方框模糊效果
- JavaFX - 高斯模糊效果
- JavaFX - 運動模糊效果
- JavaFX - 反射效果
- JavaFX - 棕褐色效果
- JavaFX - 陰影效果
- JavaFX - 投影效果
- JavaFX - 內陰影效果
- JavaFX - 照明效果
- JavaFX - Light.Distant 效果
- JavaFX - Light.Spot 效果
- JavaFX - Point.Spot 效果
- JavaFX - 位移對映
- JavaFX - 透視變換
- JavaFX 動畫
- JavaFX - 動畫
- JavaFX - 旋轉過渡
- JavaFX - 縮放過渡
- JavaFX - 平移過渡
- JavaFX - 淡入淡出過渡
- JavaFX - 填充過渡
- JavaFX - 描邊過渡
- JavaFX - 順序過渡
- JavaFX - 並行過渡
- JavaFX - 暫停過渡
- JavaFX - 路徑過渡
- JavaFX 影像
- JavaFX - 影像
- JavaFX 3D 形狀
- JavaFX - 3D 形狀
- JavaFX - 建立盒子
- JavaFX - 建立圓柱體
- JavaFX - 建立球體
- 3D 物件的屬性
- JavaFX - 剔除面屬性
- JavaFX - 繪製模式屬性
- JavaFX - 材質屬性
- JavaFX 事件處理
- JavaFX - 事件處理
- JavaFX - 使用便捷方法
- JavaFX - 事件過濾器
- JavaFX - 事件處理程式
- JavaFX UI 控制元件
- JavaFX - UI 控制元件
- JavaFX - 列表檢視
- JavaFX - 手風琴
- JavaFX - 按鈕欄
- JavaFX - 選擇框
- JavaFX - HTMLEditor
- JavaFX - 選單欄
- JavaFX - 分頁
- JavaFX - 進度指示器
- JavaFX - 滾動窗格
- JavaFX - 分隔符
- JavaFX - 滑塊
- JavaFX - 微調器
- JavaFX - 分割窗格
- JavaFX - 表格檢視
- JavaFX - 選項卡窗格
- JavaFX - 工具欄
- JavaFX - 樹檢視
- JavaFX - 標籤
- JavaFX - 複選框
- JavaFX - 單選按鈕
- JavaFX - 文字欄位
- JavaFX - 密碼欄位
- JavaFX - 檔案選擇器
- JavaFX - 超連結
- JavaFX - 工具提示
- JavaFX - 警報
- JavaFX - 日期選擇器
- JavaFX - 文字區域
- JavaFX 圖表
- JavaFX - 圖表
- JavaFX - 建立餅圖
- JavaFX - 建立折線圖
- JavaFX - 建立面積圖
- JavaFX - 建立條形圖
- JavaFX - 建立氣泡圖
- JavaFX - 建立散點圖
- JavaFX - 建立堆疊面積圖
- JavaFX - 建立堆疊條形圖
- JavaFX 佈局窗格
- JavaFX - 佈局窗格
- JavaFX - HBox 佈局
- JavaFX - VBox 佈局
- JavaFX - BorderPane 佈局
- JavaFX - StackPane 佈局
- JavaFX - TextFlow 佈局
- JavaFX - AnchorPane 佈局
- JavaFX - TilePane 佈局
- JavaFX - GridPane 佈局
- JavaFX - FlowPane 佈局
- JavaFX CSS
- JavaFX - CSS
- JavaFX 中的媒體
- JavaFX - 處理媒體
- JavaFX - 播放影片
- JavaFX 有用資源
- JavaFX - 快速指南
- JavaFX - 有用資源
- JavaFX - 討論
順序並行過渡
順序過渡
以下是演示 JavaFX 中順序過渡的程式。將此程式碼儲存在名為 SequentialTransitionExample.java 的檔案中。
import javafx.animation.PathTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.SequentialTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
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;
public class SequentialTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(150.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(100.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Instantiating the path class
Path path = new Path();
//Creating the MoveTo path element
MoveTo moveTo = new MoveTo(100, 150);
//Creating the Cubic curve path element
CubicCurveTo cubicCurveTo = new CubicCurveTo(400, 40, 175, 250, 500, 150);
//Adding the path elements to Observable list of the Path class
path.getElements().add(moveTo);
path.getElements().add(cubicCurveTo);
//Creating path Transition
PathTransition pathTransition = new PathTransition();
//Setting the duration for the transition
pathTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
pathTransition.setNode(circle);
//Setting the path for the transition
pathTransition.setPath(path);
//Setting the orientation of the path
pathTransition.setOrientation(
PathTransition.OrientationType.ORTHOGONAL_TO_TAN GENT);
//Setting the cycle count for the transition
pathTransition.setCycleCount(5);
//Setting auto reverse value to false
pathTransition.setAutoReverse(false);
//Playing the animation
pathTransition.play();
//Creating Translate Transition
TranslateTransition translateTransition = new TranslateTransition();
//Setting the duration for the transition
pathTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
pathTransition.setNode(circle);
//Setting the length of the transition along x axis
translateTransition.setByX(300);
//Setting the cycle count for the stroke
translateTransition.setCycleCount(5);
//Setting auto reverse value to false
translateTransition.setAutoReverse(false);
//Applying scale Transition to the circle
ScaleTransition scaleTransition = new ScaleTransition();
//Setting the duration for the transition
pathTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
pathTransition.setNode(circle);
//Setting the dimensions for scaling
scaleTransition.setByY(1.5);
scaleTransition.setByX(1.5);
//Setting the cycle count for the translation
scaleTransition.setCycleCount(5);
//Setting auto reverse value to false
scaleTransition.setAutoReverse(false);
//Applying Sequential Translation to the circle
SequentialTransition sequentialTransition = new SequentialTransition(circle,
pathTransition, translateTransition, scaleTransition );
//Playing the animation
sequentialTransition.play();
//Creating a Group object
Group root = new Group(circle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Seqiential transition example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
使用以下命令從命令提示符編譯並執行儲存的 java 檔案。
javac SequentialTransitionExample.java java SequentialTransitionExample
執行後,上述程式會生成一個如下所示的 JavaFX 視窗。
並行過渡
以下是演示 JavaFX 中並行過渡的程式。將此程式碼儲存在名為 parallelTransitionExample.java 的檔案中。
import javafx.animation.ParallelTransition;
import javafx.animation.PathTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class parallelTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Rectangle
Rectangle rectangle = new Rectangle();
//Setting the position of the rectangle
rectangle.setX(75.0f);
rectangle.setY(75.0f);
//Setting the width of the rectangle
rectangle.setWidth(100.0f);
//Setting the height of the rectangle
rectangle.setHeight(100.0f);
//setting the color of the rectangle
rectangle.setFill(Color.BLUEVIOLET);
//Instantiating the path class
Path path = new Path();
//Creating the MoveTo path element
MoveTo moveTo = new MoveTo(100, 150);
//Creating the Cubic curve path element
CubicCurveTo cubicCurveTo = new CubicCurveTo(400, 40, 175, 250, 500, 150);
//Adding the path elements to Observable list of the Path class
path.getElements().add(moveTo);
path.getElements().add(cubicCurveTo);
//Creating Path Transition
PathTransition pathTransition = new PathTransition();
//Setting the duration of the transition
pathTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
pathTransition.setNode(rectangle);
//Setting the path for the transition
pathTransition.setPath(path);
//Setting the orientation of the path
pathTransition.setOrientation(
PathTransition.OrientationType.ORTHOGONAL_TO_TAN GENT);
//Setting the cycle count for the transition
pathTransition.setCycleCount(5);
//Setting auto reverse value to false
pathTransition.setAutoReverse(false);
//Playing the animation
pathTransition.play();
//Creating Translate Transition
TranslateTransition translateTransition = new TranslateTransition();
//Setting the duration for the transition
translateTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
translateTransition.setNode(rectangle);
//Setting the axis and length of the transition
translateTransition.setByX(300);
//Setting the cycle count of the transition
translateTransition.setCycleCount(5);
//Setting auto reverse value to false
translateTransition.setAutoReverse(false);
//Creating scale Transition
ScaleTransition scaleTransition = new ScaleTransition();
//Setting the duration for the transition
translateTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
translateTransition.setNode(rectangle);
//Setting the dimensions for scaling
scaleTransition.setByY(1.5);
scaleTransition.setByX(1.5);
//Setting the cycle count for the translation
scaleTransition.setCycleCount(5);
//Setting auto reverse value to true
scaleTransition.setAutoReverse(false);
//Applying parallel Translation to the circle
ParallelTransition parallelTransition = new ParallelTransition(
rectangle, pathTransition, translateTransition, scaleTransition );
//Playing the animation
parallelTransition.play();
//Creating a Group object
Group root = new Group(rectangle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Parallel Transition example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
使用以下命令從命令提示符編譯並執行儲存的 java 檔案。
javac parallelTransitionExample.java java parallelTransitionExample
執行後,上述程式會生成一個如下所示的 JavaFX 視窗。
暫停過渡
以下是演示 JavaFX 中暫停過渡的程式。將此程式碼儲存在名為 PauseTransitionExample.java 的檔案中。
import javafx.animation.PauseTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.SequentialTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class PauseTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(150.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(50.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Creating a Pause Transition
PauseTransition pauseTransition = new PauseTransition();
//Setting the duration for the transition
pauseTransition.setDuration(Duration.millis(1000));
//Creating Translate Transition
TranslateTransition translateTransition = new TranslateTransition();
//Setting the duration for the transition
translateTransition.setDuration(Duration.millis(1000));
//Setting the node of the transition
translateTransition.setNode(circle);
//Setting the value of the transition along the x axis
translateTransition.setByX(300);
//Setting the cycle count for the stroke
translateTransition.setCycleCount(5);
//Setting auto reverse value to true
translateTransition.setAutoReverse(false);
//Creating scale Transition
ScaleTransition scaleTransition = new ScaleTransition();
//Setting the duration for the transition
scaleTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
scaleTransition.setNode(circle);
//Setting the dimensions for scaling
scaleTransition.setByY(1.5);
scaleTransition.setByX(1.5);
//Setting the cycle count for the translation
scaleTransition.setCycleCount(5);
//Setting auto reverse value to true
scaleTransition.setAutoReverse(false);
//Applying Sequential transition to the circle
SequentialTransition sequentialTransition = new SequentialTransition(
circle, translateTransition, pauseTransition, scaleTransition );
//Playing the animation
sequentialTransition.play();
//Creating a Group object
Group root = new Group(circle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Pause transition example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
使用以下命令從命令提示符編譯並執行儲存的 java 檔案。
javac PauseTransitionExample.java java PauseTransitionExample
執行後,上述程式會生成一個如下所示的 JavaFX 視窗。
javafx_animations.htm
廣告