Web Animations API ให้ข้อมูลพื้นฐานที่มีประสิทธิภาพในการอธิบายภาพเคลื่อนไหวที่จำเป็นจาก JavaScript แต่นั่นหมายความว่าอย่างไร ดูแหล่งข้อมูลที่มีให้บริการสำหรับคุณ รวมถึงการสาธิตและ Codelab ของ Google
ที่มา
โดย API หลักจะมีเมธอด Element.animate()
ลองดูตัวอย่างกันซึ่งจะทำให้สีพื้นหลังเคลื่อนไหวจากสีแดงเป็นสีเขียว
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
วิธีการนี้ได้รับการสนับสนุนในเบราว์เซอร์รุ่นใหม่ทั้งหมด พร้อมการใช้ Polyfill สำรองที่ยอดเยี่ยม (ดูรายละเอียดเพิ่มเติมในภายหลัง) การรองรับดั้งเดิมสำหรับวิธีนี้และออบเจ็กต์โปรแกรมเล่นของวิธีการนี้ พร้อมให้ใช้งานในวงกว้างในฐานะส่วนหนึ่งของ Chrome 39 นอกจากนี้ยังพร้อมใช้งานในเครื่องใน Opera และอยู่ระหว่างการพัฒนาที่ใช้งานอยู่สำหรับ Firefox นี่เป็นวิธีการพื้นฐานที่มีประสิทธิภาพและควรมีอยู่ในกล่องเครื่องมือของคุณ
Codelab
Codelab จำนวนมากมีให้บริการสำหรับ Web Animations API คู่มือเหล่านี้เรียนรู้ด้วยตนเองซึ่งแสดงแนวคิดที่แตกต่างกันใน API ใน Codelab ส่วนใหญ่เหล่านี้ คุณจะนำเนื้อหาแบบคงที่ไปปรับปรุงด้วยเอฟเฟกต์ภาพเคลื่อนไหว
Codelab เหล่านี้และลิงก์หรือทรัพยากรที่เกี่ยวข้องคือจุดเริ่มต้นที่ดีที่สุดหากคุณต้องการทำความเข้าใจพื้นฐานใหม่ๆ ที่มีในภาพเคลื่อนไหวบนเว็บ ดูเอฟเฟกต์เปิดเผยที่ได้รับแรงบันดาลใจจาก Android เพื่อเป็นไอเดียสำหรับสิ่งที่คุณอาจสร้าง
ดังนั้นหากคุณเพิ่งเริ่มต้น ก็ไม่ต้องรออะไรอีก!
เดโม
หากกำลังมองหาแรงบันดาลใจ อย่าลืมดูการสาธิตภาพเคลื่อนไหวบนเว็บที่ได้แรงบันดาลใจมาจากวัสดุ ซึ่งมีแหล่งที่มาที่โฮสต์ไว้ใน GitHub เทมเพลตเหล่านี้แสดงให้เห็นถึงเอฟเฟกต์ที่น่าทึ่งต่างๆ และคุณสามารถดูซอร์สโค้ดของการสาธิตแต่ละรายการได้แบบในหน้า
การสาธิตประกอบด้วยกาแล็กซีหมุนสีสันสดใส หมุนโลก หรือแม้แต่เอฟเฟ็กต์ที่หลากหลายในองค์ประกอบเก่าแบบธรรมดา
ใยโพลีเอสเตอร์
คุณใช้ไลบรารี Polyfill เพื่อให้มั่นใจว่าเบราว์เซอร์รุ่นใหม่ทั้งหมดรองรับการใช้งานที่ดีเยี่ยม Web Animations API มี polyfill ที่พร้อมใช้งานในขณะนี้ซึ่งเปิดให้เบราว์เซอร์รุ่นใหม่ทั้งหมด ซึ่งรวมถึง Internet Explorer, Firefox และ Safari
หากอยากลองอะไรใหม่ๆ คุณสามารถใช้โพลีฟิลล์ถัดไปในภาพเคลื่อนไหวบนเว็บ ซึ่งรวมถึงฟีเจอร์ที่ยังไม่ได้สรุป เช่น เครื่องมือสร้าง GroupEffect และ SequenceEffect แบบเขียนได้
โปรดดูหน้าแรกเพื่อเปรียบเทียบระหว่างโพลีฟิล 2 ตัว
หากต้องการใช้ Polyfill ในโค้ด คุณมีตัวเลือก 2-3 อย่าง
ใช้ CDN เช่น cdnjs, jsDelivr หรือกำหนดเป้าหมายรุ่นที่เจาะจงผ่าน rawgit.com
ติดตั้งผ่าน NPM หรือ Bower
$ npm install web-animations-js $ bower install web-animations-js ```
ในทุกกรณี คุณเพียงแค่รวม Polyfill ลงในแท็กสคริปต์ก่อนโค้ดอื่นๆ
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
แหล่งข้อมูลอื่นๆ
หากคุณต้องการอ่านข้อมูลเบื้องต้นทางเทคนิคเพิ่มเติม โปรดดูข้อมูลจำเพาะของ W3C
Dan Wilson ยังได้เขียนชุดโพสต์ที่ยอดเยี่ยมเกี่ยวกับ Web Animations ซึ่งรวมถึงวิธีใช้ไปพร้อมๆ กับพร็อพเพอร์ตี้ CSS motion-path ใหม่
ดูตัวอย่างการใช้ motion-path ได้ที่เอกสารของ Eric Willigers