การสร้าง Complex Animation ด้วย CSS Animations และ JavaScrip

การสร้าง Complex Animation ด้วย CSS Animations และ JavaScript

ในบทเรียนก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับการใช้งาน CSS Logical Properties and Values เพื่อสร้าง Layout ที่รองรับภาษา RTL ได้อย่างยืดหยุ่น บทนี้เราจะมาต่อยอดความสามารถของ CSS ด้วยการสร้าง Animation ที่ซับซ้อนขึ้น โดยใช้ CSS Animations ร่วมกับ JavaScript

CSS Animations นั้นทรงพลังและใช้งานง่าย แต่ในบางสถานการณ์ เราอาจต้องการควบคุม Animation ให้ละเอียดกว่าเดิม หรือสร้าง Animation ที่มีการตอบสนองต่อการกระทำของผู้ใช้ (User Interaction) ซึ่ง JavaScript จะเข้ามาเติมเต็มส่วนนี้

ทำไมต้องใช้ JavaScript ร่วมกับ CSS Animations?

CSS Animations เหมาะสำหรับ Animation ที่เรียบง่ายและทำงานต่อเนื่อง แต่เมื่อต้องการ:

ควบคุม Animation แบบ Dynamic: เปลี่ยนแปลง Animation ตามข้อมูลที่ได้รับจากผู้ใช้ หรือจาก API
Trigger Animation จาก Event: เริ่ม Animation เมื่อผู้ใช้คลิกปุ่ม, เลื่อนหน้าจอ หรือ Hover บน Element
สร้าง Sequence Animation ที่ซับซ้อน: กำหนดลำดับการเล่นของ Animation หลายๆ ตัว
ปรับแต่ง Timing Function: สร้าง Timing Function ที่ CSS ไม่รองรับ

JavaScript จะช่วยให้เราควบคุม CSS Animations ได้อย่างละเอียดและสร้าง Animation ที่มีความ Interactive มากขึ้น

การควบคุม Animation ด้วย JavaScript

เราสามารถเข้าถึงและควบคุม CSS Animations ผ่าน JavaScript โดยใช้ animation property ของ Element

1. การตรวจสอบ Animation

เราสามารถตรวจสอบ Animation ที่ถูกกำหนดให้กับ Element ได้ดังนี้:

const element = document.getElementById('myElement');
const animations = element.getAnimations();

if (animations.length > 0) {
  animations.forEach(animation => {
    console.log(animation.animationName); // ชื่อของ Animation
    console.log(animation.playState);   // สถานะการเล่น (running, paused, finished)
    console.log(animation.currentTime);   // เวลาปัจจุบันของ Animation
  });
}

2. การควบคุมการเล่น Animation

เราสามารถควบคุมการเล่น Animation ได้โดยใช้ methods ดังนี้:

play(): เริ่มเล่น Animation
pause(): หยุด Animation ชั่วคราว
reverse(): เล่น Animation ย้อนกลับ
cancel(): ยกเลิก Animation

ตัวอย่าง:

const element = document.getElementById('myElement');
const animation = element.getAnimations()[0]; // สมมติว่ามี Animation ตัวเดียว

document.getElementById('playButton').addEventListener('click', () => {
  animation.play();
});

document.getElementById('pauseButton').addEventListener('click', () => {
  animation.pause();
});

3. การเปลี่ยนแปลง Animation Properties

เราสามารถเปลี่ยนแปลง properties ของ Animation ได้โดยตรง เช่น playbackRate (ความเร็วในการเล่น) หรือ currentTime (เวลาปัจจุบัน)

const element = document.getElementById('myElement');
const animation = element.getAnimations()[0];

document.getElementById('speedUpButton').addEventListener('click', () => {
  animation.playbackRate += 0.5;
});

document.getElementById('slowDownButton').addEventListener('click', () => {
  animation.playbackRate -= 0.5;
});

document.getElementById('resetButton').addEventListener('click', () => {
  animation.currentTime = 0; // รีเซ็ต Animation ไปที่จุดเริ่มต้น
});

การใช้ requestAnimationFrame

เมื่อต้องการสร้าง Animation ที่ราบรื่นและมีประสิทธิภาพ ควรใช้ requestAnimationFrame แทนการใช้ setInterval หรือ setTimeout

requestAnimationFrame จะบอกให้ Browser เรียกใช้ฟังก์ชันที่เรากำหนดก่อนที่จะ repaint หน้าจอ ซึ่งจะช่วยลดปัญหาการกระตุกและเพิ่มประสิทธิภาพของ Animation

ตัวอย่าง:

const element = document.getElementById('myElement');
let start = null;

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  // เปลี่ยนแปลง properties ของ Element ตาม progress
  element.style.transform = `translateX(${Math.sin(progress / 1000) * 100}px)`;

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

ในตัวอย่างนี้ ฟังก์ชัน animate จะถูกเรียกใช้ซ้ำๆ โดย requestAnimationFrame เพื่อปรับเปลี่ยน transform property ของ Element อย่างต่อเนื่อง ทำให้เกิด Animation การเคลื่อนที่แบบ Sine Wave

เหตุผลเชิงออกแบบ: การใช้ requestAnimationFrame ช่วยให้ Browser สามารถ Optimize การ repaint หน้าจอได้ดีกว่าการใช้ setInterval หรือ setTimeout ซึ่งอาจทำให้เกิด Frame Drop และ Animation ไม่ราบรื่น

ตัวอย่างการใช้งาน: สร้าง Animation แบบ Sequence

สมมติว่าเราต้องการสร้าง Animation ที่ประกอบด้วย 3 ขั้นตอน:

Fade In
Move to the Right
Fade Out

เราสามารถทำได้โดยใช้ CSS Animations ร่วมกับ JavaScript ดังนี้:

<div id="myElement" class="animated-element">Hello World!</div>

<button id="startAnimationButton">Start Animation</button>

.animated-element {
  opacity: 0;
  position: relative;
  left: 0;
  transition: opacity 1s, left 1s; /* ใช้ transition เพื่อความง่ายในตัวอย่างนี้ */
}

.animated-element.fade-in {
  opacity: 1;
}

.animated-element.move-right {
  left: 200px;
}

.animated-element.fade-out {
  opacity: 0;
}

const element = document.getElementById('myElement');
const startButton = document.getElementById('startAnimationButton');

startButton.addEventListener('click', () => {
  // 1. Fade In
  element.classList.add('fade-in');

  // 2. Move to the Right หลังจาก Fade In เสร็จ
  setTimeout(() => {
    element.classList.remove('fade-in');
    element.classList.add('move-right');

    // 3. Fade Out หลังจาก Move to the Right เสร็จ
    setTimeout(() => {
      element.classList.remove('move-right');
      element.classList.add('fade-out');

      // รีเซ็ต Element หลังจาก Fade Out เสร็จ
      setTimeout(() => {
        element.classList.remove('fade-out');
        element.style.opacity = 0;
        element.style.left = 0;
      }, 1000); // ระยะเวลา Fade Out
    }, 1000); // ระยะเวลา Move to the Right
  }, 1000); // ระยะเวลา Fade In
});

ในตัวอย่างนี้ เราใช้ setTimeout เพื่อกำหนดลำดับการเล่นของ Animation แต่ละขั้นตอน การใช้ transition ใน CSS ทำให้เราสามารถสร้าง Animation Fade In/Out และ Move to the Right ได้อย่างง่ายดาย

ข้อควรระวัง: การใช้ setTimeout หลายๆ ชั้นอาจทำให้โค้ดอ่านยากและบำรุงรักษายาก ในสถานการณ์ที่ซับซ้อนกว่านี้ ควรพิจารณาใช้ Promise หรือ Async/Await เพื่อจัดการ Sequence Animation ให้เป็นระเบียบมากขึ้น

สรุป

ในบทนี้ เราได้เรียนรู้วิธีการสร้าง Complex Animation โดยใช้ CSS Animations ร่วมกับ JavaScript เราได้เห็นว่า JavaScript สามารถช่วยให้เราควบคุม Animation ได้อย่างละเอียดและสร้าง Animation ที่มีความ Interactive มากขึ้น นอกจากนี้ เรายังได้เรียนรู้เกี่ยวกับการใช้ requestAnimationFrame เพื่อสร้าง Animation ที่ราบรื่นและมีประสิทธิภาพ

ในบทต่อไป เราจะไปสำรวจ CSS Houdini ซึ่งเป็นชุดของ APIs ที่ช่วยให้เราสามารถขยายความสามารถของ CSS ได้อย่างไม่จำกัด