JavaFX - ภาพเคลื่อนไหว
โดยทั่วไปการทำให้วัตถุเคลื่อนไหวหมายถึงการสร้างภาพลวงตาของการเคลื่อนไหวโดยการแสดงผลอย่างรวดเร็ว ใน JavaFX โหนดสามารถเคลื่อนไหวได้โดยเปลี่ยนคุณสมบัติตลอดเวลา JavaFX จัดเตรียมแพ็กเกจที่ชื่อjavafx.animation. แพ็กเกจนี้มีคลาสที่ใช้เพื่อทำให้โหนดเคลื่อนไหว แอนิเมชั่นเป็นคลาสพื้นฐานของคลาสเหล่านี้ทั้งหมด
เมื่อใช้ JavaFX คุณสามารถใช้ภาพเคลื่อนไหว (ช่วงการเปลี่ยนภาพ) เช่น Fade Transition, Fill Transition, Rotate Transition, Scale Transition, Stroke Transition, Translate Transition, Path Transition, Sequential Transition, Pause Transition, Parallel Transitionฯลฯ
การเปลี่ยนทั้งหมดเหล่านี้แสดงโดยแต่ละคลาสในแพ็คเกจ javafx.animation.
ในการใช้ภาพเคลื่อนไหวเฉพาะกับโหนดคุณต้องทำตามขั้นตอนด้านล่าง -
สร้างโหนดที่ต้องการโดยใช้คลาสที่เกี่ยวข้อง
สร้างอินสแตนซ์คลาสการเปลี่ยนแปลง (ภาพเคลื่อนไหว) ตามลำดับที่จะนำไปใช้
ตั้งค่าคุณสมบัติของการเปลี่ยนแปลงและ
สุดท้ายเล่นการเปลี่ยนแปลงโดยใช้ play() วิธีการของ Animation ชั้นเรียน
ในบทนี้เราจะพูดถึงตัวอย่างของการเปลี่ยนขั้นพื้นฐาน (การหมุนการปรับขนาดการแปล)
หมุนการเปลี่ยนแปลง
ต่อไปนี้เป็นโปรแกรมที่สาธิต Rotate Transition ใน JavaFX บันทึกรหัสนี้ในไฟล์ที่มีชื่อRotateTransitionExample.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);
}
}
คอมไพล์และเรียกใช้ไฟล์ java ที่บันทึกไว้จากพรอมต์คำสั่งโดยใช้คำสั่งต่อไปนี้
javac RotateTransitionExample.java
java RotateTransitionExample
ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ดังที่แสดงด้านล่าง
การเปลี่ยนขนาด
ต่อไปนี้เป็นโปรแกรมที่สาธิตการเปลี่ยนมาตราส่วนใน JavaFX บันทึกรหัสนี้ในไฟล์ที่มีชื่อScaleTransitionExample.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);
}
}
คอมไพล์และเรียกใช้ไฟล์ java ที่บันทึกไว้จากพรอมต์คำสั่งโดยใช้คำสั่งต่อไปนี้
javac ScaleTransitionExample.java
java ScaleTransitionExample
ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ดังที่แสดงด้านล่าง
แปล Transition
ต่อไปนี้เป็นโปรแกรมที่สาธิตการเปลี่ยนแปลภาษาใน JavaFX บันทึกรหัสนี้ในไฟล์ที่มีชื่อTranslateTransitionExample.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);
}
}
คอมไพล์และเรียกใช้ไฟล์ java ที่บันทึกไว้จากพรอมต์คำสั่งโดยใช้คำสั่งต่อไปนี้
javac TranslateTransitionExample.java
java TranslateTransitionExample
ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ดังที่แสดงด้านล่าง
นอกจากนี้ JavaFX ยังมีคลาสเพื่อใช้การเปลี่ยนเพิ่มเติมบนโหนด ต่อไปนี้คือการเปลี่ยนประเภทอื่น ๆ ที่ JavaFX สนับสนุน
การเปลี่ยนที่มีผลต่อคุณลักษณะของโหนดFade, Fill, Stroke
การเปลี่ยนที่เกี่ยวข้องกับการเปลี่ยนขั้นพื้นฐานมากกว่าหนึ่งลำดับตามลำดับขนานหยุดชั่วคราว
การเปลี่ยนที่แปลวัตถุตามเส้นทางการเปลี่ยนเส้นทางที่ระบุ