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

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

بول لويس

سام ثوروغود

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

ملخّص

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

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

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

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