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

JavaFX Animations(动画)

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

通常,动画对象意味着通过快速显示来创建其运动的错觉。在JavaFX中,可以通过随时间更改其属性来动画化节点。JavaFX提供了一个名为javafx.animation的包。此程序包包含用于为节点设置动画的类。动画是所有这些类的基类。

使用JavaFX,您可以应用动画(过渡),如淡入淡出过渡填充过渡旋转过渡缩放过渡笔划过渡平移过渡路径过渡顺序过渡暂停过渡并行过渡等。

所有这些转换都由包javafx.animation中的各个类表示。

要将特定动画应用于节点,您必须按照以下步骤操作 -

  • 使用相应的类创建require节点。
  • 实例化要应用的相应转换(动画)类
  • 设置过渡的属性和
  • 最后使用Animation类的play()方法进行转换。

在本章中,我们将讨论基本过渡(旋转,缩放,翻译)的示例。

旋转过渡

以下是演示JavaFX中的Rotate Transition的程序。将此代码保存在名为RotateTransitionExample.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
import javafx.animation.RotateTransition; 
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.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;

public class RotateTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Creating a hexagon
Polygon hexagon = new Polygon();

//Adding coordinates to the hexagon
hexagon.getPoints().addAll(new Double[]{
200.0, 50.0,
400.0, 50.0,
450.0, 150.0,
400.0, 250.0,
200.0, 250.0,
150.0, 150.0,
});
//Setting the fill color for the hexagon
hexagon.setFill(Color.BLUE);

//Creating a rotate transition
RotateTransition rotateTransition = new RotateTransition();

//Setting the duration for the transition
rotateTransition.setDuration(Duration.millis(1000));

//Setting the node for the transition
rotateTransition.setNode(hexagon);

//Setting the angle of the rotation
rotateTransition.setByAngle(360);

//Setting the cycle count for the transition
rotateTransition.setCycleCount(50);

//Setting auto reverse value to false
rotateTransition.setAutoReverse(false);

//Playing the animation
rotateTransition.play();

//Creating a Group object
Group root = new Group(hexagon);

//Creating a scene object
Scene scene = new Scene(root, 600, 300);

//Setting title to the Stage
stage.setTitle("Rotate 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 RotateTransitionExample.java 
java RotateTransitionExample

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

缩放过渡

以下是在JavaFX中演示Scale Transition的程序。将此代码保存在名为ScaleTransitionExample.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
import javafx.animation.ScaleTransition; 
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 ScaleTransitionExample 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(50.0f);

//Setting the color of the circle
circle.setFill(Color.BROWN);

//Setting the stroke width of the circle
circle.setStrokeWidth(20);

//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(50);

//Setting auto reverse value to true
scaleTransition.setAutoReverse(false);

//Playing the animation
scaleTransition.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("Scale 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 ScaleTransitionExample.java 
java ScaleTransitionExample

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

平移过渡

以下是演示JavaFX中的Translate Transition的程序。将此代码保存在名为TranslateTransitionExample.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
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.stage.Stage;
import javafx.util.Duration;

public class TranslateTransitionExample 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);

//Creating Translate Transition
TranslateTransition translateTransition = new TranslateTransition();

//Setting the duration of the transition
translateTransition.setDuration(Duration.millis(1000));

//Setting the node for the transition
translateTransition.setNode(circle);

//Setting the value of the transition along the x axis.
translateTransition.setByX(300);

//Setting the cycle count for the transition
translateTransition.setCycleCount(50);

//Setting auto reverse value to false
translateTransition.setAutoReverse(false);

//Playing the animation
translateTransition.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("Translate 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 TranslateTransitionExample.java 
java TranslateTransitionExample

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

除此之外,JavaFX还提供了在节点上应用更多转换的类。以下是JavaFX支持的其他类型的转换。