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

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

แซม โทโรกู๊ด

การสร้างภาพเคลื่อนไหวบนเว็บมี 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 ขั้นสูง แต่อาจเป็นประโยชน์หากคุณสร้างเกมหรือภาพวาดบนผืนผ้าใบ 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 ที่ต้องการเคลื่อนไหวหรือสร้างออบเจ็กต์เอฟเฟกต์แบบ Composable ได้

ภาพเคลื่อนไหวของ 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 จะช่วยให้คุณควบคุมสไตล์ขององค์ประกอบหนึ่งๆ ได้ในทุกขั้นตอน ซึ่งหมายความว่าคุณจะทำให้ภาพเคลื่อนไหวช้าลง หยุดชั่วคราว หยุด กลับด้าน และจัดการองค์ประกอบได้ตามความเหมาะสม ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณกำลังสร้างแอปพลิเคชันที่ซับซ้อนและเน้นวัตถุ เนื่องจากคุณสามารถสรุปลักษณะการทำงานได้อย่างเหมาะสม