تحديثات لإمكانيات الرسوم المتحركة السريعة للأجهزة

أونا كرافيتس

ملخّص: يعدّل Chromium إمكانيات تسريع الأجهزة تلقائيًا في صور الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) وتحويلات تستند إلى النسب المئوية، وقريبًا الصور المتحركة على خلفية لون الخلفية وصور متحركة لمسار المقاطع.

عندما يتعلق الأمر بأداء الصور المتحركة على الويب، من المرجح أن تظهر الرسوم المتحركة "تتسريع الأجهزة" و "تسرع وحدة معالجة الرسومات". ولكن ماذا تعني هذه حتى؟ الأنماط التي يتم تسريعها بالأجهزة هي الأنماط التي تستفيد من وحدة معالجة الرسومات (GPU) (وحدة المعالجة الرسومية) بدلاً من وحدة المعالجة المركزية (CPU) (وحدة المعالجة المركزية) لعرض الأنماط المرئية. وهذا لأن وحدة معالجة الرسومات يمكنها عرض التغييرات المرئية على صفحة ويب بشكل أسرع من وحدة المعالجة المركزية (CPU).

إنّ استخدام وحدة معالجة الرسومات لتفريغ تأثير الانتقالات والرسوم المتحركة الكثيفة للغاية، يعني مؤثرات عرض أكثر سلاسة وتشوهًا أقل، حيث لا تتأثر هذه الرسوم المتحركة بسلسلة التعليمات الرئيسية. من خلال سحبها من سلسلة التعليمات الرئيسية، تتجاوز الرسوم المتحركة طبقة النصوص البرمجية النشطة الأخرى التي يتم تشغيلها على صفحتك، مما قد يؤدي إلى إبطاء العناصر المرئية وترك مشكلة.

تمكين الرسوم المتحركة التي يتم تسريعها بالأجهزة

يتم تركيب الصور المتحركة التي يتم تسريعها بالأجهزة في شكل طبقات، ما يساعد مطوّري البرامج على إنشاء صور متحركة سلسة للغاية بسرعة 60 لقطة في الثانية لتحسين أداء العرض المرئي. توجد حاليًا بعض الطرق لتحديد وتمكين الرسوم المتحركة وعمليات النقل التي يتم تسريعها بالأجهزة على الويب:

  • استخدام دوال transform في CSS أو نقل قيم opacity أو filter
  • أضِف السمة will-change إلى العنصر.
  • إنشاء لوحة صورة متحركة باستخدام "OffscreenCanvas"
  • إنشاء رسم WebGL ثلاثي الأبعاد
يعمل فريق العرض في Chromium باستمرار على تتبُّع استخدام السمات الأكثر صورًا متحركة لتحديد الإجراء التالي في ما يتعلق بتفعيل تسريع الأجهزة. مع أنّ خصائص CSS الحالية التي يتم تسريعها بالأجهزة تلقائيًا لا تتضمّن سوى opacity وfilter وtransform، إلا أنّ background-color وclip-path سينضمان إلى القائمة قريبًا.

ما الذي يتم تسريعه بواسطة الأجهزة بشكل افتراضي في Chromium؟ نحن بصدد إجراء بعض التغييرات التي ستطرأ، بما في ذلك صور SVG المتحركة، وهي ميزة طلبها مطوّرو البرامج بشدّة.

صور SVG المتحركة المسرّعة للأجهزة

يعد تنسيق SVG إضافة رائعة إلى أي موقع ويب، ويمكن أن تكون هذه التفاعلات مع SVG أكثر أداءً. بدءًا من Chromium 89، سينضم Chrome إلى المتصفحات مثل Firefox لتفعيل تسريع الأجهزة بشكل تلقائي على صور SVG المتحركة. ما المطلوب منك بصفتك مطوّر البرامج؟ لا شيء، سيتم تطبيقه تلقائيًا على الرسوم المتحركة بتنسيق SVG في الإصدار 89 من Chromium والإصدارات الأحدث.

مثال

لنلقِ نظرة على الاختلافات بين صورة SVG المتحركة التي تم تفعيل ميزة تسريع الأجهزة فيها أو بدونها. مؤشرات التحميل هي عناصر واجهة مستخدم شائعة الاستخدام، مثل هذا العنصر الذي يمكن مشاهدته على facebook.com. تشير هذه المؤشرات إلى العمل الذي يتم إجراؤه على الخادم، بينما ينتظر المستخدم ردًا. في الحالة الموضحة هنا، ستكون الاستجابة هي تحميل نتائج إضافية في الشريط الجانبي.

واجهة مستخدم الشريط الجانبي في Facebook تعرض أداة تحميل دائرية أثناء تحميل محتوى إضافي.

عندما نفتح أدوات مطوري البرامج، يمكننا البدء في تحليل أوجه الاختلاف والترى حقًا الاختلافات بين تجربة الرسوم المتحركة التي تسرعها وحدة المعالجة المركزية وحدة المعالجة المركزية (CPU) ووحدة معالجة الرسومات.

لوحة الأداء مع تفعيل وميض الطلاء
على يمين الشاشة: Chromium 88. على اليمين: الإصدار 89 من Chromium، مع ميزة تسريع الأجهزة للصور المتحركة بتنسيق SVG يمكنك مشاهدة العرض التوضيحي الذي أنشأه "بينوا جيرارد" على JSFiddle.

يمكنك ملاحظة أنه على الجانب الأيسر (Chromium 87)، تحدث إعادة العرض في كل مرة تتحرك فيها الدائرة الدوّارة (وهو ما يؤدي إلى تحريكها باستمرار). على يسار الصفحة، ليست هناك إعادة عرض (Chromium 89 وFirefox). يمكننا اختبار ذلك في لوحة عرض أدوات مطوّري البرامج عند تفعيل فلاش "الطلاء".

لوحة أداء تعرض العرض
على يمين الشاشة: Chromium 88. على اليمين: الإصدار 89 من Chromium، مع ميزة تسريع الأجهزة للصور المتحركة بتنسيق SVG يمكنك مشاهدة العرض التوضيحي الذي أنشأه "بينوا جيرارد" على JSFiddle.

بعد إلقاء نظرة فاحصة على لوحة "الأداء"، يمكنك معرفة هذا التأثير مرة أخرى، وكيفية تأثيره في الأداء العام لموقعك الإلكتروني. وتتجنب عرض الوقت ورسمه بالكامل للرسوم المتحركة، ما يعني صور متحركة أكثر سلاسة وتطبيقات أكثر أداءً. على الرغم من أنّ Facebook لن يشحن أداة التحميل المستندة إلى SVG هذا إلى أن يزداد توافق المتصفّح مع الرسومات الموجّهة التي يمكن تغيير حجمها (SVG) التي يتم تسريعها بالأجهزة، إلا أنّ ذلك سيسمح بمزيد من المرونة من حيث متطلبات التنسيقات والتحجيم والحلّ والصيانة السهلة.

النسبة المئوية للصور المتحركة

يشحن فريق التفاعلات أيضًا الدعم للصور المتحركة التي تؤدي إلى تحويل بالنسبة المئوية في الإصدار 89 من Chromium. تصف الرسوم المتحركة المستندة إلى النسبة المئوية التفاعلات التي تتضمن الحركة على أساس النسبة المئوية. على سبيل المثال، يمكنك تكبير عنصر بنسبة 20%، أو تمرير قائمة شريط جانبي سريع الاستجابة من خارج الشاشة باستخدام شيء مثل translateX: -100%.

مثال على التنقّل من waze.com، والذي يستخدم تحويل النسبة المئوية لفتح القائمة وإخفائها على الشاشات الأصغر حجمًا

هذه الأنواع من الرسوم المتحركة لواجهة المستخدم شائعة نسبيًا، لكننا لا تستفيد حاليًا من تسريع الأجهزة لأننا لم نتمكن في السابق من تركيب هذه الرسوم المتحركة. تعتمد النسب المئوية في عمليات التحويل على حجم المربع (أي التنسيق)، ولكن الآن، ما دام حجم التنسيق لا يغير كل إطار، يمكن للمتصفح حساب قيم التحويل المطلق مسبقًا وتشغيلها كما لو أن المطور قد قدَّم قيم البكسل. والخبر السار هو أن فريق Chromium يعمل على هذه الميزة، وقريبًا سيتم تركيب هذه الأنواع من الصور المتحركة تلقائيًا وتسريعها على الأجهزة.

ما التالي؟

ستجعل هذه الصور المتحركة المعدَّلة نمطًا أكثر سلاسة على الويب. وكما ذكرنا أعلاه، يتطلع الفريق دائمًا لمعرفة احتياجات الويب القادمة التي ستظهر. من المقرر في الوقت الحالي تحويل background-color وclip-path لاستخدام ميزة "تسريع الأجهزة" تلقائيًا في الإصدارات المستقبلية من Chromium.

تمثّل السمة background-color أولوية بسبب ارتفاع عدد استخدامها لعمليات الانتقال والتأثيرات، وتتيح السمة clip-path تأثيرات انتقالية أكثر أداءً على الويب. عندما يلتقي الأداء والتفاعل، يكسب الجميع!

transition.style: موقع إلكتروني تجريبي يسلّط الضوء على تأثيرات نقل CSS من قِبل "آدم أرجيل"

صورة الغلاف: Siora Photography لتطبيق Unsplash.