دراسة حالة حول أداء الرسوم المتحركة المعتمدة على التمرير

Yuriko Hirota

ما الجديد في الصور المتحركة المستندة إلى الانتقال؟

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

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

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

يؤدي ذلك إلى جعل إنشاء صور متحركة مستندة إلى الانتقال عالية الأداء ومتزامنة مع الانتقال أمرًا مستحيلاً أو صعبًا جدًا.

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

تقارن هذه المقالة بين الطريقة الجديدة وتقنية JavaScript الكلاسيكية لتوضيح مدى سهولة وسلاسة الصور المتحركة المستندة إلى الانتقال باستخدام واجهة برمجة التطبيقات الجديدة.

مقارنة بين واجهة برمجة تطبيقات CSS للصور المتحركة المستندة إلى الانتقال وJavaScript الكلاسيكية

تم إنشاء شريط التقدّم التالي باستخدام تقنيات JavaScript الكلاسيكية.

يستجيب المستند في كل مرة يحدث فيها حدث scroll لحساب النسبة المئوية التي انتقل إليها المستخدم من scrollHeight.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

يعرض العرض التوضيحي التالي شريط التقدّم نفسه باستخدام واجهة برمجة التطبيقات الجديدة مع CSS.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

تحوّل ميزة CSS الجديدة animation-timeline موضعًا في نطاق الانتقال تلقائيًا إلى نسبة مئوية من التقدّم، وبالتالي تنفّذ كل العمليات الصعبة.

لننتقل الآن إلى الجزء المثير للاهتمام: لنفترض أنّك نفّذت عملية حسابية فائقة الصعوبة على كلا إصدارَي الموقع الإلكتروني، ما سيستهلك معظم موارد سلسلة التعليمات الرئيسية.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

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

يختلف استخدام وحدة المعالجة المركزية تمامًا في "أدوات مطوّري البرامج"، كما هو موضّح في لقطات الشاشة التالية.

يعرض العرض التوضيحي التالي تطبيقًا للصور المتحركة المستندة إلى الانتقال أنشأته شركة CyberAgent. يمكنك ملاحظة أنّ الصورة تظهر تدريجيًا أثناء الانتقال.

مقارنة بين واجهة برمجة تطبيقات JavaScript الجديدة للصور المتحركة المستندة إلى الانتقال وJavaScript الكلاسيكية

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

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

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

تعمل واجهة برمجة التطبيقات الجديدة هذه أيضًا بالتزامن مع واجهة برمجة تطبيقات Web Animations (WAAPI) وواجهة برمجة تطبيقات CSS Animations الحالية لتمكين الصور المتحركة المستندة إلى الانتقال التصريحية.

المزيد من العروض التوضيحية والمراجع

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

إذا كنت مهتمًا بمعرفة المزيد عن الصور المتحركة المستندة إلى الانتقال الجديدة، يمكنك الاطّلاع على هذه المقالة ومحاضرة I/O 2023.