עדכונים ביכולות של אנימציה עם האצת חומרה

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

כשמדובר בביצועי אנימציה באינטרנט, סביר להניח שהמונחים 'אנימציה מואצת' ו'שיפור מהירות GPU' יופיעו. אבל מה המשמעות שלהם? סגנונות עם האצת חומרה הם אלו שמשתמשים ב-GPU (יחידת עיבוד גרפי) במקום במעבד (CPU) (יחידת עיבוד מרכזית) כדי לעבד סגנונות ויזואליים. הסיבה לכך היא שהמעבד הגרפי יכול לעבד שינויים חזותיים בדף אינטרנט מהר יותר מהמעבד.

השימוש ב-GPU כדי להוריד מעברים ואנימציות שצורכים הרבה גרפיקה, פירושו שהרכיבים החזותיים חלקים יותר ופחות בעיות בממשק, כי ה-thread הראשי לא משפיע על האנימציות האלה. על ידי הוצאת האנימציות מהשרשור הראשי, האנימציות עוקפות את שכבת הסקריפטים הפעילים האחרים שרצים בדף, דבר שגורם להאטת הרכיבים החזותיים וליצירת בעיות בממשק (jank).

הפעלת אנימציות שמואצות באמצעות חומרה

אנימציות בהאצה באמצעות חומרה מורכבות כשכבות ועוזרות למפתחים ליצור אנימציות חלקות ברזולוציית 60 FPS (פריימים לשנייה) כדי לשפר את ביצועי העיבוד החזותי. בשלב הזה יש כמה דרכים לציין ולהפעיל אנימציות ומעברים עם האצת חומרה באינטרנט:

  • אפשר להשתמש בפונקציות transform של CSS או להעביר את הערכים opacity או filter
  • מוסיפים את המאפיין will-change לרכיב.
  • יצירת שרטוט על קנבס עם אנימציה באמצעות OffscreenCanvas
  • יצירת שרטוט בתלת-ממד של WebGL
צוות הרינדור ב-Chromium עוקב באופן רציף אחרי השימוש במאפיינים המונפשים ביותר כדי להחליט מה צריך לעשות כדי לשפר את המהירות באמצעות חומרה. נכסי ה-CSS הנוכחיים עם שיפור המהירות באמצעות חומרה כברירת מחדל כוללים כרגע רק את opacity, filter ו-transform, אבל בקרוב – background-color ו-clip-path יצטרפו לרשימה.

מה עוד מאיץ החומרה כברירת מחדל ב-Chromium? יש כמה דברים שצפויים להתפתח, כולל אנימציות SVG, שהמפתחים ביקשו בקפדנות.

אנימציות SVG עם האצת חומרה

SVG הוא תוספת מעולה לכל אתר, ועכשיו האינטראקציות האלה עם SVG יכולות להניב ביצועים טובים יותר. החל מגרסה 89 של Chromium, Chrome ישפר את דפדפנים כמו Firefox כדי לאפשר שיפור מהירות באמצעות חומרה כברירת מחדל באנימציות SVG. המפתח, מה אתם צריכים לעשות? כלום – הפעולה הזו תחול באופן אוטומטי על אנימציות SVG ב-Chromium מגרסה 89 ואילך.

דוגמה

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

בממשק המשתמש של סרגל הצד של Facebook מוצגת טעינה מעגלית בזמן טעינת תוכן נוסף.

כשאנחנו פותחים את כלי הפיתוח, אנחנו יכולים להתחיל ליצור פרופילים ולראות את ההבדלים בין חוויית מעבד (CPU) לבין חוויית אנימציה המואצת על ידי GPU.

חלונית ביצועים עם הבהוב צבע מופעל
שמאל: Chromium 88. ימין: Chromium 89, עם האצת חומרה לאנימציות SVG. אפשר לצפות בהדגמה של Benoit Girard לגבי JSFiddle.

אפשר לראות בצד שמאל (Chromium 87), צביעה מחדש מתרחשת בכל פעם שהאנימציה של הספינר (הספינה) מופעלת באופן רציף. בצד שמאל אין צביעה מחדש (Chromium 89 ו-Firefox). אפשר לבדוק את זה בחלונית העיבוד של כלי הפיתוח, כשמפעילים את הבהוב צבע.

חלונית ביצועים שמוצגת בה רינדור
שמאל: Chromium 88. ימין: Chromium 89, עם האצת חומרה לאנימציות SVG. אפשר לצפות בהדגמה של Benoit Girard לגבי JSFiddle.

במבט מקרוב על חלונית הביצועים אפשר לראות שוב את האפקט הזה, ואת ההשפעה שלו על הביצועים הכוללים של נכס האינטרנט. כדאי להימנע מעיבוד של זמן ציור ומזמן ציור של כל האנימציה, כלומר אנימציות חלקות יותר ואפליקציות שמניבות ביצועים טובים יותר. Facebook לא תשלח את הטוען הזה שמבוסס על SVG עד שהתמיכה של הדפדפן ב-SVG עם האצת חומרה תהיה גדולה יותר, אבל היא תאפשר יותר גמישות מבחינת דרישות העיצוב, התאמה לעומס (scaling) ותחזוקה קלה יותר.

אחוז אנימציות

צוות Interactions (אינטראקציות) מספק גם תמיכה באנימציות באחוזים של טרנספורמציה ב-Chromium 89. אנימציות שמבוססות על אחוזים מתארות אינטראקציות שכוללות תנועה מבוססת אחוזים. לדוגמה, אפשר להגדיל משהו ב-20%, או להחליק תפריט רספונסיבי של סרגל צד מחוץ למסך באמצעות משהו כמו translateX: -100%.

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

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

מה השלב הבא?

האנימציות המעודכנות האלה יהפכו את העיצוב באינטרנט לפשוט יותר. וכפי שצוין למעלה, הצוות תמיד מחפש את מה שנחוץ לו בעתיד. בשלב הזה, אנחנו מתכננים להמיר את background-color ואת clip-path כדי להשתמש באופן אוטומטי בהאצת חומרה בגרסאות עתידיות של Chromium.

background-color נמצא בעדיפות גבוהה בגלל מספר השימוש הגבוה של המעברים והאפקטים, ו-clip-path מאפשר אפקטים של מעבר שמניבים ביצועים הרבה יותר טובים באינטרנט. כשביצועים בשילוב עם אינטראקטיביות, כולם מרוויחים!

transition.style: אתר הדגמה שמדגיש את האפקטים של המעבר ב-CSS של אדם ארגייל.

תמונת שער: Siora Photography עבור Un אימייל.