שילוב של כמה אפקטים של אנימציה באמצעות animation-composition

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, מסובבת אותה ב-45 מעלות ואז מעבירה אותה ב-100px.

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