多读书多实践，勤思考善领悟

JavaFX Sequential Parallel Transitions（顺序并行转换）

后端 2019/08/08

本文于2049天之前发表，文中内容可能已经过时。

顺序转换

以下是演示JavaFX中的顺序转换的程序。将此代码保存在名为SequentialTransitionExample.java的文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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文件。

1
2
javac SequentialTransitionExample.java 
java SequentialTransitionExample

执行时，上面的程序生成一个JavaFX窗口，如下所示。

![]/img/javafx/sequential_transition.jpg)

并行过渡

以下是演示JavaFX中的并行转换的程序。将此代码保存在名为parallelTransitionExample.java的文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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文件。

1
2
javac parallelTransitionExample.java 
java parallelTransitionExample

执行时，上面的程序生成一个JavaFX窗口，如下所示。

![]/img/javafx/parallel_transition.jpg)

暂停转换

以下是在JavaFX中演示Pause Transition的程序。将此代码保存在名为PauseTransitionExample.java的文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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文件。

1
2
javac PauseTransitionExample.java 
java PauseTransitionExample

执行时，上面的程序生成一个JavaFX窗口，如下所示。

![]/img/javafx/pause_transition.jpg)

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © Ljjyy.com
Copyright © 2019-2025 Ljjyy.com | 关于我们 | 网站地图 | 时间轴