JavaFX - Hoạt ảnh
Nói chung, tạo hoạt ảnh cho một đối tượng ngụ ý tạo ra ảo ảnh về chuyển động của nó bằng cách hiển thị nhanh. Trong JavaFX, một nút có thể được làm động bằng cách thay đổi thuộc tính của nó theo thời gian. JavaFX cung cấp một gói có tênjavafx.animation. Gói này chứa các lớp được sử dụng để tạo hoạt ảnh cho các nút. Animation là lớp cơ sở của tất cả các lớp này.
Sử dụng JavaFX, bạn có thể áp dụng các hoạt ảnh (chuyển tiếp) chẳng hạn như Fade Transition, Fill Transition, Rotate Transition, Scale Transition, Stroke Transition, Translate Transition, Path Transition, Sequential Transition, Pause Transition, Parallel Transition, Vân vân.
Tất cả các chuyển đổi này được đại diện bởi các lớp riêng lẻ trong gói javafx.animation.
Để áp dụng một hoạt ảnh cụ thể cho một nút, bạn phải làm theo các bước dưới đây:
Tạo một nút yêu cầu bằng cách sử dụng lớp tương ứng.
Khởi tạo lớp chuyển tiếp (hoạt ảnh) tương ứng sẽ được áp dụng
Đặt các thuộc tính của quá trình chuyển đổi và
Cuối cùng chơi chuyển đổi bằng cách sử dụng play() phương pháp của Animation lớp học.
Trong chương này, chúng ta sẽ thảo luận về các ví dụ về chuyển đổi cơ bản (Xoay, Chia tỷ lệ, Dịch).
Xoay chuyển đổi
Sau đây là chương trình thể hiện Chuyển đổi Xoay trong JavaFX. Lưu mã này trong một tệp có tênRotateTransitionExample.java.
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);
}
}
Biên dịch và thực thi tệp java đã lưu từ dấu nhắc lệnh bằng các lệnh sau.
javac RotateTransitionExample.java
java RotateTransitionExample
Khi thực thi, chương trình trên tạo một cửa sổ JavaFX như hình dưới đây.
Chuyển đổi quy mô
Sau đây là chương trình thể hiện Chuyển đổi quy mô trong JavaFX. Lưu mã này trong một tệp có tênScaleTransitionExample.java.
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);
}
}
Biên dịch và thực thi tệp java đã lưu từ dấu nhắc lệnh bằng các lệnh sau.
javac ScaleTransitionExample.java
java ScaleTransitionExample
Khi thực thi, chương trình trên tạo một cửa sổ JavaFX như hình dưới đây.
Dịch chuyển đổi
Sau đây là chương trình minh họa Chuyển đổi dịch trong JavaFX. Lưu mã này trong một tệp có tênTranslateTransitionExample.java.
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);
}
}
Biên dịch và thực thi tệp java đã lưu từ dấu nhắc lệnh bằng các lệnh sau.
javac TranslateTransitionExample.java
java TranslateTransitionExample
Khi thực thi, chương trình trên tạo một cửa sổ JavaFX như hình dưới đây.
Ngoài những điều này, JavaFX cung cấp các lớp để áp dụng nhiều chuyển tiếp hơn trên các nút. Sau đây là các loại chuyển đổi khác được hỗ trợ bởi JavaFX.
Các chuyển đổi ảnh hưởng đến các thuộc tính của các nút Fade, Fill, Stroke
Chuyển đổi bao gồm nhiều hơn một chuyển đổi cơ bản Tuần tự, Song song, Tạm dừng
Chuyển đổi dịch đối tượng dọc theo đường dẫn được chỉ định Chuyển đổi đường dẫn