מקרה לדוגמה על ביצועים של אנימציות מבוססות גלילה

Yuriko Hirota

מה חדש באנימציות שמתבססות על גלילה?

אנימציות שמופעלות על ידי גלילה הן דרך להוסיף אינטראקטיביות ועניין חזותי לאתר או לאפליקציית האינטרנט שלכם, שמופעל על ידי מיקום הגלילה של המשתמש. זוהי דרך מצוינת לשמור על עניין המשתמשים ולהפוך את האתר שלכם לאטרקטיבי יותר מבחינה חזותית.

בעבר, הדרך היחידה ליצור אנימציות שמתבססות על גלילה הייתה להגיב לאירוע הגלילה בשרשור הראשי. כתוצאה מכך נוצרו שתי בעיות עיקריות:

• הגלילה מתבצעת בשרשור נפרד, ולכן אירועי הגלילה מועברים באופן אסינכרוני.
• אנימציות בשרשור הראשי עשויות לגרום לתנודות לא רצויות.

לכן, קשה מאוד או בלתי אפשרי ליצור אנימציות יעילות שמבוססות על גלילה ומתואמות לגלילה.

אנחנו משיקים עכשיו קבוצה חדשה של ממשקי API לתמיכה באנימציות שמתבססות על גלילה, שאפשר להשתמש בהן מ-CSS או מ-JavaScript. ה-API מנסה להשתמש בכמה שפחות משאבים של הליבה הראשית, וכך קל יותר להטמיע אנימציות שמבוססות על גלילה, והן גם חלקות יותר. נכון לעכשיו, יש תמיכה ב-API של אנימציות שמבוססות על גלילה בדפדפנים הבאים:

תמיכה בדפדפנים

• 115
• 115
• 
• x

מקור

במאמר הזה נסביר על הגישה החדשה ונשווה אותה לטכניקה הקלאסית של JavaScript, כדי להראות כמה קל ליצור אנימציות גלילה חלקות עם ה-API החדש.

הערה: השיפורים הבאים בביצועים כתוצאה משימוש באנימציות שמבוססות על גלילה זמינים מגרסת Chrome 116.

אנימציות מבוססות-גלילה ב-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 + "%";
})

הדמו הבא מציג את אותו סרגל התקדמות באמצעות ה-API החדש עם 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, והיא יכולה להגיב לאינטראקציות של המשתמש בגלילה.

השימוש ב-CPU שונה לחלוטין ב-DevTools, כפי שמוצג בצילומי המסך הבאים.

הדגמה הבאה מראה יישום של אנימציה שמבוססת על גלילה שנוצרה על ידי 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. ה-API מנסה להשתמש במספר קטן ככל האפשר של משאבים של הליבה הראשית, וכך האנימציות חלקות הרבה יותר בהשוואה לגישה הקלאסית של JavaScript.

בנוסף, ממשק ה-API החדש הזה פועל בשילוב עם Web Animations API‏ (WAAPI) ו-CSS Animations API הקיימים, כדי לאפשר אנימציות רספונסיביות שמבוססות על גלילה.

הדגמות ומשאבים נוספים

אתם יכולים לבדוק את ההטמעות השונות של אנימציה שמבוססת על גלילה דרך אתר הדגמה הזה, שבו אפשר להשוות בין הדגמות באמצעות ממשקי ה-API החדשים האלה מ-CSS ומ-JavaScript.

מידע נוסף על האנימציות החדשות שמבוססות על גלילה זמין במאמר הזה ובהרצאה ב-I/O 2023.