JavaScript - ภาพเคลื่อนไหว

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

Fireworks
เอฟเฟกต์จาง
Roll-in หรือ Roll-out
Page-in หรือ Page-out
การเคลื่อนไหวของวัตถุ

คุณอาจจะสนใจในการมีอยู่ JavaScript ห้องสมุดภาพเคลื่อนไหวตาม: Script.Aculo.us

บทช่วยสอนนี้ให้ความเข้าใจพื้นฐานเกี่ยวกับวิธีใช้ JavaScript เพื่อสร้างภาพเคลื่อนไหว

JavaScript สามารถใช้เพื่อย้ายองค์ประกอบ DOM จำนวนหนึ่ง (<img />, <div> หรือองค์ประกอบ HTML อื่น ๆ ) ไปรอบ ๆ หน้าตามรูปแบบบางอย่างที่กำหนดโดยสมการเชิงตรรกะหรือฟังก์ชัน

JavaScript มีสองฟังก์ชันต่อไปนี้ที่จะใช้บ่อยในโปรแกรมแอนิเมชั่น

setTimeout( function, duration) - ฟังก์ชันนี้เรียก function หลังจาก duration มิลลิวินาทีต่อจากนี้
setInterval(function, duration) - ฟังก์ชันนี้เรียก function ทุกครั้ง duration มิลลิวินาที
clearTimeout(setTimeout_variable) - ฟังก์ชั่นนี้เรียกใช้ล้างตัวจับเวลาใด ๆ ที่กำหนดโดยฟังก์ชัน setTimeout ()

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

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

ภาพเคลื่อนไหวด้วยตนเอง

ลองใช้แอนิเมชั่นอย่างง่ายหนึ่งภาพโดยใช้คุณสมบัติวัตถุ DOM และฟังก์ชัน JavaScript ดังนี้ รายการต่อไปนี้ประกอบด้วยวิธี DOM ที่แตกต่างกัน

เรากำลังใช้ฟังก์ชัน JavaScript getElementById() เพื่อรับวัตถุ DOM จากนั้นกำหนดให้กับตัวแปรส่วนกลาง imgObj.
เราได้กำหนดฟังก์ชันการเริ่มต้น init() เพื่อเริ่มต้น imgObj ที่เราตั้งไว้ position และ left คุณลักษณะ.
เรากำลังเรียกใช้ฟังก์ชันการเริ่มต้นในเวลาที่หน้าต่างโหลด
สุดท้ายเรากำลังโทร moveRight()ฟังก์ชันเพิ่มระยะทางซ้าย 10 พิกเซล คุณสามารถตั้งค่าเป็นค่าลบเพื่อย้ายไปทางด้านซ้าย

ตัวอย่าง

ลองดูตัวอย่างต่อไปนี้

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </form>      
   </body>
</html>

เอาต์พุต

ภาพเคลื่อนไหวอัตโนมัติ

ในตัวอย่างข้างต้นเราได้เห็นว่ารูปภาพเลื่อนไปทางขวาอย่างไรในทุกๆคลิก เราสามารถทำให้กระบวนการนี้เป็นไปโดยอัตโนมัติโดยใช้ฟังก์ชัน JavaScriptsetTimeout() ดังต่อไปนี้ -

ที่นี่เราได้เพิ่มวิธีการมากขึ้น มาดูกันว่ามีอะไรใหม่บ้าง -

moveRight() ฟังก์ชันกำลังโทร setTimeout()ฟังก์ชั่นการตั้งตำแหน่งของimgObj
เราได้เพิ่มฟังก์ชันใหม่ stop() เพื่อล้างตัวจับเวลาที่ตั้งไว้ setTimeout() ฟังก์ชันและตั้งค่าวัตถุที่ตำแหน่งเริ่มต้น

ตัวอย่าง

ลองใช้โค้ดตัวอย่างต่อไปนี้

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            var animate ;
            
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative'; 
               imgObj.style.left = '0px'; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20);    // call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px'; 
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type = "button" value = "Stop" onclick = "stop();" />
      </form>      
   </body>
</html>

วางเมาส์เหนือเหตุการณ์

นี่คือตัวอย่างง่ายๆที่แสดงการวางเมาส์เหนือภาพด้วยเหตุการณ์เมาส์

มาดูกันว่าเราใช้อะไรในตัวอย่างต่อไปนี้ -

ในขณะโหลดหน้านี้คำสั่ง 'if' จะตรวจสอบการมีอยู่ของวัตถุรูปภาพ หากออบเจ็กต์รูปภาพไม่พร้อมใช้งานบล็อกนี้จะไม่ทำงาน
Image() ตัวสร้างสร้างและโหลดออบเจ็กต์รูปภาพใหม่ที่เรียกว่า image1.
คุณสมบัติ src ถูกกำหนดชื่อของไฟล์รูปภาพภายนอกที่เรียกว่า /images/html.gif
ในทำนองเดียวกันเราได้สร้าง image2 วัตถุและกำหนด /images/http.gif ในวัตถุนี้
# (เครื่องหมายแฮช) ปิดใช้งานลิงก์เพื่อให้เบราว์เซอร์ไม่พยายามไปที่ URL เมื่อคลิก ลิงค์นี้เป็นภาพ
onMouseOver ตัวจัดการเหตุการณ์จะถูกทริกเกอร์เมื่อเมาส์ของผู้ใช้เลื่อนไปที่ลิงก์และไฟล์ onMouseOut ตัวจัดการเหตุการณ์จะถูกทริกเกอร์เมื่อเมาส์ของผู้ใช้เคลื่อนออกจากลิงก์ (รูปภาพ)
เมื่อเมาส์เลื่อนไปที่รูปภาพรูปภาพ HTTP จะเปลี่ยนจากรูปภาพแรกเป็นรูปภาพที่สอง เมื่อเลื่อนเมาส์ออกจากภาพภาพต้นฉบับจะปรากฏขึ้น
เมื่อเลื่อนเมาส์ออกจากลิงก์ html.gif รูปภาพเริ่มต้นจะปรากฏขึ้นอีกครั้งบนหน้าจอ

<html>
   
   <head>
      <title>Rollover with a Mouse Events</title>
      
      <script type = "text/javascript">
         <!--
            if(document.images) {
               var image1 = new Image();     // Preload an image
               image1.src = "/images/html.gif";
               var image2 = new Image();     // Preload second image
               image2.src = "/images/http.gif";
            }
         //-->
      </script>
   </head>
   
   <body>
      <p>Move your mouse over the image to see the result</p>
      
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"
         onMouseOut = "document.myImage.src = image1.src;">
         <img name = "myImage" src = "/images/html.gif" />
      </a>
   </body>
</html>