Określ sposób łączenia wielu efektów animacji z kompozycją animacji

Zastąpić, dodać czy zgromadzić? To jest pytanie.

Bramus

Łączenie wielu efektów animacji

Właściwość animation-composition umożliwia kontrolowanie tego, co powinno się stać, gdy wiele animacji wpływa jednocześnie na tę samą właściwość.

Załóżmy, że do elementu zastosowano to podstawowe przekształcenie:

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

Załóżmy, że masz też ten zestaw klatek kluczowych:

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

Gdy zastosujesz te klatki kluczowe do elementu, transform w klatce kluczowej to zastąpi istniejący element transform. Jest to zachowanie domyślne.

Dzięki animation-composition możesz teraz kontrolować, co ma się wydarzyć zamiast domyślnego replace. Akceptowane wartości:

• replace: wartość efektu zastępuje wartość bazową. (domyślnie)
• add: wartość efektu jest dodawana do wartości bazowej.
• accumulate: wartość efektu jest łączona z wartością bazową.

Różnica między dodawaniem a gromadzeniem jest niewielka. Weźmy na przykład dwie wartości: blur(2) i blur(3). Po dodaniu do siebie dają blur(2) blur(3), ale po zsumowaniu dają blur(5).

Można to porównać do filiżanki herbaty. Po wlaniu do niego mleka:

• replace: herbata zostaje usunięta i zastąpiona mlekiem.
• add: mleko jest dodawane do filiżanki, ale pozostaje na wierzchu herbaty.
• accumulate: Mleko jest dodawane do herbaty i ponieważ oba płyny dobrze się mieszają.

Prezentacja

W poniższym przykładzie znajdują się 3 szare pola, do których zastosowano podstawowe symbole transform i animation.

Chociaż te pola mają tę samą animację, dają różne wyniki, ponieważ mają inny zestaw animation-composition:

Pierwsze pole jest ustawione na animation-composition: replace. Jest to zachowanie domyślne. W pozycji końcowej pierwotna wartość translateX(50px) rotate(45deg) dla transform jest po prostu zastępowana wartością translateX(100px).

Drugie pole jest ustawione na animation-composition: add. W pozycji końcowej do pierwotnego translateX(50px) rotate(45deg) dodawany jest znak translateX(100px), co daje translateX(50px) rotate(45deg) translateX(100px). Spowoduje to przesunięcie pola o 50 pikseli, obrócenie go o 45 stopni, a następnie przesunięcie o 100 pikseli.

Trzecie pole jest ustawione na animation-composition: accumulate. W pozycji końcowej wartość translateX(100px) zostanie matematycznie dodana do wartości translateX(50px) z pierwotnego przekształcenia, co da przekształcenie o wartości translateX(150px) rotate(45deg).

Zdjęcie: Alex Boyd, Unsplash