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

  • การเปลี่ยนที่เกี่ยวข้องกับการเปลี่ยนขั้นพื้นฐานมากกว่าหนึ่งลำดับตามลำดับขนานหยุดชั่วคราว

  • การเปลี่ยนที่แปลวัตถุตามเส้นทางการเปลี่ยนเส้นทางที่ระบุ