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

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

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

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

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

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

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

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

השימוש במעבד (CPU) שונה לחלוטין בכלי הפיתוח, כפי שמוצג בצילומי המסך הבאים.

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

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

עוד הדגמות ומקורות מידע

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

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