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

Una Kravets

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

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

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

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

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

• استخدام دالات transform لصفحات الأنماط المتتالية (CSS) أو نقل القيمتَين opacity أو filter
• أضِف السمة will-change إلى العنصر.
• إنشاء رسمة متحركة في لوحة الرسم باستخدام "OffscreenCanvas"
• إنشاء رسم WebGL ثلاثي الأبعاد

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

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

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

مثال

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

عندما نفتح "أدوات مطوري البرامج"، يمكننا البدء في تحليل تجربة استخدام وحدة المعالجة المركزية (CPU) وتجربة الصور المتحركة المسرّعة من خلال وحدة معالجة الرسومات.

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

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

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

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

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

ما الخطوات التالية؟

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

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

صورة الغلاف: صور سيورا لبرنامج Unspark.