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