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

Yuriko Hirota

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

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

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

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

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

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

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

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

עכשיו מגיע החלק המעניין – נניח שהטמעתם חישוב כבד מאוד בשתי הגרסאות של האתר, שינצל את רוב המשאבים של ה-main thread.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

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

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

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

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

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