ما هي الميزات الجديدة في الصور المتحركة التي تعتمد على التمرير؟
الرسوم المتحركة التي تعتمد على التمرير هي طريقة لإضافة التفاعل والاهتمام البصري إلى موقعك الإلكتروني أو تطبيق الويب لديك، ويتم تشغيلها من خلال موضع تمرير المستخدم. وقد تكون هذه طريقة رائعة للحفاظ على تفاعل المستخدمين وجعل موقعك الإلكتروني أكثر جاذبية من الناحية المرئية.
في السابق، كانت الطريقة الوحيدة لإنشاء رسوم متحركة تعمل على التمرير هي الاستجابة لحدث التمرير في سلسلة التعليمات الرئيسية. وقد تسبب هذا في مشكلتين رئيسيتين:
- يتم تنفيذ الانتقال في سلسلة محادثات منفصلة، وبالتالي يؤدي إلى عرض أحداث الانتقال بشكل غير متزامن.
- تخضع الصور المتحركة لسلاسل المحادثات الرئيسية للإيقاف المؤقت.
يؤدي هذا إلى جعل إنشاء رسوم متحركة فعالة تعمل على التمرير ومتزامنة مع التمرير مستحيلاً أو صعبًا للغاية.
نقدِّم الآن مجموعة جديدة من واجهات برمجة التطبيقات التي تتيح استخدام الصور المتحركة التي تعرض الانتقال للأعلى أو للأسفل، والتي يمكنك استخدامها من 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 الجديدة للمخطط الزمني للرسوم المتحركة على تحويل الموضع تلقائيًا في نطاق التمرير إلى نسبة مئوية من التقدم، ما يؤدي إلى تنفيذ جميع المهام الصعبة.
الآن إليك الجزء المثير للاهتمام - لنفترض أنك نفذت عملية حسابية كبيرة للغاية على كلا الإصدارين من الموقع الإلكتروني والتي ستستهلك معظم موارد سلسلة المحادثات الرئيسية.
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 ويمكن أن يستجيب لتفاعلات المستخدم أثناء التمرير.
يختلف استخدام وحدة المعالجة المركزية (CPU) تمامًا في أدوات مطوّري البرامج، كما هو موضَّح في لقطات الشاشة التالية.
يعرض العرض التوضيحي التالي تطبيقًا للصور المتحركة التي تعتمد على الانتقال للأعلى أو للأسفل والتي أنشأها 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 API الحالية لتفعيل الصور المتحركة التعريفية التي تعتمد على التمرير.
المزيد من العروض التوضيحية والمراجع
يمكنك الاطّلاع على طرق التنفيذ المختلفة للصور المتحركة التي تعتمد على التمرير للأعلى أو للأسفل من خلال هذا الموقع الإلكتروني التجريبي، حيث يمكنك مقارنة العروض التوضيحية باستخدام واجهات برمجة التطبيقات الجديدة هذه من CSS وJavaScript.
لمعرفة المزيد من المعلومات حول الصور المتحركة الجديدة التي تعتمد على الانتقال للأعلى أو للأسفل، يمكنك الاطّلاع على هذه المقالة واللقاء الذي تناولنا فيه موضوع مؤتمر I/O لعام 2023.