การปรับปรุงภาพเคลื่อนไหวบนเว็บใน Chrome 50

อเล็กซ์ ดานิโล

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 ใกล้เคียงกับการใช้เบราว์เซอร์อื่นๆ มากขึ้นและสอดคล้องกับข้อกำหนดเฉพาะซึ่งจะช่วยลดความซับซ้อนในการเขียนเนื้อหาหน้าเว็บเพื่อให้ทำงานร่วมกันได้ดียิ่งขึ้น