ภาพเคลื่อนไหว CSS เทียบกับ JavaScript

คุณสร้างภาพเคลื่อนไหวได้โดยใช้ CSS หรือ JavaScript คุณควรใช้สิ่งใดและเพราะเหตุใด

Paul Lewis

Sam Thorogood

การสร้างภาพเคลื่อนไหวบนเว็บทำได้ 2 วิธีหลักๆ ได้แก่ ด้วย CSS และด้วย JavaScript ตัวเลือกที่คุณเลือกจะขึ้นอยู่กับทรัพยากรอื่นๆ ของโปรเจ็กต์และประเภทเอฟเฟกต์ที่คุณต้องการ

สรุป

• ใช้ภาพเคลื่อนไหว CSS สำหรับการเปลี่ยน "แบบครั้งเดียว" ที่ง่ายขึ้น เช่น การสลับสถานะขององค์ประกอบ UI
• ใช้ภาพเคลื่อนไหว JavaScript เมื่อคุณต้องการใช้เอฟเฟกต์ขั้นสูง เช่น การเด้ง หยุด หยุดชั่วคราว กรอกลับ หรือช้าลง
• หากเลือกแสดงภาพเคลื่อนไหวด้วย JavaScript ให้ใช้ Web Animations API หรือเฟรมเวิร์กสมัยใหม่ที่คุณถนัด

ภาพเคลื่อนไหวพื้นฐานส่วนใหญ่สามารถสร้างด้วย CSS หรือ JavaScript แต่ความพยายามและเวลาจะแตกต่างกัน (ดูประสิทธิภาพของ CSS เทียบกับ JavaScript ด้วย) แต่ละแบบก็มีข้อดีและข้อเสีย แต่หลักเกณฑ์ที่ดีมีดังนี้

• ใช้ CSS เมื่อคุณมีสถานะที่เล็กกว่าและแยกต่างหากสำหรับองค์ประกอบ UI การเปลี่ยนและภาพเคลื่อนไหว CSS เหมาะอย่างยิ่งสําหรับการแสดงเมนูการนำทางด้านข้างหรือแสดงเคล็ดลับเครื่องมือ คุณอาจต้องใช้ JavaScript เพื่อควบคุมสถานะ แต่ภาพเคลื่อนไหวจะอยู่ใน CSS
• ใช้ JavaScript เมื่อคุณต้องการควบคุมภาพเคลื่อนไหวอย่างละเอียด Web Animations API เป็นแนวทางตามมาตรฐานที่ใช้ได้กับเบราว์เซอร์สมัยใหม่ส่วนใหญ่ในปัจจุบัน ซึ่งจะให้วัตถุจริง เหมาะสำหรับแอปพลิเคชันเชิงวัตถุที่ซับซ้อน นอกจากนี้ JavaScript ยังมีประโยชน์เมื่อคุณต้องการหยุด หยุดชั่วคราว ช้าลง หรือย้อนกลับภาพเคลื่อนไหวด้วย
• ใช้ requestAnimationFrame โดยตรงเมื่อคุณต้องการจัดระเบียบทั้งฉากด้วยตนเอง นี่เป็นแนวทางขั้นสูงของ JavaScript แต่อาจมีประโยชน์หากคุณกำลังสร้างเกมหรือวาดภาพในผืนผ้าใบ HTML

หรือหากคุณใช้เฟรมเวิร์ก JavaScript ที่มีฟังก์ชันการทำงานแบบเคลื่อนไหวอยู่แล้ว เช่น ผ่านเมธอด .animate() ของ jQuery หรือ TweenMax ของ GreenSock คุณอาจพบว่าการใช้เฟรมเวิร์กนั้นกับภาพเคลื่อนไหวจะสะดวกกว่า

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

ภาพเคลื่อนไหวด้วย CSS เป็นวิธีที่ง่ายที่สุดในการทำให้เนื้อหาเคลื่อนไหวบนหน้าจอ วิธีการนี้เรียกว่าการประกาศเนื่องจากคุณระบุสิ่งที่ต้องการให้เกิดขึ้น

ด้านล่างนี้คือ CSS บางส่วนที่ย้ายองค์ประกอบ 100px ทั้งในแกน X และ Y ซึ่งทำได้โดยใช้การเปลี่ยน CSS ที่ตั้งค่าให้ใช้เวลา 500ms เมื่อเพิ่มคลาส move ระบบจะเปลี่ยนค่า transform และการเปลี่ยนผ่านก็จะเริ่มขึ้น

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

ลองใช้

นอกจากระยะเวลาของทรานซิชันแล้ว ยังมีตัวเลือกการค่อยๆ เปลี่ยน ซึ่งก็คือลักษณะของภาพเคลื่อนไหว ดูข้อมูลเพิ่มเติมเกี่ยวกับการค่อยๆ เปลี่ยนได้ในคู่มือพื้นฐานของการค่อยๆ เปลี่ยน

หากคุณสร้างคลาส CSS แยกต่างหากเพื่อจัดการภาพเคลื่อนไหว ดังเช่นในสนิปเพลตด้านบน คุณจะใช้ JavaScript เพื่อเปิดและปิดภาพเคลื่อนไหวแต่ละรายการได้ ดังนี้

box.classList.add('move');

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

JavaScript ที่ต้องใช้เพื่อฟังการสิ้นสุดการเปลี่ยนมีลักษณะดังนี้

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

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

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

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

ลองใช้

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

หากต้องการให้ภาพเคลื่อนไหว CSS ทำงานในเบราว์เซอร์รุ่นเก่า คุณจะต้องเพิ่มคำนำหน้าของผู้ให้บริการ เครื่องมือจำนวนมากสามารถช่วยสร้าง CSS เวอร์ชันนำหน้าที่คุณต้องการ ทำให้คุณสามารถเขียนเวอร์ชันที่ไม่มีคำนำหน้าในไฟล์ต้นฉบับได้

สร้างภาพเคลื่อนไหวด้วย JavaScript และ Web Animations API

การสร้างภาพเคลื่อนไหวด้วย JavaScript นั้นซับซ้อนกว่าการเขียนการเปลี่ยนหน้าหรือภาพเคลื่อนไหว CSS แต่โดยทั่วไปแล้วจะช่วยให้นักพัฒนาซอฟต์แวร์มีอำนาจมากขึ้นอย่างมาก คุณสามารถใช้ Web Animations API เพื่อทำให้พร็อพเพอร์ตี้ CSS บางรายการเคลื่อนไหวหรือสร้างออบเจ็กต์เอฟเฟกต์ที่คอมโพสิเบิลได้

ภาพเคลื่อนไหว JavaScript เป็นคำสั่ง Imperative เนื่องจากคุณเขียนภาพเคลื่อนไหวดังกล่าวในบรรทัดเดียวกับโค้ด นอกจากนี้ คุณยังรวมไว้ในออบเจ็กต์อื่นๆ ได้ด้วย ด้านล่างนี้คือ JavaScript ที่คุณจะต้องเขียนเพื่อสร้างการเปลี่ยน CSS ตามที่อธิบายไว้ก่อนหน้านี้อีกครั้ง

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

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

ลองใช้

Web Animations API เป็นมาตรฐานใหม่จาก W3C เบราว์เซอร์สมัยใหม่ส่วนใหญ่รองรับแอตทริบิวต์นี้โดยค่าเริ่มต้น มี Polyfill พร้อมใช้งานสำหรับเบราว์เซอร์สมัยใหม่ที่ไม่รองรับ

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