Smooth as Butter: تحقيق 60 FPS Animations باستخدام CSS3

عناصر موحية في تطبيقات المحمول الخاصة بك سهلة.

قد يكون تنشيط العناصر في تطبيقات الجوال لديك أمرًا سهلاً أيضًا ... إذا اتبعت نصائحنا هنا.

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

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

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

نريد أن نقدم لك يدًا لتسخير قوة CSS3 بشكل صحيح. لفعل ذلك ، نحتاج إلى فهم بعض الأشياء أولاً.

فهم الجدول الزمني

ما الذي يفعله المتصفح أثناء عرض العناصر والتشغيل معها؟ يسمى هذا الجدول الزمني البسيط للغاية "مسار التقديم الحرج".

مصدر الصورة: www.csstriggers.com

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

1. الأنماط

يبدأ المستعرض حساب الأنماط لتطبيقها في العناصر - إعادة حساب النمط.

2. تخطيط

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

3. الطلاء

سيبدأ المستعرض الآن في تعبئة وحدات البكسل لكل عنصر في طبقات. الخصائص التي تستخدمها هي ، على سبيل المثال: صندوق الظل ، نصف القطر ، اللون ، لون الخلفية ، وغيرها.

4. مركب

هذا هو المكان الذي ترغب في القيام فيه بالسحر ، حيث يبدأ المتصفح في رسم جميع الطبقات على الشاشة.

يمكن للمتصفحات الحديثة تحريك أربعة أنماط جميلة بشكل جيد ، مع الاستفادة من خصائص التحويل والتعتيم.

  • الموضع - التحويل: translateX (n) translateY (n) translateZ (n)؛
  • مقياس - تحويل: مقياس (ن) ؛
  • دوران - تحويل: تدوير (ndeg) ؛
  • العتامة - العتامة: n؛

كيفية تحقيق 60 لقطة في الثانية مارك

مع وضع ذلك في الاعتبار ، فقد حان الوقت لنشمر عن سواعدنا ونعمل.

لنبدأ مع HTML. سننشئ بنية بسيطة للغاية ونضع قائمة التطبيق الخاصة بنا داخل فئة تخطيط.

تسير الأمور بطريقة خاطئة

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

والنتيجة هي شيء مثل هذا:

أن الرسوم المتحركة ليست سلسة على الإطلاق. فحصنا مع DevTools Timeline لمعرفة ما كان يحدث تحت الغطاء ، وكانت هذه هي النتيجة:

تمثل المناطق الخضراء الوقت الذي تقضيه في تقديم الرسوم المتحركة.

هذا يدل بوضوح FPS غير منتظمة وأن الأداء بطيء للغاية.

"الشريط الأخضر يشير إلى FPS. يشير الشريط العالي إلى أن الرسوم المتحركة تظهر بمعدل 60 إطارًا في الثانية. يشير الشريط المنخفض إلى أقل من 60 إطارًا في الثانية. لذلك ، من الناحية المثالية ، تريد أن يكون الشريط الأخضر مرتفعًا باستمرار عبر الخط الزمني. تشير هذه الأشرطة الحمراء أيضًا إلى jank ، لذلك ، بدلاً من ذلك ، هناك طريقة أخرى لقياس تقدمك وهي القضاء على تلك الأشرطة الحمراء. "
شكرا لك ، كايس باسكيس!

باستخدام التحويل

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

هذا بالضبط ما يعرضه الجدول الزمني:

بدأت النتائج تتحسن ، FPS أكثر انتظامًا ، وبالتالي فإن الرسوم المتحركة أكثر سلاسة.

تشغيل الرسوم المتحركة في GPU

لنأخذ الأمر ، ثم. لجعله يعمل بسلاسة وسلاسة ، سنستخدم وحدة معالجة الرسومات لتقديم الرسوم المتحركة.

على الرغم من أن translateZ () أو translate3d () ستظل في حاجة إليها من قبل بعض المتصفحات كاحتياطي ، فإن خاصية will-change هي المستقبل. ما يفعله هذا هو أنه يروج للعناصر إلى طبقة أخرى ، لذلك لا يتعين على المستعرض النظر في عرض المخطط أو الطلاء.

ترى كيف السلس هذا؟ الجدول الزمني يثبت أن:

FPS للرسوم المتحركة أكثر ثباتًا وتصبح الرسوم المتحركة أسرع بكثير هنا. ولكن لا يزال هناك إطار طويل يعمل هناك. لا يزال هناك القليل من عنق الزجاجة في البداية.

هل تذكر بنية HTML التي تم إنشاؤها في البداية؟ دعنا نتحكم في div-app div على هذا الهيكل باستخدام جافا سكريبت:

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

60 FPS السلس كحل الزبدة

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

لذلك ، نقترح بنية HTML التالية:

والآن يمكننا التحكم في حالة القائمة بطريقة مختلفة قليلاً. سنقوم بمعالجة الرسوم المتحركة في فصل دراسي يتم إزالته عند انتهاء وقت الانتقال ، باستخدام وظيفة الانتقال في JavaScript.

دعونا نجمعها جميعًا ونتحقق من النتائج ، إذن.

إليك مثال CSS3 كامل ممكّن بالكامل ، مع وجود كل شيء في مكانه الصحيح:

وماذا يوضح لنا الجدول الزمني؟

على نحو سلس كما الزبدة ، ترى؟

تحرير (17 أغسطس): نظرًا للطلب الشائع ، إليك مثال عملي يا شباب:

تحرير (23 فبراير ، 2017): الجزء الثاني من هذا المقال مباشر! استمتع بـ 60 FPS من الرسوم المتحركة ، فليب جيد

خوسيه روساريو | خبير متنقل وخلفي في OutSystems

يمكنك خبز كعكة مع كل هذا الزبدة! أخبر أصدقاءك: LinkedIn | تويتر | فيسبوك | البريد الإلكتروني