CSS مقابل الرسوم المتحركة في JavaScript

يمكنك إضافة تأثيرات متحركة باستخدام CSS أو JavaScript. أيّهما يجب استخدامه، ولماذا؟

Paul Lewis

Sam Thorogood

هناك طريقتان أساسيتان لإنشاء صور متحركة على الويب: باستخدام CSS وJavaScript. يعتمد الخيار الذي تختاره حقًا على التبعيات الأخرى لمشروعك، وأنواع التأثيرات التي تحاول تحقيقها.

ملخّص

• استخدِم الرسومات المتحركة في CSS لإجراء انتقالات "لمرة واحدة" أبسط، مثل تبديل حالات عناصر واجهة المستخدم.
• استخدِم الرسومات المتحركة في JavaScript عندما تريد الحصول على تأثيرات متقدّمة، مثل الارتداد أو الإيقاف أو الإيقاف المؤقت أو الترجيع أو الإبطاء.
• إذا اخترت إنشاء الرسوم المتحركة باستخدام JavaScript، استخدِم Web Animations API أو إطار عمل حديث يناسبك.

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

• استخدِم CSS عندما تكون لديك حالات أصغر حجمًا ومكتفية ذاتيًا لعناصر واجهة المستخدم. إنّ عمليات النقل والصور المتحركة في CSS مثالية لإظهار قائمة تنقّل من الجانب أو عرض نصائح. قد ينتهي بك الأمر باستخدام JavaScript للتحكم في الحالات، لكن الرسوم المتحركة نفسها ستكون في CSS.
• استخدِم JavaScript عندما تحتاج إلى تحكّم كبير في الصور المتحركة. واجهة برمجة التطبيقات Web Animations API هي النهج المستنِد إلى المعايير، وهي متاحة حاليًا في معظم المتصفحات الحديثة. يقدّم هذا الإجراء عناصر حقيقية، وهي مثالية للتطبيقات المعقدة المستندة إلى الكائنات. تكون لغة JavaScript مفيدة أيضًا عندما تحتاج إلى إيقاف الصور المتحركة أو إيقافها مؤقتًا أو إبطاءها أو عكسها.
• استخدِم requestAnimationFrame مباشرةً عندما تريد تنظيم مشهد كامل يدويًا. هذه طريقة متقدّمة لاستخدام JavaScript، ولكن يمكن أن تكون مفيدة إذا كنت بصدد إنشاء لعبة أو رسم صورة على لوحة HTML.

بدلاً من ذلك، إذا كنت تستخدم حاليًا إطار عمل JavaScript يتضمّن وظائف الرسوم المتحركة، مثل طريقة .animate() في jQuery أو TweenMax في GreenSock، قد يكون من الأنسب بشكل عام الاستمرار في استخدام هذا الإطار لإنشاء الرسوم المتحركة.

الصور المتحركة باستخدام CSS

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

إليك بعض ترميز CSS الذي ينقل العنصر 100px في كل من المحورين "س" و"ص". ويتم ذلك باستخدام انتقال CSS الذي تم ضبطه ليستغرق 500ms. عند إضافة فئة move، يتم تغيير قيمة transform ويبدأ الانتقال.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

التجربة

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

إذا أنشأت، كما في المقتطف أعلاه، فئات CSS منفصلة لإدارة الرسوم المتحركة، يمكنك بعد ذلك استخدام JavaScript لتفعيل كل رسم متحرك وإيقافه:

box.classList.add('move');

ويؤدي ذلك إلى تحقيق توازن جيد لتطبيقاتك. يمكنك التركيز على إدارة الحالة باستخدام JavaScript، وضبط الفئات المناسبة على العناصر المستهدَفة ببساطة، وترك المتصفح يعالج الصور المتحركة. إذا اتّبعت هذا المسار، يمكنك الاستماع إلى أحداث transitionend في العنصر، ولكن فقط إذا كان بإمكانك الاستغناء عن الإصدارات القديمة من Internet Explorer، إذ كان الإصدار 10 هو أول إصدار يتيح هذه الأحداث. وقد كانت جميع المتصفّحات الأخرى تتيح هذا الحدث منذ بعض الوقت.

يظهر رمز JavaScript المطلوب للاستماع إلى نهاية عملية النقل على النحو التالي:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

بالإضافة إلى استخدام عمليات النقل في CSS، يمكنك أيضًا استخدام رسوم CSS المتحركة، ما يتيح لك التحكّم بشكل أكبر في الإطارات الرئيسية للحركة الفردية ومدتها وعدد مرات تكرارها.

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

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

التجربة الآن

باستخدام حركات CSS، يمكنك تحديد الحركة نفسها بشكل مستقل عن العنصر المستهدَف، واستخدام السمة animation-name لاختيار الحركة المطلوبة.

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

إنشاء الصور المتحركة باستخدام JavaScript وWeb Animations API

إنّ إنشاء صور متحركة باستخدام JavaScript هو أكثر تعقيدًا مقارنةً بكتابة انتقالات أو صور متحركة باستخدام CSS، ولكنه يمنح المطوّرين عادةً إمكانيات أكبر بكثير. يمكنك استخدام Web Animations API لتحريك خصائص CSS محدّدة أو إنشاء عناصر تأثيرات قابلة للإنشاء.

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

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

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

التجربة

‫Web Animations API هي معيار جديد نسبيًا من W3C. وهو متوافق بشكلٍ أصلي مع معظم المتصفحات الحديثة. بالنسبة إلى المتصفحات الحديثة غير المتوافقة، تتوفّر تقنية polyfill.

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