Animation API | Office.in.th

Animation API: สร้าง Animations ที่ซับซ้อนอย่างมีประสิทธิภาพ

ในบทความที่แล้ว เราได้เรียนรู้เกี่ยวกับ Performance API ซึ่งช่วยให้เราวัดและวิเคราะห์ประสิทธิภาพของเว็บแอปพลิเคชันได้ ในบทความนี้ เราจะมาทำความรู้จักกับ Animation API ซึ่งเป็นเครื่องมือที่ช่วยให้เราสร้าง animations ที่ซับซ้อนและมีประสิทธิภาพสูงในเว็บแอปพลิเคชันของเรา

Animation API เป็นส่วนหนึ่งของ Web Animations API (WAAPI) ซึ่งเป็น standard ที่กำหนดวิธีการสร้างและควบคุม animations ในเว็บเบราว์เซอร์ โดยมีเป้าหมายเพื่อให้การสร้าง animations เป็นไปอย่างราบรื่น มีประสิทธิภาพ และสามารถควบคุมได้ง่ายกว่าการใช้ JavaScript ร่วมกับ CSS transitions/animations แบบเดิมๆ

Animation Object: หัวใจของการ Animation

หัวใจหลักของ Animation API คือ Animation Object ซึ่งเป็นตัวแทนของ animation แต่ละตัว Animation Object ประกอบด้วยข้อมูลสำคัญ 3 ส่วนหลัก:

Element: Element HTML ที่เราต้องการ animate
Keyframe Effects: ชุดของ keyframes ที่กำหนดการเปลี่ยนแปลงของ properties ต่างๆ ของ element เมื่อเวลาผ่านไป
Timeline: Timeline ที่กำหนดว่า animation จะเล่นอย่างไร เช่น ระยะเวลาในการเล่น (duration), การวนซ้ำ (iterations), และการหน่วงเวลาเริ่มต้น (delay)

เราสามารถสร้าง Animation Object ได้โดยใช้เมธอด element.animate():

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

const animation = element.animate(
  [
    // Keyframes
    { transform: 'translateX(0px)' },
    { transform: 'translateX(100px)' }
  ],
  {
    // Timing options
    duration: 1000,
    iterations: Infinity,
    direction: 'alternate'
  }
);

โค้ดนี้จะสร้าง animation ที่เลื่อน element ที่มี ID เป็น 'myElement' ไปทางขวา 100 พิกเซล และเลื่อนกลับมา โดยจะทำซ้ำไปเรื่อยๆ และสลับทิศทางการเคลื่อนที่

เหตุผลเชิงออกแบบ: การใช้ Animation Object ช่วยให้เราสามารถจัดการ animation ได้อย่างเป็นระบบมากขึ้น สามารถหยุด (animation.pause()), เล่นต่อ (animation.play()), เปลี่ยนความเร็ว (animation.playbackRate), และยกเลิก (animation.cancel()) animation ได้อย่างง่ายดาย

Keyframe Effects: กำหนดการเปลี่ยนแปลงของ Properties

Keyframe Effects คือชุดของ keyframes ที่กำหนดค่าของ CSS properties ต่างๆ ณ เวลาต่างๆ Keyframes แต่ละตัวจะประกอบด้วย property และ value ที่ต้องการ เช่น { transform: 'translateX(0px)' }

เราสามารถกำหนด keyframes ได้หลายรูปแบบ:

Array of Keyframes: ตามตัวอย่างด้านบน เป็นวิธีที่ง่ายที่สุดในการกำหนด keyframes โดยแต่ละ element ใน array คือ keyframe หนึ่ง
Keyframe Object: เราสามารถใช้ object ที่มี property เป็น CSS property และ value เป็น array ของ values ที่สอดคล้องกันได้:

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

const animation = element.animate(
  {
    transform: ['translateX(0px)', 'translateX(100px)'],
    opacity: [1, 0.5, 1] // เปลี่ยน opacity ด้วย
  },
  {
    duration: 2000,
    iterations: Infinity,
    direction: 'alternate'
  }
);

ในตัวอย่างนี้ เราได้กำหนดให้ element มีการเปลี่ยนแปลงทั้ง `transform` และ `opacity` พร้อมกัน

เหตุผลเชิงออกแบบ: การใช้ Keyframe Effects ช่วยให้เราสามารถสร้าง animations ที่ซับซ้อนและมีการเปลี่ยนแปลงหลาย properties พร้อมกันได้อย่างง่ายดาย การแยก keyframes ออกจาก timeline ทำให้เราสามารถ reuse keyframes กับ timeline ต่างๆ ได้

Timeline: ควบคุมการเล่น Animation

Timeline เป็นส่วนที่กำหนดวิธีการเล่น animation ประกอบด้วย options ต่างๆ เช่น:

duration: ระยะเวลาในการเล่น animation หนึ่งรอบ (หน่วยเป็น milliseconds)
iterations: จำนวนครั้งที่ animation จะเล่น (Infinity สำหรับเล่นไม่สิ้นสุด)
delay: ระยะเวลาหน่วงก่อนที่ animation จะเริ่มเล่น (หน่วยเป็น milliseconds)
easing: ฟังก์ชันที่กำหนดความเร็วในการเปลี่ยนแปลงของ animation (เช่น 'linear', 'ease-in', 'ease-out', 'ease-in-out', หรือ custom cubic-bezier function)
direction: ทิศทางการเล่น animation ('normal', 'reverse', 'alternate', 'alternate-reverse')
fill: กำหนดว่า element จะคงค่าของ property สุดท้ายไว้หลังจาก animation จบหรือไม่ ('none', 'forwards', 'backwards', 'both')

ตัวอย่างการใช้งาน easing function:

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

const animation = element.animate(
  [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(100px)' }
  ],
  {
    duration: 1000,
    iterations: Infinity,
    direction: 'alternate',
    easing: 'ease-in-out' // ใช้ easing function
  }
);

เหตุผลเชิงออกแบบ: Timeline ช่วยให้เราควบคุมการเล่น animation ได้อย่างละเอียด สามารถปรับแต่งความเร็ว, ทิศทาง, และการวนซ้ำของ animation ได้ตามต้องการ การใช้ easing functions ช่วยให้ animation ดูเป็นธรรมชาติและน่าสนใจยิ่งขึ้น

การใช้งาน Animation API ร่วมกับ JavaScript

Animation API ให้ methods และ properties ต่างๆ ที่ช่วยให้เราควบคุม animation ได้จาก JavaScript เช่น:

animation.play(): เริ่มเล่น animation
animation.pause(): หยุด animation ชั่วคราว
animation.reverse(): เล่น animation ย้อนกลับ
animation.cancel(): ยกเลิก animation และคืนค่า properties ของ element กลับสู่ค่าเริ่มต้น
animation.finish(): จบ animation ทันที
animation.currentTime: รับหรือกำหนดเวลาปัจจุบันของ animation (หน่วยเป็น milliseconds)
animation.playbackRate: รับหรือกำหนดความเร็วในการเล่น animation (1 คือความเร็วปกติ, 0.5 คือครึ่งความเร็ว, 2 คือสองเท่าของความเร็ว)
animation.finished: Promise ที่ resolve เมื่อ animation เล่นจบ

ตัวอย่างการควบคุม animation ด้วย JavaScript:

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

const animation = element.animate(
  [
    { transform: 'translateX(0px)' },
    { transform: 'translateX(100px)' }
  ],
  {
    duration: 1000,
    iterations: Infinity,
    direction: 'alternate'
  }
);

const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');

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

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

แนวปฏิบัติที่ดี:

ใช้ Animation API แทน CSS animations/transitions เมื่อต้องการควบคุม animation จาก JavaScript: Animation API ให้ methods และ properties ที่ช่วยให้เราควบคุม animation ได้อย่างละเอียดและยืดหยุ่นกว่า
หลีกเลี่ยงการ animate properties ที่ทำให้เกิด layout thrashing: การ animate properties เช่น width, height, top, left อาจทำให้เบราว์เซอร์ต้องคำนวณ layout ใหม่ซ้ำๆ ซึ่งส่งผลเสียต่อประสิทธิภาพ ควรใช้ transform และ opacity แทน
ใช้ easing functions ที่เหมาะสม: การเลือก easing function ที่เหมาะสมจะช่วยให้ animation ดูเป็นธรรมชาติและน่าสนใจยิ่งขึ้น
ทดสอบ animation บนอุปกรณ์ต่างๆ: ตรวจสอบให้แน่ใจว่า animation ทำงานได้อย่างราบรื่นบนอุปกรณ์และเบราว์เซอร์ต่างๆ

สรุป

Animation API เป็นเครื่องมือที่มีประสิทธิภาพในการสร้าง animations ที่ซับซ้อนและมีประสิทธิภาพสูงในเว็บแอปพลิเคชัน การใช้ Animation Object, Keyframe Effects, และ Timeline ช่วยให้เราสามารถจัดการ animation ได้อย่างเป็นระบบและควบคุมได้อย่างละเอียด ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับ Canvas API ซึ่งเป็นเครื่องมือที่ช่วยให้เราวาดกราฟิกแบบ 2D บนเว็บเบราว์เซอร์ได้