איך יוצרים אנימציות CSS עם ביצועים גבוהים

Kayce Basques

Rachel Andrew

במדריך הזה מוסבר איך ליצור אנימציות CSS בעלות ביצועים גבוהים.

אפשר לעיין בקטע למה חלק מהאנימציות איטיות? כדי לקבל מידע נוסף על התיאוריה שמאחורי ההמלצות האלה.

תאימות דפדפן

כל מאפייני ה-CSS שמדריך זה ממליץ לכלול בהם מתאימים לדפדפנים שונים תמיכה.

transform

תמיכה בדפדפן

• 36
• 12
• 16
• 9

מקור

opacity

תמיכה בדפדפן

• 1
• 12
• 1
• 2

מקור

will-change

תמיכה בדפדפן

• 36
• 79
• 36
• 9.1

מקור

העברת רכיב

כדי להעביר רכיב, צריך להשתמש בערכי מילת המפתח translate או rotation של transform.

לדוגמה, כדי להחליק את הפריט לתצוגה, אפשר להשתמש ב-translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

אפשר להשתמש ב-rotate כדי לסובב אלמנטים. בדוגמה הבאה מתבצעת רוטציה של רכיב 360 מעלות.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

שינוי גודל של רכיב

כדי לשנות גודל של רכיב, צריך להשתמש בערך scale של מילת המפתח נכס transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

שינוי החשיפה של רכיב

כדי להציג או להסתיר רכיב, אפשר להשתמש בסמל opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

הערה: ב-Animista אפשר למצוא דוגמאות להעתקה והדבקה של אנימציות שונות.

נמנעים ממאפיינים שמפעילים פריסה או צבע

לפני שמשתמשים במאפיין CSS כלשהו לאנימציה (מלבד transform ו-opacity), לקבוע את ההשפעה של הנכס על צינור עיבוד הנתונים של העיבוד. אין להשתמש בנכסים שמפעילים פריסה או צבע, אלא אם הם הכרחיים.

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

אילוץ יצירת שכבות

כמו שמוסבר במאמר למה חלק מהאנימציות איטיות?, הצבת רכיבים בשכבה חדשה מאפשרת לדפדפן לצבוע אותם מחדש בלי שיהיה צורך לצבוע מחדש את שאר הפריסה.

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

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

ב-CSS, אפשר להחיל את will-change על כל בורר:

body > .sidebar {
  will-change: transform;
}

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

הערה: מידע נוסף ודוגמאות לשימוש ב-will-change זמינים במאמר כל מה שצריך לדעת על נכס will-change של שירות ה-CSS.

אם מאלצים יצירת שכבות בדפדפן שלא תומך ב-will-change (כנראה Internet Explorer), אפשר להגדיר את transform: translateZ(0).

ניפוי באגים באנימציות איטיות או איטיות

לכלי הפיתוח ל-Chrome ולכלי הפיתוח ל-Firefox יש המון כלים שיעזרו לכם להבין למה האנימציות איטיות או איטיות.

בדיקה אם אנימציה מפעילה פריסה

אנימציה שזזה רכיב באמצעות משהו שהוא לא transform היא יהיו איטיים. הדוגמה הבאה מציגה השוואה בין אנימציה באמצעות transform לאנימציה באמצעות top ו-left.

מה אסור לעשות

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

מה מותר לעשות

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

אפשר לבדוק את זה בשתי הדוגמאות הבאות מהתקלה: ולבדוק את הביצועים באמצעות כלי פיתוח.

• לפני.
• אחרי.

כלי פיתוח ל-Chrome

1. פותחים את החלונית ביצועים.
2. תיעוד ביצועים של סביבת זמן ריצה בזמן האנימציה.
3. בודקים את הכרטיסייה סיכום.

אם אתם רואים ערך שאינו אפס בשדה רינדור בכרטיסייה סיכום, יכול להיות סימן שהאנימציה גורמת לדפדפן להפעיל את הפריסה.

סמל animation-with-top-left גורמת לפעולת עיבוד התמונה לדוגמה.

המודל אנימציה עם טרנספורמציה לא גורמת לפעולת רינדור.

כלי פיתוח ל-Firefox

בכלי הפיתוח ל-Firefox, יש Waterfall יכול לעזור לך להבין היכן הדפדפן מבלה זמן.

1. פותחים את החלונית ביצועים.
2. מתחילים לתעד את הביצועים בזמן שהאנימציה מתבצעת.
3. מפסיקים את ההקלטה ובודקים את הכרטיסייה Waterfall.

אם מופיעות רשומות של חישוב מחדש של סגנון, כלומר, הדפדפן צריך לחזור Waterfall בתהליך רינדור כדי לעבד את האנימציה.

בדיקה אם יש ירידה בכמות הפריימים

1. פותחים את הכרטיסייה רינדור בכלי הפיתוח ל-Chrome.
2. מפעילים את תיבת הסימון מד FPS.
3. צפייה בערכים בזמן האנימציה פועלת.

שימו לב לתווית Frames בחלק העליון של ממשק המשתמש של מד FPS. כאן מוצגים ערכים כמו 50% 1 (938 m) dropped of 1878. עם ביצועים גבוהים לאנימציה יש אחוז גבוה, למשל 99%, כלומר ,מעט פריימים יורד והאנימציה נראית חלקה.

סמל animation-with-top-left דוגמה גורמת להשמטה של 50% מהפריימים

אנימציה עם טרנספורמציה היא גורמת להשמטה של רק 1% מהפריימים.

איך בודקים אם אנימציה גורמת להפעלה של צבע

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

כלי פיתוח ל-Chrome

1. פותחים את הכרטיסייה רינדור בכלי הפיתוח ל-Chrome.
2. בוחרים באפשרות הבהוב גוון.
3. מזיזים את הסמן ברחבי המסך.

בדוגמה הזו של מפות Google, אפשר לראות את האלמנטים שנצבעים מחדש.

אם כל המסך מהבהב או אזורים מודגשים שאתם לא חושבים עליהם. צריכים להשתנות, ולחקור לעומק.

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

כלי פיתוח ל-Firefox

1. פותחים את ההגדרות ומוסיפים לחצן של ארגז הכלים עבור מחליפים את המצב של הבהוב צבע.
2. בדף שרוצים לבדוק, מפעילים את הלחצן ומזיזים את העכבר או גוללים כדי לראות את האזורים המודגשים.

סיכום

אם אפשר, כדאי להגביל את האנימציות לopacity ולtransform כדי להמשיך אנימציות בשלב המורכב של נתיב העיבוד. שימוש בכלי הפיתוח כדי לבדוק איזה שלב בנתיב מושפע מהאנימציות שלכם.

אפשר להשתמש בכלי לניתוח של צבע כדי לראות אם פעולות של צבע מיושמות במיוחד יקרות. אם מוצאים משהו, אפשר לבדוק אם נכס CSS אחר נותן אותו מראה ותחושה עם ביצועים טובים יותר.

כדאי להשתמש במאפיין will-change באופן מוגבל, ורק אם נתקלתם בבעיה בביצועים.