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