להחליף, להוסיף או לצבור? זאת השאלה.
שילוב של כמה אפקטים של אנימציה
המאפיין 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).