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 أو GreenSock's TweenMax، فقد يكون من الأسهل بشكلٍ عام الالتزام بهذا الإجراء في الصور المتحرّكة.

الصور المتحركة باستخدام 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، يمكنك التحكّم بشكل كامل في أنماط العناصر في كل خطوة. وهذا يعني أنّه يمكنك إبطاء الرسوم المتحركة وإيقافها مؤقتًا وإيقافها وعكسها ومعالجة العناصر على النحو الذي تراه مناسبًا. يعد ذلك مفيدًا بشكل خاص إذا كنت تقوم بإنشاء تطبيقات معقدة ذات اتجاه كائن، لأنه يمكنك تلخيص سلوكك بشكل صحيح.