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

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