Web Animations API มีเครื่องมือพื้นฐานที่มีประสิทธิภาพเพื่ออธิบายภาพเคลื่อนไหวที่จำเป็นจาก JavaScript แต่นั่นหมายความว่าอย่างไร ดูแหล่งข้อมูลที่คุณสามารถใช้ได้ รวมถึงการสาธิตและโค้ดแล็บของ 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 ลิงก์เหล่านี้แสดงผลกระทบที่น่าทึ่งมากมาย และคุณสามารถดูซอร์สโค้ดของการสาธิตแต่ละรายการในบรรทัด
การสาธิตมีทั้งกาแล็กซีหมุนสีสันสดใส การหมุน Earth หรือแม้แต่เอฟเฟกต์ที่หลากหลายต่อองค์ประกอบเก่าๆ ธรรมดา
ใยโพลีเอสเตอร์
คุณอาจใช้ไลบรารี Polyfill เพื่อดูแลให้มีการรองรับที่ยอดเยี่ยมในเบราว์เซอร์รุ่นใหม่ทั้งหมด Web Animations API มีโพลีฟิลที่พร้อมใช้งานในขณะนี้ซึ่งจะนำมาใช้กับเบราว์เซอร์รุ่นใหม่ทั้งหมด รวมถึง Internet Explorer, Firefox และ Safari
หากอยากลองอะไรใหม่ๆ คุณก็ใช้ polyfill ประเภทถัดไปในภาพเคลื่อนไหวบนเว็บได้ ซึ่งจะมีฟีเจอร์ที่ยังไม่เสร็จสมบูรณ์ เช่น เครื่องมือสร้าง GroupEffect และ SequenceEffect แบบประกอบได้
โปรดดูหน้าแรกเพื่อเปรียบเทียบระหว่าง Polyfill ทั้ง 2 รายการ
คุณมีตัวเลือก 2-3 อย่างในการใช้ Polyfill ในโค้ด
ใช้ 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 ยังเขียนชุดโพสต์ดีๆ เกี่ยวกับภาพเคลื่อนไหวบนเว็บ รวมทั้งวิธีใช้โพสต์ร่วมกับพร็อพเพอร์ตี้ CSS motion-path ใหม่
สำหรับตัวอย่างบางส่วนที่ใช้ motion-path โปรดดูเอกสารของ Eric Willigers