توفّر Web Animations API، التي تم طرحها لأول مرة في الإصدار 36 من Chrome، عنصر تحكّم ملائمًا في JavaScript لتحريك الرسومات في المتصفّح، ويتم تنفيذها أيضًا في Gecko وWebKit.
يقدّم الإصدار 50 من Chrome تغييرات لتحسين إمكانية التشغيل التفاعلي مع المتصفّحات الأخرى وزيادة التوافق مع المواصفات. في ما يلي هذه التغييرات:
- إلغاء الأحداث
Animation.id- تغيير الحالة لطريقة
pause() - إيقاف الأسماء المُشار إليها بشرطة نهائيًا كمفاتيح في الإطارات الرئيسية
في الإصدار 51 من Chrome، تم الانتهاء من بعض هذه التغييرات:
- إزالة الأسماء التي تحتوي على شرطات كمفاتيح في الإطارات الرئيسية
إلغاء الأحداث
تتضمّن واجهة الصورة المتحركة
طريقة لإلغاء صورة متحركة، وهي طريقة مضحكة تُعرف باسم
cancel().
ينفّذ الإصدار 50 من Chrome بدء حدث الإلغاء عند استدعاء الطريقة وفقًا للمواصفات، ما يؤدي إلى بدء معالجة الحدث من خلال سمة
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.
إزالة الأسماء التي تحتوي على شرطات كمفاتيح في الإطارات الرئيسية
للالتزام بشكل أكبر بالمواصفات وعمليات التنفيذ الأخرى، يرسل الإصدار 50 من Chrome تحذيرًا إلى وحدة التحكّم في حال استخدام أسماء مُخطَّطة للمفاتيح في الرسوم المتحرّكة للإطارات الرئيسية. سلاسل الأحرف الصحيحة التي يجب استخدامها هي أسماء camelCase وفقًا لسمة CSS إلى سمة IDL خوارزمية الإحالة الناجحة.
على سبيل المثال، تتطلّب سمة CSS margin-left إدخال
marginLeft كمفتاح.
يزيل الإصدار 51 من Chrome إمكانية استخدام الأسماء التي تحتوي على شرطات تمامًا، لذا من المناسب الآن تصحيح أي محتوى حالي باستخدام الاسم الصحيح وفقًا للمواصفات.
ملخّص
تجعل هذه التغييرات ميزة "الرسومات المتحركة على الويب" في Chrome أقرب إلى ميزات المتصفّحات الأخرى وأكثر توافقًا مع المواصفات، ما يساعد في تبسيط إنشاء محتوى صفحات الويب لتحسين إمكانية التشغيل التفاعلي.