การรองรับ Web Animation ในตัวเริ่มใช้งานครั้งแรกใน Chrome 36 และได้รับการอัปเดตให้มีการควบคุมการเล่นใน Chrome 39 คุณสามารถใช้เมธอด Element.animate() เพื่อเรียกใช้ภาพเคลื่อนไหวแบบบังคับจาก JavaScript ได้โดยตรง และใช้ประโยชน์จากออบเจ็กต์ที่แสดงผลเพื่อควบคุมการเล่นภาพเคลื่อนไหวเหล่านี้ได้ วิธีการเหล่านี้มีรายละเอียดอยู่ในฉบับร่างปัจจุบันของข้อกำหนดเฉพาะ W3C สำหรับภาพเคลื่อนไหวบนเว็บ
มี Polyfill ที่ใช้งานจริงที่อยู่ระหว่างการพัฒนาอย่างต่อเนื่อง ซึ่งจะติดตามฟีเจอร์ Web Animation ทั้งหมดที่ติดตั้งใช้งานโดยค่าเริ่มต้น และรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด วิธีการหลักเหล่านี้พร้อมใช้งานแล้วในตอนนี้ และควรเป็นส่วนหนึ่งของกล่องเครื่องมือในการสร้างประสบการณ์การใช้งานที่สมบูรณ์ซึ่งได้รับประโยชน์จากภาพเคลื่อนไหว (เช่น สําหรับ เว็บแอป Google I/O 2015)
การเปลี่ยนแปลงคอนสตรัคเตอร์และกลุ่ม
ข้อกำหนดของ Web Animations ยังอธิบายถึงกลุ่มและลำดับ รวมถึงตัวสร้างสำหรับภาพเคลื่อนไหวและโปรแกรมเล่น ฟีเจอร์เหล่านี้มีให้บริการใน polyfill ของ web-animations-next ซึ่งออกแบบมาเพื่อแสดงฟีเจอร์ที่อยู่ระหว่างการพูดคุยและยังไม่ได้นำมาใช้งานในระบบ ทีมพัฒนาภาพเคลื่อนไหวบนเว็บได้เปลี่ยนชื่อฟีเจอร์เหล่านี้เพื่อให้เข้าใจได้ง่ายขึ้นตามความคิดเห็นที่ได้รับจากนักพัฒนาแอป
FXTF เพิ่งจัดการประชุมในซิดนีย์ ออสเตรเลีย และพูดคุยเรื่องการตั้งชื่อ เนื่องจากนักพัฒนาแอปจำนวนหนึ่งได้ยกประเด็นที่ถูกต้องเกี่ยวกับการตั้งชื่อที่ทำให้เกิดความสับสน ด้วยเหตุนี้ เราจึงตกลงกันที่จะเปลี่ยนแปลงชื่อดังต่อไปนี้
- Animation เปลี่ยนเป็น KeyframeEffect
- AnimationSequence เปลี่ยนเป็น SequenceEffect
- AnimationGroup เปลี่ยนเป็น GroupEffect
- AnimationPlayer เปลี่ยนเป็น Animation
โปรดทราบว่าแม้ว่าภาพเคลื่อนไหวและโปรแกรมเล่นจะพร้อมใช้งานใน Chrome โดยค่าเริ่มต้นและเป็นส่วนหนึ่งของ polyfill แต่ปัจจุบันระบบจะสร้างภาพเคลื่อนไหวและโปรแกรมเล่นผ่านเมธอด Element.animate() โดยตรง โค้ดที่มีอยู่ซึ่งใช้เมธอด Element.animate() จะไม่ต้องทำการเปลี่ยนแปลง
ชื่อใหม่จะแสดงลักษณะการทํางานของออบเจ็กต์แต่ละรายการได้อย่างแม่นยำมากขึ้น เช่น KeyframeEffect จะอธิบายเอฟเฟกต์ที่อิงตามคีย์เฟรมซึ่งสามารถกําหนดเป้าหมายไปยังองค์ประกอบ HTML ได้ ในทางตรงกันข้าม ออบเจ็กต์ Animation ใหม่จะแสดงภาพเคลื่อนไหวในสถานะใดสถานะหนึ่ง (เช่น เล่น หยุดชั่วคราว ฯลฯ)
SourceCodeEffect
หากคุณใช้ข้อมูลบางส่วนจากข้อกำหนดฉบับร่างผ่าน polyfill ของ web-animations-next คุณจะต้องอัปเดตโค้ดภายในระยะเวลาเลิกใช้งานเพื่อให้สอดคล้องกับชื่อใหม่เหล่านี้ ตามนโยบายการเปลี่ยนแปลง polyfill เรามุ่งมั่นที่จะรองรับเวอร์ชันเก่าเป็นเวลา 3 เดือนและแสดงข้อความเตือนในคอนโซลหากเว็บไซต์ของคุณใช้ฟีเจอร์หรือชื่อที่เลิกใช้งานแล้ว
หากต้องการลองใช้ฟีเจอร์เหล่านี้ โปรดรอรุ่น v2 ของ polyfill เพื่อใช้ประโยชน์จากชื่อใหม่เหล่านี้ สุดท้าย อย่าลืมสมัครรับข้อมูลกลุ่ม web-animations-changes เพื่อติดตามการเปลี่ยนแปลงอื่นๆ