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