סיכום: אנחנו מעדכנים את יכולות האצת החומרה של Chromium באופן אוטומטי לגבי אנימציות SVG, טרנספורמציות שמבוססות על אחוזים, ובקרוב גם אנימציות של צבע רקע ושל נתיב חיתוך.
כשמדברים על ביצועי אנימציה באינטרנט, סביר להניח שתתקלו במונחים 'אנימציה שמואצת בחומרה' ו'אנימציה שמואצת ב-GPU'. אבל מה המשמעות שלהם? סגנונות במהירות משופרת באמצעות חומרה הם סגנונות שמשתמשים ב-GPU (מעבד גרפי) במקום ב-CPU (מעבד מרכזי) כדי ליצור עיבוד גרפי של סגנונות חזותיים. הסיבה לכך היא שה-GPU יכול ליצור גרפיקה של שינויים בדף אינטרנט מהר יותר מה-CPU.
שימוש ב-GPU כדי להעביר אנימציות ומעברים עם עומס גרפי גבוה מאפשר לכם ליהנות מחוויית צפייה חלקה יותר, עם פחות תנודות, כי האנימציות האלה לא מושפעות מהחוט הראשי. כשמסירים אותן מהשרשור הראשי, האנימציות עוקפות את שכבת הסקריפטים הפעילים האחרים שפועלים בדף, שעלולה להאט את התצוגה החזותית וליצור תנודות לא רצויות.
הפעלת אנימציות שמואצות בחומרה
אנימציות במהירות משופרת באמצעות חומרה מורכבות משכבות, ומאפשרות למפתחים ליצור אנימציות חלקות בקצב של 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. האינדיקטורים האלה מציינים שפעולה מתבצעת בשרת בזמן שהמשתמש ממתין לתגובה. במקרה שמוצג כאן, התגובה תהיה טעינת תוצאות נוספות בסרגל הצד.
כשפותחים את DevTools, אפשר להתחיל ליצור פרופיל ולראות את ההבדלים בין חוויית אנימציה שמבוססת על מעבד (CPU) לבין חוויית אנימציה שמבוססת על האצת GPU.
אפשר לראות שבצד ימין (Chromium 87), הצביעה מחדש מתרחשת בכל פעם שהאנימציה של גלגל ההזזה פועלת (כל הזמן). בצד שמאל אין צביעה מחדש (Chromium 89 ו-Firefox). אפשר לבדוק את זה בחלונית ה-Rendering של DevTools, כשמפעילים את התכונה Paint flashing.
אם נתבונן מקרוב בחלונית 'ביצועים', נוכל לראות שוב את ההשפעה הזו ואת האופן שבו היא משפיעה על הביצועים הכוללים של נכס האינטרנט. כך תוכלו לחסוך את זמן העיבוד והצביעה של ההנפשה, וכתוצאה מכך ליהנות מהנפשות חלקות יותר ומאפליקציות עם ביצועים טובים יותר. Facebook לא תתחיל לשלוח את הטען הזה שמבוסס על SVG עד שתהיה תמיכה רחבה יותר בדפדפנים ב-SVG שמואץ בחומרה, אבל הוא יאפשר גמישות רבה יותר מבחינת עיצוב, שינוי קנה מידה ודרישות רזולוציה, וגם תחזוקה קלה יותר.
אנימציות של אחוזים
צוות האינטראקציות גם משיקים תמיכה באנימציות של טרנספורמציה לפי אחוזים ב-Chromium 89. אנימציות שמבוססות על אחוזים מתארות אינטראקציות שכוללות תנועה שמבוססת על אחוזים. לדוגמה, אפשר להגדיל משהו ב-20% או להזיז תפריט צד רספונסיבי מחוץ למסך באמצעות קוד כמו translateX: -100%.
אנימציות מסוג זה של ממשק המשתמש נפוצות יחסית, אבל כרגע הן לא מנצלות את האצת החומרה כי בעבר לא הצלחנו ליצור אנימציות כאלה. אחוזים בטרנספורמציות תלויים בגודל התיבה (כלומר הפריסה), אבל עכשיו, כל עוד גודל הפריסה לא משתנה בכל פריים, הדפדפן יכול לחשב מראש את ערכי הטרנספורמציה המוחלטים ולהריץ אותם כאילו המפתח סיפק ערכי פיקסלים. החדשות הטובות הן שצוות Chromium עובד על התכונה הזו, ובקרוב סוגים כאלה של אנימציות יתבצעו באופן אוטומטי ויקבלו האצה בחומרה.
מה השלב הבא?
האנימציות המעודכנות האלה יאפשרו לכם לעצב את האתר בצורה חלקה יותר. כמו שהוספנו למעלה, הצוות תמיד מחפש את הצרכים הבאים באינטרנט. בשלב הזה, אנחנו מתכננים להמיר את background-color ו-clip-path כך שישתמשו באופן אוטומטי בהאצת חומרה בגרסאות עתידיות של Chromium.
background-color הוא בעדיפות גבוהה בגלל מספר השימושים הגבוה שלו במעברים ובאפקטים, ו-clip-path מאפשר להשתמש באפקטי מעבר עם ביצועים טובים יותר ברחבי האינטרנט. כשהביצועים משלבים אינטראקטיביות, כולם מרוויחים.
תמונת השער: Siora Photography עבור Unsplash.