Web Animations API ซึ่งเปิดตัวครั้งแรกใน Chrome 36 ช่วยให้ควบคุมภาพเคลื่อนไหวในเบราว์เซอร์ด้วย JavaScript ได้อย่างสะดวก และยังมีการใช้งานใน Gecko และ WebKit ด้วย
Chrome 50 มีการเปิดตัวการเปลี่ยนแปลงเพื่อปรับปรุงความสามารถในการทำงานร่วมกันกับเบราว์เซอร์อื่นๆ และเพื่อให้เป็นไปตามข้อกำหนดมากขึ้น การเปลี่ยนแปลงเหล่านี้มีดังนี้
- ยกเลิกกิจกรรม
Animation.id- การเปลี่ยนแปลงสถานะสำหรับวิธีการ
pause() - การเลิกใช้งานชื่อที่มีขีดกลางเป็นคีย์ในคีย์เฟรม
ใน Chrome 51 การเปลี่ยนแปลงบางอย่างเหล่านี้จะเสร็จสมบูรณ์
- การนำชื่อที่มีขีดกลางออกใช้เป็นคีย์ในคีย์เฟรม
ยกเลิกกิจกรรม
อินเทอร์เฟซภาพเคลื่อนไหวมีวิธีการยกเลิกภาพเคลื่อนไหว ซึ่งเรียกอย่างตลกๆ ว่า
cancel()
Chrome 50 ใช้การเรียกเหตุการณ์ยกเลิกเมื่อมีการเรียกใช้เมธอดตามข้อกำหนด ซึ่งจะทริกเกอร์การจัดการเหตุการณ์ผ่านแอตทริบิวต์ oncancel หากได้รับการเริ่มต้น
การสนับสนุนสำหรับ Animation.id
เมื่อสร้างภาพเคลื่อนไหวโดยใช้
element.animate()
คุณสามารถส่งพร็อพเพอร์ตี้ได้หลายรายการ ต่อไปนี้เป็นตัวอย่างการเคลื่อนไหวระดับความทึบของวัตถุ
element.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
การระบุพร็อพเพอร์ตี้ id จะตั้งค่าในออบเจ็กต์ Animation ที่แสดงผล ซึ่งช่วยในการแก้ไขข้อบกพร่องของเนื้อหาได้เมื่อคุณมีออบเจ็กต์ Animation จำนวนมากที่ต้องจัดการ ต่อไปนี้คือตัวอย่างวิธีระบุ id สําหรับภาพเคลื่อนไหวที่คุณสร้างอินสแตนซ์
element.animate([{opacity: 1}, {opacity: 0}], {duration: 500, id: "foo"});
การเปลี่ยนแปลงสถานะสําหรับเมธอด pause()
ระบบจะใช้เมธอด pause()
เพื่อหยุดภาพเคลื่อนไหวที่กําลังแสดงอยู่ชั่วคราว หากคุณตรวจสอบสถานะการเคลื่อนไหวโดยใช้แอตทริบิวต์ playState ควรตั้งค่าเป็น paused หลังจากที่เรียกใช้เมธอด paused() ใน Chrome เวอร์ชันก่อน 50 นั้น แอตทริบิวต์ playState จะแสดงค่า idle หากภาพเคลื่อนไหวยังไม่เริ่มทำงาน แต่ตอนนี้แอตทริบิวต์จะแสดงสถานะที่ถูกต้องซึ่งก็คือ paused
การนำชื่อที่มีขีดกลางออกใช้เป็นคีย์ในคีย์เฟรม
Chrome 50 จะส่งคำเตือนไปยังคอนโซลหากมีการใช้ชื่อที่มีขีดกลางสำหรับคีย์ในภาพเคลื่อนไหวของเฟรมหลัก เพื่อให้เป็นไปตามข้อกำหนดและการใช้งานอื่นๆ เพิ่มเติม สตริงที่ถูกต้องคือชื่อแบบ camelCase ตามอัลกอริทึมการเปลี่ยนค่าของพร็อพเพอร์ตี้ CSS เป็นแอตทริบิวต์ IDL
เช่น คุณสมบัติ CSS margin-left จะกำหนดให้คุณส่ง marginLeft เป็นคีย์
Chrome 51 จะไม่รองรับชื่อที่มีขีดกลางอีกต่อไป ตอนนี้จึงเป็นโอกาสที่ดีในการแก้ไขเนื้อหาที่มีอยู่โดยใช้ชื่อที่ถูกต้องตามข้อกำหนด
สรุป
การเปลี่ยนแปลงเหล่านี้ทำให้การใช้งาน Web Animation ของ Chrome ใกล้เคียงกับการใช้งานของเบราว์เซอร์อื่นๆ และเป็นไปตามข้อกำหนดมากขึ้น ซึ่งทั้งหมดนี้จะช่วยลดความซับซ้อนในการเขียนเนื้อหาหน้าเว็บเพื่อให้ทำงานร่วมกันได้ดีขึ้น