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

Yuriko Hirota

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

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

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

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

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

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

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

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 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!