JavaFX - 路徑轉換

JavaFX 中的路徑轉換用於在特定路徑上移動 JavaFX 節點（或物件）。這類似於平移轉換，因為它也使物件從一個位置移動到另一個位置。但是，平移轉換沒有提供物件移動的連續路徑；而路徑轉換則提供了。

任何 JavaFX 節點，例如 2D 或 3D 形狀、文字、影像等，都可以沿著任何路徑移動：直線或曲線。

JavaFX 中的路徑轉換

JavaFX 提供了一個 **PathTransition** 類來在 JavaFX 節點上應用路徑轉換。此類屬於 **javafx.animation** 包。此轉換建立一個路徑動畫，該動畫使物件沿著特定路徑移動並跨越其持續時間。

路徑轉換除了平移物件以重新定位它之外，別無其他作用。這種沿著路徑的平移是透過定期更新節點在 X 和 Y 方向上的座標，以及將方向更新為 OrientationType.ORTHOGONAL_TO_TANGENT 來完成的。動畫路徑由任何 JavaFX 形狀的輪廓定義。

PathTransition 類提供了以下屬性可應用於節點：

**duration** - 此轉換的持續時間。

**node** - 此 PathTransition 的目標節點。

**orientation** - 指定節點沿路徑的垂直方向。

**path** - 節點應在其輪廓上進行動畫處理的形狀。

示例 1

以下是演示 JavaFX 中路徑轉換的程式。將此程式碼儲存在名為 **PathTransitionExample.java** 的檔案中。

import javafx.animation.PathTransition; 
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.scene.shape.CubicCurveTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 

import javafx.stage.Stage; 
import javafx.util.Duration;  
    
public class PathTransitionExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the position of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(135.0f); 
      
      //Setting the radius of the circle 
      circle.setRadius(25.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 a path transition 
      PathTransition pathTransition = new PathTransition(); 
      
      //Setting the duration of the path transition 
      pathTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      pathTransition.setNode(circle); 
      
      //Setting the path 
      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(50); 
      
      //Setting auto reverse value to false 
      pathTransition.setAutoReverse(false); 
    
      //Playing the animation 
      pathTransition.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("Path 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 --module-path %PATH_TO_FX% --add-modules javafx.controls PathTransitionExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls PathTransitionExample 

輸出

執行後，上述程式生成一個 JavaFX 視窗，如下所示。

示例 2

以下是一個沿著複雜路徑轉換圓形的示例。將此程式碼儲存在名為 **PathTransitionExample2.java** 的檔案中。

import javafx.animation.PathTransition; 
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.LineTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path;  

import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class PathTransitionExample2 extends Application {   
   @Override 
   public void start(Stage stage) {   
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the position of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(135.0f); 
      
      //Setting the radius of the circle 
      circle.setRadius(25.0f); 
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20);     
       
      //Creating a Path 
      Path path = new Path(); 
      
      //Moving to the starting point 
      MoveTo moveTo = new MoveTo(108, 71);               
      
      //Creating 1st line 
      LineTo line1 = new LineTo(321, 161);        
      
      //Creating 2nd line 
      LineTo line2 = new LineTo(126,232); 
      
      //Creating 3rd line 
      LineTo line3 = new LineTo(232,52);        
      
      //Creating 4th line 
      LineTo line4 = new LineTo(269, 250);        
      
      //Creating 5th line 
      LineTo line5 = new LineTo(108, 71);       
      
      //Adding all the elements to the path  
      path.getElements().add(moveTo); 
      path.getElements().addAll(line1, line2, line3, line4, line5);     
      
      //Creating the 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(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(50); 
      
      //Setting auto reverse value to true 
      pathTransition.setAutoReverse(false); 
      
      //Playing the animation 
      pathTransition.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("Path 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 --module-path %PATH_TO_FX% --add-modules javafx.controls PathTransitionExample2.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls PathTransitionExample2 

輸出

執行後，上述程式生成一個 JavaFX 視窗，如下所示。