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