كيفية إنشاء صور متحركة CSS عالية الأداء

Kayce Basques

Rachel Andrew

يعلّمك هذا الدليل كيفية إنشاء صور متحركة عالية الأداء باستخدام CSS.

اطّلِع على لماذا تكون بعض الصور المتحركة بطيئة؟ للتعرّف على الأساس النظري لهذه الاقتراحات.

توافُق المتصفح

تتوفّر جميع خصائص CSS التي ينصح بها هذا الدليل على نطاق واسع في مختلف المتصفحات.

transform

opacity

will-change

نقل عنصر

لنقل عنصر، استخدِم قيم الكلمات الرئيسية translate أو rotation للسمة transform.

على سبيل المثال، لعرض عنصر، استخدِم translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

استخدِم rotate لتدوير العناصر. يوضّح المثال التالي كيفية تدوير عنصر بمقدار 360 درجة.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

تغيير حجم عنصر

لتغيير حجم عنصر، استخدِم قيمة الكلمة الرئيسية scale للخاصية transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

تغيير مستوى ظهور عنصر

لإظهار عنصر أو إخفائه، استخدِم opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

تجنُّب السمات التي تؤدي إلى تشغيل التنسيق أو الرسم

قبل استخدام أي سمة CSS للحركة (باستثناء transform وopacity)، حدِّد تأثير السمة في مسار العرض. تجنَّب أي سمة تؤدي إلى تشغيل التنسيق أو الطلاء ما لم يكن ذلك ضروريًا للغاية.

فرض إنشاء طبقة

كما هو موضّح في لماذا تكون بعض الحركات بطيئة؟، يسمح وضع العناصر في طبقة جديدة للمتصفّح بإعادة طلاء هذه العناصر بدون الحاجة إلى إعادة طلاء بقية التصميم.

يمكن للمتصفحات عادةً اتّخاذ قرارات جيدة بشأن العناصر التي يجب وضعها في طبقة جديدة، ولكن يمكنك فرض إنشاء طبقة يدويًا باستخدام السمة will-change. وكما يظهر من اسمها، تخبر هذه السمة المتصفّح بأنّ هذا العنصر سيتم تغييره بطريقة ما.

في CSS، يمكنك تطبيق will-change على أي أداة اختيار:

body > .sidebar {
  will-change: transform;
}

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

لفرض إنشاء طبقة في متصفّح لا يتوافق مع will-change، يمكنك ضبط transform: translateZ(0).

تصحيح أخطاء الصور المتحركة البطيئة أو التي تتضمّن خللاً

يمكن أن تساعدك أدوات مطوّري البرامج في Chrome وFirefox في معرفة سبب بطء الرسوم المتحركة أو حدوث خلل فيها.

التحقّق ممّا إذا كانت صورة متحركة تؤدي إلى تشغيل التنسيق

من المحتمل أن تكون الصورة المتحركة التي تنقل عنصرًا باستخدام شيء آخر غير transform بطيئة. يقارن المثال التالي بين صورة متحركة تستخدم transform وصورة متحركة تستخدم top وleft.

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

يمكنك اختبار ذلك في المثالَين التاليَين واستكشاف الأداء باستخدام "أدوات مطوّري البرامج".

• قبل التعديل، مع الصورة المتحركة top وleft
• بعد ذلك، باستخدام transform.

أدوات مطوري البرامج في Chrome

1. افتح لوحة الأداء.
2. تسجيل أداء وقت التشغيل أثناء حدوث الحركة
3. اطّلِع على علامة التبويب الملخّص.

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

أدوات مطوّري البرامج في Firefox

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

1. افتح لوحة الأداء.
2. ابدأ تسجيل الأداء أثناء عرض الصورة المتحركة.
3. أوقِف التسجيل وافحص علامة التبويب الرسم البياني الشلالي.

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

التحقّق من الإطارات التي تم إسقاطها

1. افتح علامة التبويب العرض في "أدوات مطوّري البرامج في Chrome".
2. ضَع علامة في مربّع الاختيار عداد اللقطات في الثانية.
3. شاهِد القيم أثناء تشغيل الصورة المتحركة.

انتبه إلى التصنيف اللقطات في أعلى واجهة مستخدم مقياس عدد اللقطات في الثانية. يؤدي ذلك إلى عرض قيم مثل 50% 1 (938 m) dropped of 1878. تحتوي الرسوم المتحركة العالية الأداء على نسبة مئوية عالية، مثل 99%، ما يعني أنّه يتم إسقاط عدد قليل من اللقطات وأنّ الرسوم المتحركة تبدو سلسة.

التحقّق مما إذا كانت الصورة المتحركة تؤدي إلى عرض المحتوى

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

أدوات مطوري البرامج في Chrome

1. افتح علامة التبويب العرض في "أدوات مطوّري البرامج في Chrome".
2. اختَر الطلاء الوامض.
3. حرِّك المؤشر على الشاشة.

إذا رأيت الشاشة بأكملها تومض، أو رأيت مناطق مميّزة لا تعتقد أنّه يجب تغييرها، عليك إجراء المزيد من البحث.

إذا كنت بحاجة إلى تحديد ما إذا كانت سمة معيّنة تتسبّب في مشاكل في الأداء مرتبطة بالرسم، يمكن أن تساعدك أداة تحليل أداء الرسم في "أدوات مطوّري البرامج في Chrome".

أدوات مطوّري البرامج في Firefox

1. افتح الإعدادات وأضِف زر "الأدوات" إلى تبديل وميض الطلاء.
2. في الصفحة التي تريد فحصها، فعِّل الزر وحرِّك الماوس أو مرِّر الصفحة للاطّلاع على المناطق المميّزة.

التحريك في مرحلة التركيب

احرص على حصر الصور المتحركة على opacity وtransform قدر الإمكان للحفاظ على الصور المتحركة في مرحلة التجميع من مسار العرض. استخدِم "أدوات مطوّري البرامج" للتحقّق من المرحلة التي تتأثّر بالرسوم المتحركة.

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

استخدِم السمة will-change باعتدال، وفقط إذا واجهت مشكلة في الأداء.