ترکیب چندین جلوه انیمیشن با 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) می‌شود. این کار کادر را 50 پیکسل جابجا می‌کند، سپس آن را 45 درجه می‌چرخاند و در نهایت 100 پیکسل جابجا می‌کند.

کادر سوم روی animation-composition: accumulate تنظیم شده است. در موقعیت پایانی خود، translateX(100px) به صورت ریاضی به translateX(50px) از transform اصلی اضافه می‌شود و در نتیجه تبدیل translateX(150px) rotate(45deg) حاصل می‌شود.