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

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);
}

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

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

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.