مشخص کنید که چگونه جلوه های انیمیشن چندگانه باید با انیمیشن-ترکیب ترکیب شوند

جایگزین، اضافه یا انباشته شود؟ این سوال است.

براموس

ترکیب چندین افکت انیمیشن

ویژگی animation-composition اجازه می دهد تا کنترل کنید که چه اتفاقی باید بیفتد وقتی چندین انیمیشن به طور همزمان روی یک ویژگی یکسان تأثیر می گذارد.

پشتیبانی مرورگر

  • کروم: 112.
  • لبه: 112.
  • فایرفاکس: 115.
  • سافاری: 16.

منبع

فرض کنید این تبدیل پایه روی یک عنصر اعمال شده است:

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) از تبدیل اصلی اضافه می‌شود، که منجر به تبدیل translateX(150px) rotate(45deg) می‌شود.

عکس الکس بوید در Unsplash