ความแตกต่างระหว่าง Manual และ Automated Animation ใน JavaScript

Manual Animation (แอนิเมชันแบบแมนูอัล)

การเคลื่อนไหวที่ควบคุมโดยผู้ใช้หรือ Event โดยตรง ไม่มีการทำงานอัตโนมัติ

โครงสร้าง

• ใช้ getElementById() ดึง DOM Element เก็บใน Global Variable
• ฟังก์ชัน init() เริ่มต้น ตั้งค่า Position/Style
• เรียก init() ตอน window.onload
• ฟังก์ชัน moveRight() เพิ่ม left Property ทีละ 10px ต่อการคลิก

ตัวอย่าง

<html>
<head>
  <title>JavaScript Manual Animation</title>
  <script>
    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>

Automated Animation (แอนิเมชันแบบอัตโนมัติ)

ใช้ setTimeout() หรือ setInterval() ทำให้เคลื่อนไหวต่อเนื่องโดยอัตโนมัติ

เพิ่มเติมจาก Manual:

• moveRight() เรียก setTimeout(moveRight, 20) วนซ้ำทุก 20ms
• เพิ่มฟังก์ชัน stop() ใช้ clearTimeout() หยุด Animation และ Reset ตำแหน่ง

ตัวอย่าง

<html>
<head>
  <title>JavaScript Automated Animation</title>
  <script>
    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); // เรียกตัวเองทุก 20ms
    }
    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>

ตารางเปรียบเทียบ

แนวทางสมัยใหม่: requestAnimationFrame

แทน setTimeout/setInterval ควรใช้ requestAnimationFrame() ซึ่ง:

• Sync กับ Monitor Refresh Rate (60fps ทั่วไป)
• ประหยัด Battery (หยุดทำงานตอน Tab ใน Background)
• Smooth กว่า ไม่มี Jank

let animationId;
let position = 0;

function animate() {
  position += 2;
  imgObj.style.left = position + 'px';
  if (position < 500) {
    animationId = requestAnimationFrame(animate);
  }
}

function start() {
  if (!animationId) animate();
}

function stop() {
  cancelAnimationFrame(animationId);
  animationId = null;
  position = 0;
  imgObj.style.left = '0px';
}

CSS Animation/Transition (แนะนำมากที่สุด)

สำหรับ Animation 単純 ให้ใช้ CSS:

.box {
  transition: left 0.5s ease;
  position: relative;
}
.box.move {
  left: 300px;
}

// JS แค่ Toggle Class
element.classList.toggle('move');

สรุป

Manual: User ควบคุมทุก Step | Automated: setTimeout/setInterval วนซ้ำอัตโนมัติ | สมัยใหม่: ใช้ requestAnimationFrame หรือ CSS Animation/Transition แทน จะ Smooth, Performant, Battery-friendly กว่า