סיכום: Chromium מעדכן באופן אוטומטי את יכולות האצת החומרה של אנימציות SVG, טרנספורמציות מבוססות-אחוזים ובקרוב גם אנימציות של צבע רקע ואנימציות של קליפים.
כשמדובר בביצועי אנימציה באינטרנט, סביר להניח שהמונחים 'אנימציה מואצת' ו'שיפור מהירות GPU' יופיעו. אבל מה המשמעות שלהם? סגנונות עם האצת חומרה הם אלו שמשתמשים ב-GPU (יחידת עיבוד גרפי) במקום במעבד (CPU) (יחידת עיבוד מרכזית) כדי לעבד סגנונות ויזואליים. הסיבה לכך היא שהמעבד הגרפי יכול לעבד שינויים חזותיים בדף אינטרנט מהר יותר מהמעבד.
השימוש ב-GPU כדי להוריד מעברים ואנימציות שצורכים הרבה גרפיקה, פירושו שהרכיבים החזותיים חלקים יותר ופחות בעיות בממשק, כי ה-thread הראשי לא משפיע על האנימציות האלה. על ידי הוצאת האנימציות מהשרשור הראשי, האנימציות עוקפות את שכבת הסקריפטים הפעילים האחרים שרצים בדף, דבר שגורם להאטת הרכיבים החזותיים וליצירת בעיות בממשק (jank).
הפעלת אנימציות שמואצות באמצעות חומרה
אנימציות בהאצה באמצעות חומרה מורכבות כשכבות ועוזרות למפתחים ליצור אנימציות חלקות ברזולוציית 60 FPS (פריימים לשנייה) כדי לשפר את ביצועי העיבוד החזותי. בשלב הזה יש כמה דרכים לציין ולהפעיל אנימציות ומעברים עם האצת חומרה באינטרנט:
- אפשר להשתמש בפונקציות
transformשל CSS או להעביר את הערכיםopacityאוfilter - מוסיפים את המאפיין
will-changeלרכיב. - יצירת שרטוט על קנבס עם אנימציה באמצעות
OffscreenCanvas - יצירת שרטוט בתלת-ממד של WebGL
opacity, filter ו-transform, אבל בקרוב – background-color ו-clip-path יצטרפו לרשימה. מה עוד מאיץ החומרה כברירת מחדל ב-Chromium? יש כמה דברים שצפויים להתפתח, כולל אנימציות SVG, שהמפתחים ביקשו בקפדנות.
אנימציות SVG עם האצת חומרה
SVG הוא תוספת מעולה לכל אתר, ועכשיו האינטראקציות האלה עם SVG יכולות להניב ביצועים טובים יותר. החל מגרסה 89 של Chromium, Chrome ישפר את דפדפנים כמו Firefox כדי לאפשר שיפור מהירות באמצעות חומרה כברירת מחדל באנימציות SVG. המפתח, מה אתם צריכים לעשות? כלום – הפעולה הזו תחול באופן אוטומטי על אנימציות SVG ב-Chromium מגרסה 89 ואילך.
דוגמה
נבחן את ההבדלים בין אנימציית SVG עם האצת חומרה מופעלת ובלי האצת חומרה. מדדי טעינה הם רכיבים נפוצים בממשק המשתמש, כמו האינדיקטור שמופיע ב-facebook.com. האינדיקטורים האלה מרמזים על העבודה שמתבצעת בשרת בזמן שהמשתמש ממתין לתגובה. במקרה שמוצג כאן, התגובה אמורה לטעון תוצאות נוספות בסרגל הצד.
כשאנחנו פותחים את כלי הפיתוח, אנחנו יכולים להתחיל ליצור פרופילים ולראות את ההבדלים בין חוויית מעבד (CPU) לבין חוויית אנימציה המואצת על ידי GPU.
אפשר לראות בצד שמאל (Chromium 87), צביעה מחדש מתרחשת בכל פעם שהאנימציה של הספינר (הספינה) מופעלת באופן רציף. בצד שמאל אין צביעה מחדש (Chromium 89 ו-Firefox). אפשר לבדוק את זה בחלונית העיבוד של כלי הפיתוח, כשמפעילים את הבהוב צבע.
במבט מקרוב על חלונית הביצועים אפשר לראות שוב את האפקט הזה, ואת ההשפעה שלו על הביצועים הכוללים של נכס האינטרנט. כדאי להימנע מעיבוד של זמן ציור ומזמן ציור של כל האנימציה, כלומר אנימציות חלקות יותר ואפליקציות שמניבות ביצועים טובים יותר. Facebook לא תשלח את הטוען הזה שמבוסס על SVG עד שהתמיכה של הדפדפן ב-SVG עם האצת חומרה תהיה גדולה יותר, אבל היא תאפשר יותר גמישות מבחינת דרישות העיצוב, התאמה לעומס (scaling) ותחזוקה קלה יותר.
אחוז אנימציות
צוות Interactions (אינטראקציות) מספק גם תמיכה באנימציות באחוזים של טרנספורמציה ב-Chromium 89. אנימציות שמבוססות על אחוזים מתארות אינטראקציות שכוללות תנועה מבוססת אחוזים. לדוגמה, אפשר להגדיל משהו ב-20%, או להחליק תפריט רספונסיבי של סרגל צד מחוץ למסך באמצעות משהו כמו translateX: -100%.
סוגים אלה של אנימציות בממשק המשתמש הם נפוצים יחסית, אך כרגע לא מנצלים את היתרונות של האצת חומרה, מפני שבעבר לא הצלחנו להרכיב אנימציות כאלו. האחוזים בהמרות תלויים בגודל התיבה (כלומר הפריסה), אבל עכשיו, כל עוד גודל הפריסה לא משתנה בכל פריים, הדפדפן יכול לחשב מראש את ערכי הטרנספורמציה המוחלטים ולהריץ אותם כאילו המפתח סיפק ערכי פיקסלים. החדשות הטובות הן שצוות Chromium עובד על התכונה הזו, ובקרוב סוגי האנימציות האלו יעברו עיבוד אוטומטי וההאצה באמצעות חומרה.
מה השלב הבא?
האנימציות המעודכנות האלה יהפכו את העיצוב באינטרנט לפשוט יותר. וכפי שצוין למעלה, הצוות תמיד מחפש את מה שנחוץ לו בעתיד. בשלב הזה, אנחנו מתכננים להמיר את background-color ואת clip-path כדי להשתמש באופן אוטומטי בהאצת חומרה בגרסאות עתידיות של Chromium.
background-color נמצא בעדיפות גבוהה בגלל מספר השימוש הגבוה של המעברים והאפקטים, ו-clip-path מאפשר אפקטים של מעבר שמניבים ביצועים הרבה יותר טובים באינטרנט. כשביצועים בשילוב עם אינטראקטיביות, כולם מרוויחים!
תמונת שער: Siora Photography עבור Un אימייל.