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

Yuriko Hirota
Yuriko Hirota

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

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

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

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

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

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

توافق المتصفّح

  • Chrome: 115
  • الحافة: 115.
  • Firefox: خلف علامة
  • Safari: غير متوافق

المصدر

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

واجهة برمجة التطبيقات CSS API للرسومات المتحرّكة المستندة إلى الانتقال إلى أعلى الصفحة أو أسفلها مقارنةً بواجهة برمجة التطبيقات 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 API الجديدة للصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل مقارنةً بواجهة JavaScript API الكلاسيكية

لا تقتصر مزايا واجهة برمجة التطبيقات الجديدة على 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.