توفر واجهة 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() لإيقاف صورة متحركة قيد التقدم مؤقتًا. إذا تحققت من حالة الصورة المتحركة باستخدام السمة playState، يجب ضبطها على paused بعد طلب استخدام طريقة paused(). في إصدارات Chrome التي تسبق الإصدار 50،
تشير السمة playState
إلى idle إذا لم تبدأ الصورة المتحركة بعد، لكنها الآن تعكس الحالة الصحيحة وهي
paused.
إزالة الأسماء المتقطعة كمفاتيح في الإطارات الرئيسية
وللالتزام بالمواصفات وغيرها من عمليات التنفيذ، يرسل Chrome 50 تحذيرًا إلى وحدة التحكم في حالة استخدام أسماء متقطعة للمفاتيح في الرسوم المتحركة للإطارات الرئيسية. السلاسل الصحيحة التي يجب استخدامها هي أسماء CamelCase وفقًا لخاصية CSS لسمة IDL خوارزمية الإحالة الناجحة.
على سبيل المثال، تتطلب خاصية CSS margin-left تمرير marginLeft كمفتاح.
يزيل Chrome 51 دعم الأسماء المتقطعة تمامًا، لذا فقد حان الوقت لتصحيح أي محتوى موجود بالتسمية الصحيحة وفقًا للمواصفات.
ملخّص
تجعل هذه التغييرات تنفيذ Chrome لـ Web Animations أقرب إلى عمليات تنفيذ المتصفحات الأخرى وإلى المزيد من التوافق مع المواصفات التي تساعد جميعها في تبسيط كتابة محتوى صفحات الويب لتحقيق إمكانية التشغيل التفاعلي بشكل أفضل.