Web Animations API มีองค์ประกอบพื้นฐานที่มีประสิทธิภาพในการอธิบายภาพเคลื่อนไหวที่จำเป็นจาก JavaScript แต่หมายความว่าอย่างไร ดูแหล่งข้อมูลที่มีให้คุณ ซึ่งรวมถึงการสาธิตและโค้ดแล็บของ Google
ฉากหลัง
API มีเมธอด Element.animate() เป็นหลัก
มาดูตัวอย่างที่เปลี่ยนสีพื้นหลังจากสีแดงเป็นสีเขียวกัน
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
วิธีนี้รองรับในเบราว์เซอร์ที่ทันสมัยทั้งหมด โดยมีฟอลแบ็ก Polyfill ที่ยอดเยี่ยม (จะกล่าวถึงในภายหลัง) การรองรับเมธอดนี้โดยตรงและออบเจ็กต์เพลเยอร์ของเมธอดนี้พร้อมใช้งานอย่างแพร่หลายใน Chrome 39 นอกจากนี้ยังพร้อมใช้งานโดยค่าเริ่มต้นใน Opera และอยู่ระหว่างการพัฒนาสำหรับ Firefox ซึ่งเป็นองค์ประกอบพื้นฐานที่มีประสิทธิภาพที่ควรมีไว้ในกล่องเครื่องมือ
Codelabs
มี Codelab จำนวนมากขึ้นสำหรับ Web Animations API ซึ่งเป็นคำแนะนำแบบเรียนรู้ด้วยตนเองที่แสดงแนวคิดต่างๆ ใน API ใน Codelab ส่วนใหญ่เหล่านี้ คุณจะได้นำเนื้อหาแบบคงที่มาปรับปรุงด้วยเอฟเฟกต์ภาพเคลื่อนไหว
Codelab เหล่านี้ รวมถึงลิงก์หรือแหล่งข้อมูลที่เกี่ยวข้อง เป็นจุดเริ่มต้นที่ดีที่สุดหากคุณต้องการทำความเข้าใจ Primitive ใหม่ๆ ที่พร้อมให้ใช้งานใน Web Animations หากต้องการดูไอเดียสิ่งที่คุณอาจสร้างได้ โปรดดูเอฟเฟกต์การเปิดเผยที่ได้แรงบันดาลใจจาก Android นี้
ดังนั้นหากคุณเพิ่งเริ่มต้นใช้งาน ก็ไม่ต้องมองหาที่ไหนอีกแล้ว
การสาธิต
หากกำลังมองหาแรงบันดาลใจ อย่าลืมดูการสาธิตภาพเคลื่อนไหวบนเว็บที่ได้แรงบันดาลใจจาก Material ซึ่งมีแหล่งที่มาใน GitHub ซึ่งแสดงให้เห็นถึงเอฟเฟกต์ที่น่าทึ่งมากมาย และคุณสามารถดูซอร์สโค้ดของแต่ละเดโมแบบอินไลน์ได้
ซึ่งรวมถึงกาแล็กซีหมุนหลากสีสัน โลกหมุน หรือแม้แต่เอฟเฟกต์ต่างๆ บนองค์ประกอบธรรมดาๆ
Polyfill
คุณสามารถใช้ไลบรารี Polyfill เพื่อให้มั่นใจว่าจะได้รับการสนับสนุนที่ยอดเยี่ยมในเบราว์เซอร์ที่ทันสมัยทั้งหมด Web Animations API มี polyfill พร้อมใช้งานแล้ว ซึ่งจะนำ API นี้ไปใช้ในเบราว์เซอร์ที่ทันสมัยทั้งหมด รวมถึง Internet Explorer, Firefox และ Safari
หากต้องการลองใช้ฟีเจอร์ใหม่ๆ คุณสามารถใช้ Polyfill ของ web-animations-next ซึ่งมีฟีเจอร์ที่ยังไม่เสร็จสมบูรณ์ เช่น ตัวสร้าง GroupEffect และ SequenceEffect ที่ประกอบได้
ดูการเปรียบเทียบระหว่าง Polyfill ทั้ง 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 ยังได้เขียนชุดโพสต์ที่ยอดเยี่ยมเกี่ยวกับภาพเคลื่อนไหวบนเว็บ ซึ่งรวมถึงวิธีใช้ร่วมกับพร็อพเพอร์ตี้ motion-path CSS ใหม่
ดูตัวอย่างบางส่วนที่ใช้ motion-path ได้ในเอกสารของ Eric Willigers