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

Kayce Basques

Rachel Andrew

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

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

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

تحتوي جميع خصائص CSS التي يوصي بها هذا الدليل على إمكانية تشغيل جميع المتصفحات بشكل جيّد والدعم.

transform

دعم المتصفح

• 36
• 12
• 16
• 9

المصدر

opacity

دعم المتصفح

• 1
• 12
• 1
• 2

المصدر

will-change

دعم المتصفح

• 36
• 79
• 36
• 9.1

المصدر

نقل عنصر

لنقل عنصر، استخدِم قيم الكلمة الرئيسية 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، يمكنك الرجوع إلى كل ما تحتاج إلى معرفته عن سمة will-change CSS.

في حال فرض إنشاء الطبقة في متصفِّح غير متوافق مع will-change (في الغالب Internet Explorer)، يمكنك ضبط 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));
  }
}

يمكنك اختبار ذلك في المثالين التاليين على خلل: واستكشاف الأداء باستخدام "أدوات مطوري البرامج"

• قبل.
• بعد.

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

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

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

animation-with-top-left على سبيل المثال يؤدي إلى عمل العرض.

الرسوم المتحركة مع التحويل على سبيل المثال إلى عملية العرض.

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

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

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

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

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

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

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

الخاتمة

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

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

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