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

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

Paul Lewis

Sam Thorogood

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

สรุป

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

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

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