ציון האופן שבו אפקטים של אנימציה מרובים צריכים להיות מורכבים מהרכב אנימציה

להחליף, להוסיף או לצבור? זאת השאלה.

Bramus

שילוב של כמה אפקטים של אנימציה

המאפיין animation-composition מאפשר לקבוע מה יקרה כשכמה אנימציות ישפיעו על אותו מאפיין בו-זמנית.

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

transform-origin: 50% 50%;
transform: translateX(50px) rotate(45deg);

וגם את קבוצת מסגרות המפתח הזו:

@keyframes adjust {
  to {
    transform: translateX(100px);
  }
}

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

עם animation-composition, אתם יכולים עכשיו לשלוט במה שקורה במקום ברירת המחדל replace. הערכים הקבילים הם:

• ‫replace: ערך ההשפעה מחליף את ערך הבסיס. (ברירת מחדל)
• ‫add: ערך ההשפעה מתווסף לערך הבסיסי.
• ‫accumulate: ערך ההשפעה משולב עם ערך הבסיס.

ההבדל בין הוספה לבין הצטברות הוא קטן. לדוגמה, ניקח את שני הערכים blur(2) ו-blur(3). כשמחברים את המספרים האלה מקבלים blur(2) blur(3), אבל כשמצטברים מקבלים blur(5).

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

• ‫replace: התה מוסר ומוחלף בחלב.
• ‫add: החלב מתווסף לכוס, אבל הוא נשאר בשכבה מעל התה.
• ‫accumulate: מוסיפים את החלב לתה, ומכיוון ששניהם נוזלים, הם מתערבבים היטב.

הדגמה (דמו)

בהדגמה שלמטה יש שלוש תיבות אפורות שמוחל עליהן הבסיס transform ו-animation.

למרות שהתיבות האלה כוללות את אותה אנימציה, הן מניבות תוצאה שונה כי יש להן קבוצת animation-composition שונה:

התיבה הראשונה מוגדרת ל-animation-composition: replace. זו התנהגות ברירת המחדל. במיקום הסופי, הערך המקורי translateX(50px) rotate(45deg) של transform פשוט מוחלף ב-translateX(100px).

התיבה השנייה מוגדרת ל-animation-composition: add. במיקום הסופי, translateX(100px) מתווסף ל-translateX(50px) rotate(45deg) המקורי, והתוצאה היא translateX(50px) rotate(45deg) translateX(100px). הפעולה הזו תזיז את התיבה ב-50px, תסובב אותה ב-45deg ואז תזיז אותה ב-100px.

התיבה השלישית מוגדרת ל-animation-composition: accumulate. במיקום הסופי, הערך translateX(100px) יתווסף מתמטית לערך translateX(50px) מהטרנספורמציה המקורית, וכתוצאה מכך תתבצע טרנספורמציה של translateX(150px) rotate(45deg).

תמונה מאת Alex Boyd ב-Unsplash