JavaFX - การจัดการเหตุการณ์

ใน JavaFX เราสามารถพัฒนาแอปพลิเคชัน GUI เว็บแอปพลิเคชันและแอปพลิเคชันกราฟิก ในแอปพลิเคชันดังกล่าวเมื่อใดก็ตามที่ผู้ใช้โต้ตอบกับแอปพลิเคชัน (โหนด) จะมีการกล่าวถึงเหตุการณ์ที่เกิดขึ้น

ตัวอย่างเช่นคลิกที่ปุ่มเลื่อนเมาส์ป้อนอักขระผ่านแป้นพิมพ์เลือกรายการจากรายการการเลื่อนหน้าเป็นกิจกรรมที่ทำให้เกิดเหตุการณ์

ประเภทของเหตุการณ์

เหตุการณ์สามารถแบ่งออกเป็นสองประเภทดังต่อไปนี้:

• Foreground Events- เหตุการณ์ที่ต้องมีการโต้ตอบโดยตรงของผู้ใช้ สิ่งเหล่านี้สร้างขึ้นจากผลที่ตามมาของบุคคลที่โต้ตอบกับส่วนประกอบกราฟิกในอินเทอร์เฟซผู้ใช้แบบกราฟิก ตัวอย่างเช่นคลิกที่ปุ่มเลื่อนเมาส์ป้อนอักขระผ่านแป้นพิมพ์เลือกรายการจากรายการเลื่อนหน้าเป็นต้น

• Background Events- เหตุการณ์ที่ต้องการการโต้ตอบของผู้ใช้ปลายทางเรียกว่าเหตุการณ์พื้นหลัง การหยุดชะงักของระบบปฏิบัติการฮาร์ดแวร์หรือซอฟต์แวร์ล้มเหลวการหมดเวลาของตัวจับเวลาการดำเนินการเสร็จสิ้นเป็นตัวอย่างของเหตุการณ์เบื้องหลัง

เหตุการณ์ใน JavaFX

JavaFX ให้การสนับสนุนเพื่อจัดการกับเหตุการณ์ที่หลากหลาย ชั้นเรียนชื่อEvent ของแพ็คเกจ javafx.event เป็นคลาสพื้นฐานสำหรับเหตุการณ์

อินสแตนซ์ของคลาสย่อยใด ๆ คือเหตุการณ์ JavaFX มีเหตุการณ์ที่หลากหลาย บางส่วนมีการระบุไว้ด้านล่าง

• Mouse Event- นี่คือเหตุการณ์ป้อนข้อมูลที่เกิดขึ้นเมื่อคลิกเมาส์ มันแสดงโดยคลาสที่ชื่อMouseEvent. ซึ่งรวมถึงการกระทำต่างๆเช่นการคลิกเมาส์การกดเมาส์ปล่อยเมาส์การเลื่อนเมาส์การป้อนเป้าหมายของเมาส์เป้าหมายการออกจากเมาส์เป็นต้น

• Key Event- นี่คือเหตุการณ์อินพุตที่บ่งชี้จังหวะสำคัญที่เกิดขึ้นบนโหนด มันแสดงโดยคลาสที่ชื่อKeyEvent. เหตุการณ์นี้รวมถึงการดำเนินการต่างๆเช่นการกดแป้นการปล่อยคีย์และการพิมพ์คีย์

• Drag Event- นี่คือเหตุการณ์การป้อนข้อมูลที่เกิดขึ้นเมื่อลากเมาส์ มันแสดงโดยคลาสที่ชื่อDragEvent. รวมถึงการดำเนินการต่างๆเช่นลากเข้าลากปล่อยลากเป้าหมายที่ป้อนลากออกจากเป้าหมายลากผ่าน ฯลฯ

• Window Event- นี่คือเหตุการณ์ที่เกี่ยวข้องกับหน้าต่างที่แสดง / ซ่อนการกระทำ มันแสดงโดยคลาสที่ชื่อWindowEvent. รวมถึงการกระทำเช่นการซ่อนหน้าต่างหน้าต่างที่แสดงซ่อนหน้าต่างแสดงหน้าต่าง ฯลฯ

การจัดการเหตุการณ์

การจัดการเหตุการณ์เป็นกลไกที่ควบคุมเหตุการณ์และตัดสินใจว่าจะเกิดอะไรขึ้นหากมีเหตุการณ์เกิดขึ้น กลไกนี้มีรหัสซึ่งเรียกว่าตัวจัดการเหตุการณ์ที่ดำเนินการเมื่อมีเหตุการณ์เกิดขึ้น

JavaFX มีตัวจัดการและตัวกรองเพื่อจัดการกับเหตุการณ์ ใน JavaFX ทุกเหตุการณ์มี -

• Target- โหนดที่มีเหตุการณ์เกิดขึ้น เป้าหมายอาจเป็นหน้าต่างฉากและโหนด

• Source- แหล่งที่มาของเหตุการณ์จะเป็นที่มาของเหตุการณ์ ในสถานการณ์ข้างต้นเมาส์เป็นที่มาของเหตุการณ์

• Type- ประเภทของเหตุการณ์ที่เกิดขึ้น ในกรณีของเหตุการณ์เมาส์ - การกดเมาส์การปล่อยเมาส์เป็นประเภทของเหตุการณ์

สมมติว่าเรามีแอพพลิเคชั่นที่มีปุ่มวงกลมหยุดและเล่นแทรกโดยใช้วัตถุกลุ่มดังนี้ -

หากคุณคลิกที่ปุ่มเล่นแหล่งที่มาจะเป็นเมาส์โหนดเป้าหมายจะเป็นปุ่มเล่นและประเภทของเหตุการณ์ที่สร้างขึ้นคือการคลิกเมาส์

ขั้นตอนของการจัดการเหตุการณ์ใน JavaFX

เมื่อใดก็ตามที่มีการสร้างเหตุการณ์ JavaFX จะผ่านขั้นตอนต่อไปนี้

การก่อสร้างเส้นทาง

เมื่อใดก็ตามที่สร้างเหตุการณ์ขึ้นเส้นทางเริ่มต้น / เริ่มต้นของเหตุการณ์จะถูกกำหนดโดยการสร้างไฟล์ Event Dispatch chain. เป็นเส้นทางจากเวทีไปยังโหนดต้นทาง

ต่อไปนี้เป็นห่วงโซ่การจัดส่งเหตุการณ์สำหรับเหตุการณ์ที่สร้างขึ้นเมื่อเราคลิกที่ปุ่มเล่นในสถานการณ์ข้างต้น

เฟสจับเหตุการณ์

หลังจากการสร้างห่วงโซ่การจัดส่งเหตุการณ์โหนดรากของแอปพลิเคชันจะส่งเหตุการณ์ เหตุการณ์นี้เดินทางไปยังโหนดทั้งหมดในเครือข่ายการจัดส่ง (จากบนลงล่าง) หากโหนดใด ๆ เหล่านี้มีfilterลงทะเบียนสำหรับเหตุการณ์ที่สร้างขึ้นมันจะถูกดำเนินการ หากไม่มีโหนดใดในโซ่การจัดส่งที่มีตัวกรองสำหรับเหตุการณ์ที่สร้างขึ้นดังนั้นโหนดเป้าหมายจะถูกส่งผ่านไปยังโหนดเป้าหมายและในที่สุดโหนดเป้าหมายจะประมวลผลเหตุการณ์

อีเว้นท์ฟองเฟส

ในช่วงที่มีฟองอากาศเหตุการณ์จะถูกเดินทางจากโหนดเป้าหมายไปยังโหนดระยะ (ล่างขึ้นบน) หากโหนดใด ๆ ในห่วงโซ่การจัดส่งเหตุการณ์มีhandlerลงทะเบียนสำหรับเหตุการณ์ที่สร้างขึ้นมันจะถูกดำเนินการ หากไม่มีโหนดใดที่มีตัวจัดการสำหรับจัดการเหตุการณ์เหตุการณ์นั้นจะไปถึงโหนดรูทและในที่สุดกระบวนการก็จะเสร็จสมบูรณ์

ตัวจัดการและตัวกรองเหตุการณ์

ตัวกรองเหตุการณ์และตัวจัดการคือตัวกรองที่มีตรรกะของแอปพลิเคชันในการประมวลผลเหตุการณ์ โหนดสามารถลงทะเบียนกับตัวจัดการ / ตัวกรองมากกว่าหนึ่งตัว ในกรณีของโหนดหลัก - ลูกคุณสามารถจัดเตรียมตัวกรอง / ตัวจัดการทั่วไปให้กับผู้ปกครองซึ่งประมวลผลเป็นค่าเริ่มต้นสำหรับโหนดลูกทั้งหมด

ดังที่ได้กล่าวไว้ข้างต้นในระหว่างเหตุการณ์การประมวลผลเป็นตัวกรองที่ดำเนินการและในช่วงที่เกิดฟองตัวจัดการจะดำเนินการ ตัวจัดการและตัวกรองทั้งหมดใช้อินเทอร์เฟซEventHandler ของแพ็คเกจ javafx.event.

การเพิ่มและการลบตัวกรองเหตุการณ์

ในการเพิ่มตัวกรองเหตุการณ์ให้กับโหนดคุณต้องลงทะเบียนตัวกรองนี้โดยใช้วิธีการ addEventFilter() ของ Node ชั้นเรียน

//Creating the mouse event handler 
EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() { 
   @Override 
   public void handle(MouseEvent e) { 
      System.out.println("Hello World"); 
      circle.setFill(Color.DARKSLATEBLUE);  
   } 
};   
//Adding event Filter 
Circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);

ในทำนองเดียวกันคุณสามารถลบตัวกรองโดยใช้วิธี removeEventFilter () ดังที่แสดงด้านล่าง -

circle.removeEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);

ตัวอย่างการจัดการเหตุการณ์

ต่อไปนี้เป็นตัวอย่างที่สาธิตการจัดการเหตุการณ์ใน JavaFX โดยใช้ตัวกรองเหตุการณ์ บันทึกรหัสนี้ในไฟล์ที่มีชื่อEventFiltersExample.java.

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.event.EventHandler;
 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.input.MouseEvent; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 

import javafx.scene.text.Font; 
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text; 
import javafx.stage.Stage; 
         
public class EventFiltersExample 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(25.0f); 
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20);      
       
      //Setting the text 
      Text text = new Text("Click on the circle to change its color"); 
      
      //Setting the font of the text 
      text.setFont(Font.font(null, FontWeight.BOLD, 15));     
      
      //Setting the color of the text 
      text.setFill(Color.CRIMSON); 
  
      //setting the position of the text 
      text.setX(150); 
      text.setY(50); 
       
      //Creating the mouse event handler 
      EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() { 
         @Override 
         public void handle(MouseEvent e) { 
            System.out.println("Hello World"); 
            circle.setFill(Color.DARKSLATEBLUE);
         } 
      };  
      //Registering the event filter 
      circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);   
       
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
       
      //Setting the fill color to the scene 
      scene.setFill(Color.LAVENDER);  
      
      //Setting title to the Stage 
      stage.setTitle("Event Filters 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 EventFiltersExample.java 
java EventFiltersExample

ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ดังที่แสดงด้านล่าง

การเพิ่มและการลบตัวจัดการเหตุการณ์

ในการเพิ่มตัวจัดการเหตุการณ์ไปยังโหนดคุณต้องลงทะเบียนตัวจัดการนี้โดยใช้วิธีการ addEventHandler() ของ Node คลาสดังที่แสดงด้านล่าง

//Creating the mouse event handler 
EventHandler<javafx.scene.input.MouseEvent> eventHandler = 
   new EventHandler<javafx.scene.input.MouseEvent>() { 
   
   @Override 
   public void handle(javafx.scene.input.MouseEvent e) { 
      System.out.println("Hello World"); 
      circle.setFill(Color.DARKSLATEBLUE);             
   } 
};    
//Adding the event handler 
circle.addEventHandler(javafx.scene.input.MouseEvent.MOUSE_CLICKED, eventHandler);

ในทำนองเดียวกันคุณสามารถลบตัวจัดการเหตุการณ์โดยใช้เมธอด removeEventHandler () ดังที่แสดงด้านล่าง -

circle.removeEventHandler(MouseEvent.MOUSE_CLICKED, eventHandler);

ตัวอย่าง

โปรแกรมต่อไปนี้เป็นตัวอย่างที่สาธิตการจัดการเหตุการณ์ใน JavaFX โดยใช้ตัวจัดการเหตุการณ์

บันทึกรหัสนี้ในไฟล์ที่มีชื่อ EventHandlersExample.java.

import javafx.animation.RotateTransition; 
import javafx.application.Application; 
import javafx.event.EventHandler; 

import javafx.scene.Group; 
import javafx.scene.PerspectiveCamera; 
import javafx.scene.Scene; 
import javafx.scene.control.TextField; 
import javafx.scene.input.KeyEvent; 
import javafx.scene.paint.Color; 
import javafx.scene.paint.PhongMaterial;
 
import javafx.scene.shape.Box; 
import javafx.scene.text.Font; 
import javafx.scene.text.FontWeight; 
import javafx.scene.text.Text;  
import javafx.scene.transform.Rotate; 
import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class EventHandlersExample extends Application { 
   
   @Override 
   public void start(Stage stage) {
      //Drawing a Box 
      Box box = new Box(); 
      
      //Setting the properties of the Box 
      box.setWidth(150.0); 
      box.setHeight(150.0);   
      box.setDepth(100.0); 
       
      //Setting the position of the box 
      box.setTranslateX(350);  
      box.setTranslateY(150); 
      box.setTranslateZ(50); 
       
      //Setting the text 
      Text text = new Text("Type any letter to rotate the box, 
         and click on the box to stop the rotation"); 
      
      //Setting the font of the text 
      text.setFont(Font.font(null, FontWeight.BOLD, 15));     
      
      //Setting the color of the text 
      text.setFill(Color.CRIMSON); 
      
      //setting the position of the text 
      text.setX(20); 
      text.setY(50); 
       
      //Setting the material of the box 
      PhongMaterial material = new PhongMaterial();  
      material.setDiffuseColor(Color.DARKSLATEBLUE);  
      
      //Setting the diffuse color material to box 
      box.setMaterial(material);       
       
      //Setting the rotation animation to the box    
      RotateTransition rotateTransition = new RotateTransition(); 
      
      //Setting the duration for the transition 
      rotateTransition.setDuration(Duration.millis(1000)); 
      
      //Setting the node for the transition 
      rotateTransition.setNode(box);       
      
      //Setting the axis of the rotation 
      rotateTransition.setAxis(Rotate.Y_AXIS); 
      
      //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);  
      
      //Creating a text filed 
      TextField textField = new TextField();   
      
      //Setting the position of the text field 
      textField.setLayoutX(50); 
      textField.setLayoutY(100); 
       
      //Handling the key typed event 
      EventHandler<KeyEvent> eventHandlerTextField = new EventHandler<KeyEvent>() { 
         @Override 
         public void handle(KeyEvent event) { 
            //Playing the animation 
            rotateTransition.play(); 
         }           
      };              
      //Adding an event handler to the text feld 
      textField.addEventHandler(KeyEvent.KEY_TYPED, eventHandlerTextField); 
       
      //Handling the mouse clicked event(on box) 
      EventHandler<javafx.scene.input.MouseEvent> eventHandlerBox = 
         new EventHandler<javafx.scene.input.MouseEvent>() { 
         
         @Override 
         public void handle(javafx.scene.input.MouseEvent e) { 
            rotateTransition.stop();  
         } 
      }; 
      //Adding the event handler to the box  
      box.addEventHandler(javafx.scene.input.MouseEvent.MOUSE_CLICKED, eventHandlerBox);
       
      //Creating a Group object
      Group root = new Group(box, textField, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);      
      
      //Setting camera 
      PerspectiveCamera camera = new PerspectiveCamera(false); 
      camera.setTranslateX(0); 
      camera.setTranslateY(0); 
      camera.setTranslateZ(0); 
      scene.setCamera(camera);  
      
      //Setting title to the Stage 
      stage.setTitle("Event Handlers 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 EventHandlersExample.java 
java EventHandlersExample

ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ที่แสดงฟิลด์ข้อความและกล่อง 3D ดังที่แสดงด้านล่าง -

ที่นี่ถ้าคุณพิมพ์ตัวอักษรในช่องข้อความกล่อง 3D จะเริ่มหมุนตามแกน x หากคุณคลิกที่กล่องอีกครั้งการหมุนจะหยุดลง

การใช้วิธีอำนวยความสะดวกในการจัดการเหตุการณ์

บางคลาสใน JavaFX กำหนดคุณสมบัติตัวจัดการเหตุการณ์ ด้วยการตั้งค่าเป็นคุณสมบัติเหล่านี้โดยใช้วิธีการตั้งค่าตามลำดับคุณสามารถลงทะเบียนกับตัวจัดการเหตุการณ์ได้ วิธีการเหล่านี้เรียกว่าวิธีอำนวยความสะดวก

วิธีการเหล่านี้ส่วนใหญ่มีอยู่ในคลาสเช่น Node, Scene, Window เป็นต้นและสามารถใช้ได้กับคลาสย่อยทั้งหมด

ตัวอย่างเช่นในการเพิ่มตัวฟังเหตุการณ์ของเมาส์ลงในปุ่มคุณสามารถใช้วิธีอำนวยความสะดวก setOnMouseClicked() ดังแสดงด้านล่าง

playButton.setOnMouseClicked((new EventHandler<MouseEvent>() { 
   public void handle(MouseEvent event) { 
      System.out.println("Hello World"); 
      pathTransition.play(); 
   } 
}));

ตัวอย่าง

โปรแกรมต่อไปนี้เป็นตัวอย่างที่สาธิตการจัดการเหตุการณ์ใน JavaFX โดยใช้วิธีอำนวยความสะดวก

บันทึกรหัสนี้ในไฟล์ที่มีชื่อ ConvinienceMethodsExample.java.

import javafx.animation.PathTransition; 
import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.event.EventHandler; 

import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.input.MouseEvent; 
import javafx.scene.paint.Color; 

import javafx.scene.shape.Circle; 
import javafx.scene.shape.LineTo; 
import javafx.scene.shape.MoveTo; 
import javafx.scene.shape.Path; 
import javafx.stage.Stage; 
import javafx.util.Duration; 
         
public class ConvinienceMethodsExample 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(25.0f);  
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20);      
       
      //Creating a Path 
      Path path = new Path(); 
      
      //Moving to the staring point 
      MoveTo moveTo = new MoveTo(208, 71);               
      
      //Creating 1st line 
      LineTo line1 = new LineTo(421, 161);        
      
      //Creating 2nd line 
      LineTo line2 = new LineTo(226,232); 
      
      //Creating 3rd line 
      LineTo line3 = new LineTo(332,52);        
      
      //Creating 4th line 
      LineTo line4 = new LineTo(369, 250);        
      
      //Creating 5th line 
      LineTo line5 = new LineTo(208, 71);       
      
      //Adding all the elements to the path 
      path.getElements().add(moveTo); 
      path.getElements().addAll(line1, line2, line3, line4, line5);     
      
      //Creating the 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(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(50); 
      
      //Setting auto reverse value to true 
      pathTransition.setAutoReverse(false);
      
      //Creating play button 
      Button playButton = new Button("Play"); 
      playButton.setLayoutX(300); 
      playButton.setLayoutY(250); 
       
      circle.setOnMouseClicked (new EventHandler<javafx.scene.input.MouseEvent>() { 
         @Override 
         public void handle(javafx.scene.input.MouseEvent e) { 
            System.out.println("Hello World"); 
            circle.setFill(Color.DARKSLATEBLUE);             
         } 
      });   
      playButton.setOnMouseClicked((new EventHandler<MouseEvent>() { 
         public void handle(MouseEvent event) { 
            System.out.println("Hello World");  
            pathTransition.play(); 
         } 
      })); 
       
      //Creating stop button 
      Button stopButton = new Button("stop"); 
      stopButton.setLayoutX(250); 
      stopButton.setLayoutY(250); 
      
      stopButton.setOnMouseClicked((new EventHandler<MouseEvent>() { 
         public void handle(MouseEvent event) { 
            System.out.println("Hello World"); 
            pathTransition.stop(); 
         } 
      }));
      //Creating a Group object  
      Group root = new Group(circle, playButton, stopButton); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
      scene.setFill(Color.LAVENDER);  
      
      //Setting title to the Stage 
      stage.setTitle("Convenience Methods 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 ConvinienceMethodsExample.java 
java ConvinienceMethodsExample

ในการดำเนินการโปรแกรมด้านบนจะสร้างหน้าต่าง JavaFX ดังที่แสดงด้านล่าง คลิกที่ปุ่มเล่นเพื่อเริ่มภาพเคลื่อนไหวและคลิกที่ปุ่มหยุดเพื่อหยุดภาพเคลื่อนไหว