אמ;לק
החל מגרסה 53 של Chrome, כל התוכן נסרק מחדש כשקנה המידה של הטרנספורמציה משתנה, אם אין לו מאפיין CSS will-change: transform. במילים
אחרות, המשמעות של will-change: transform היא "אני רוצה ליצור אנימציה במהירות".
הדבר רלוונטי רק לטרנספורמציות סולמות שמתבצעות באמצעות מניפולציה של הסקריפט, ולא חל על אנימציות CSS או אנימציות באינטרנט.
פירוש הדבר הוא שסביר להניח שהאתר יקבל תוכן במראה טוב יותר, אבל ייתכן שהוא גם יהיה איטי יותר ללא שינויים פשוטים שמפורטים בהמשך.
השלכות על מפתחי אתרים
במסגרת השינוי הזה, אפשר לחשוב על will-change: transform כאילוץ של רסטר של התוכן ליצירת מפת סיביות (bitmap) קבועה, שלעולם לא משתנה בעקבות עדכוני טרנספורמציה. כך מפתחים יכולים להאיץ את המהירות של טרנספורמציה של אנימציות במפת הסיביות הזו, כמו להזיז אותה, לסובב אותה או לשנות את גודלה.
אין לנו הבחנה בין קנה מידה לבין טרנספורמציות תרגום.
הפעולות המומלצות
מוסיפים will-change: transform לרכיבים כשצריך לשנות מהירויות אנימציה גבוהות מאוד (במילים אחרות, 60fps), וגם צפוי שיצירת רסטר של הרכיב באיכות גבוהה בכל פריים לא תהיה מהירה מספיק. אחרת, יש להימנע מ-will-change: transform.
כדי לשפר את האיזון בין איכות הביצועים, כדאי להוסיף will-change:
transform כשהאנימציות מתחילות ולהסיר אותן כשהן מסתיימות. עם זאת, חשוב לזכור שלרוב יש עלות ביצועים חד-פעמית גדולה כתוצאה מהוספה או הסרה של will-change: transform.
שיקולים נוספים להטמעה
הסרת will-change: transform גורמת לרמיקס מחדש של תוכן בקנה מידה רחב, אבל רק בפריים האנימציה הבא (באמצעות requestAnimationFrame)). לכן, אם יש לכם שכבה שכוללת will-change: transform ואתם רוצים להפעיל רסטר מחדש אבל אחר כך להמשיך באנימציה, תצטרכו להסיר את השינוי: 'טרנספורמציה', ואז להוסיף אותה מחדש ב-requestAnimationFrame() callback.
אם בשלב כלשהו במהלך אנימציה תרצו לבצע רסטר בקנה המידה הנוכחי, תוכלו להשתמש בשיטה שלמעלה כדי להסיר אותם במסגרת אחת ולהוסיף מחדש את will-change:
transform בפריים הבא.
כתוצאה מכך, יכולה להיות תופעת לוואי לכך שהתוכן מאבד את השכבה המורכבת שלו, וההמלצה שלמעלה תהיה מעט יקרה. אם זו בעיה, מומלץ להוסיף גם את transform: translateZ(0) לתוכן כדי לוודא שהוא יישאר בשכבה מורכבת במהלך הפעולה הזו.
סיכום ההשפעה
לשינוי הזה יש השלכות על איכות התוכן המוצג, על הביצועים ועל בקרת המפתחים.
- איכות התוכן שעבר רינדור: פלט שעבר רינדור תמיד יהיה חד כברירת מחדל של רכיבים עם אנימציה של קנה מידה משתנה.
- ביצועים: יצירת אנימציה של הטרנספורמציה כאשר
will-change: transformנמצאת, תהיה מהירה. - שליטה למפתחים: המפתחים יכולים לבחור בין איכות ומהירות, בהתאם לרכיב ולמסגרת לכל אנימציה, על ידי הוספה והסרה
will-change: transform.
ניתן למצוא פרטים נוספים במסמך העיצוב המקושר שלמעלה.
דוגמאות
בדוגמה הזאת, האלמנט עם המזהה remainsBlurry יישאר מטושטש אחרי השינוי, אבל האלמנט עם המזהה noLongerBlurry יהיה חד. הסיבה לכך היא שלמערכת הקודמת יש נכס CSS will-
change: transform.
דוגמאות לשינוי אנימציות בקנה מידה של אפליקציות אמיתיים
- מבאג זה: Zoom tiger
- מפות Google בנייד (maps.google.com) - שינוי מרחק התצוגה של המפה
- Google Maps Lite במחשב
- מפת המושבים של Ticketmaster