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

Yuriko Hirota

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

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

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

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

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

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

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

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

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

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

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

كما توقعت، أصبح إصدار جافا سكريبت الكلاسيكي رديًا وبطيء بسبب تقاطع موارد سلسلة التعليمات الرئيسية. من ناحية أخرى، لا يتأثر إصدار 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 API (WAAPI) وCSS Animations API الحاليتَين لإتاحة صور متحركة توضيحية تستند إلى التمرير.

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

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

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