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

Kayce Basques

Rachel Andrew Technical Writer

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

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

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

تتوفّر جميع خصائص CSS التي يوصي بها هذا الدليل في المتصفّحات المختلفة.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

نقل عنصر

لنقل عنصر، استخدِم قيم الكلمات الرئيسية 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;
  }
}

ملاحظة: يمكنك العثور على أمثلة على نسخ ولصق حركات مختلفة على Animista.

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

قبل استخدام أي سمة 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. افحص علامة التبويب ملخّص.

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

يؤدي مثال animation-with-top-left إلى تنفيذ عمل العرض.

لا يتسبب مثال animation-with-transform في تنفيذ أي عمل متعلق بالعرض.

Firefox DevTools

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

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

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

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

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

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

يؤدي مثال animation-with-top-left إلى إسقاط %50 من اللقطات.

يؤدي مثال "الصور المتحركة مع التحويل" إلى إسقاط %1 فقط من اللقطات.

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

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

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

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

في هذا المثال من "خرائط Google"، يمكنك رؤية العناصر التي تتم إعادة رسمها.

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

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

Firefox DevTools

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

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

Where possible, restrict animations to opacity and transform to keep animations on the compositing stage of the rendering path. استخدِم "أدوات مطوّري البرامج" للتحقّق من المرحلة التي تتأثر بالصور المتحركة في مسار العرض.

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

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