Easing w animacji: ease in, ease out i krzywe
Easing to sposób, w jaki animowana wartość przyspiesza i zwalnia między klatkami kluczowymi, zamiast poruszać się ze stałą prędkością. Ease sprawia, że ruch zaczyna się łagodnie, kończy łagodnie albo jedno i drugie — tak jak naprawdę poruszają się obiekty mające masę — i jest ustalany przez krzywą interpolacji między dwoma kluczami.
Autor: Mixos
Krótka odpowiedź
Easing steruje przyspieszaniem między klatkami kluczowymi. Ruch liniowy porusza się ze stałą prędkością i zatrzymuje gwałtownie; ruch z easingiem przyspiesza od jednego klucza i zwalnia do następnego. Ponieważ narzędzia różnią się co do znaczenia „ease in”, najjaśniej mówić wolny start (przyspieszenie) lub wolny koniec (zwalnianie). Uchwyty bezier na każdym kluczu dokładnie kształtują ease, a uchwyt pociągnięty poza wartość klucza tworzy overshoot.
Dlaczego stała prędkość wygląda źle
Prawdziwe obiekty mają masę. Samochód nie osiąga prędkości przelotowej w chwili ruszenia, a drzwi nie zatrzymują się nagle w ościeżnicy. Ruch, który zaczyna się i kończy z pełną prędkością, wygląda mechanicznie, nieważko lub komputerowo, nawet jeśli widz nie umie powiedzieć dlaczego.
Animatorzy Disneya nazwali tę zasadę slow in and slow out — jedna z dwunastu zasad animacji opisanych w The Illusion of Life. Więcej rysunków blisko początku i końca ruchu, a mniej w środku, sprawia, że przyspiesza i zwalnia. W oprogramowaniu 3D ten sam efekt daje krzywa między kluczami, a nie dodatkowe rysunki.
Ease in i ease out znaczą rzeczy przeciwne
To najczęstsze źródło zamieszania i nie Twoja wina. W CSS i szeroko kopiowanych funkcjach easingu Roberta Pennera ease-in oznacza, że ruch zaczyna się wolno i przyspiesza, a ease-out, że zaczyna się szybko i zwalnia do zatrzymania. Krzywa należy do całego ruchu między dwoma kluczami.
W After Effects i wielu narzędziach opartych na kluczach easing należy do klucza: easing do klucza oznacza zwalnianie, gdy ruch do niego dochodzi, a easing z klucza oznacza wolny start, gdy ruch go opuszcza. Zatem ease in w After Effects na ostatnim kluczu i ease-out w CSS na ruchu dają to samo wyhamowanie pod przeciwnymi nazwami. Opisanie samego ruchu — wolny start, wolny koniec, wolno na obu końcach — omija niejednoznaczność.
Typy interpolacji i uchwyty bezier
Interpolacja liniowa rysuje prostą między kluczami: stała prędkość i gwałtowna zmiana na każdym kluczu. Interpolacja stała, skokowa lub hold utrzymuje wartość do następnego klucza, a potem skacze, co przydaje się przy blockingu, mrugnięciach i wszystkim, co ma przeskakiwać. Interpolacja bezier lub spline rysuje gładką krzywą przez klucze i tam żyje easing.
Klucz bezier ma dwa uchwyty, jeden sterujący krzywą dochodzącą do klucza, drugi odchodzącą. Płaski uchwyt oznacza zerową prędkość na kluczu — ease. Dłuższy uchwyt utrzymuje to spowolnienie przez większą część ruchu. Uchwyty w jednej linii przechodzą przez klucz gładko; rozdzielone tworzą ostrą zmianę kierunku, jak odbicie. Pociągnij uchwyt tak, by krzywa wyszła poza wartość klucza, a ruch przekroczy cel i wróci.
Standardowe rodziny easingu
Równania easingu Pennera, opublikowane na początku lat 2000, stały się wspólnym słownikiem nazwanych krzywych: sine, quad, cubic, quart, quint, expo i circ, każda w formie in, out i in-out, od ledwo zauważalnej (sine) po gwałtowną (expo). Back przekracza cel, zanim się uspokoi. Większość narzędzi do ruchu i bibliotek CSS zawiera jakąś wersję tego zestawu, zwykle przybliżoną krzywymi sześciennymi bezier.
Elastic i bounce są wyjątkami. Oscylują kilka razy w jednym ruchu, czego pojedyncza sześcienna krzywa bezier nie potrafi, więc narzędzia budują je z kilku kluczy albo generują proceduralnie.
Którego easingu użyć
Zmiękcz oba końce dla większości ruchów, które startują i się zatrzymują: najazdu kamery, obiektu wsuwającego się na miejsce, obrotu głowy. Używaj wolnego końca dla rzeczy, które docierają i się uspokajają, a wolnego startu dla rzeczy, które wyruszają. Zostaw linear dla ruchu, który ma być stały — obracającego się wentylatora, taśmociągu, środka zapętlonego cyklu — i dla kluczy, przez które ruch ma przejść prosto. Hold stosuj do przeskoków, mrugnięć i blockingu.
Easing w Mixos Studio
Zaznacz klucz, a nagłówek timeline'u oferuje Linear, Ease in, Ease out, Ease i Hold. Stosują konwencję opartą na kluczach: Ease in zwalnia ruch dochodzący do klucza, Ease out zwalnia go przy odejściu, a Ease robi jedno i drugie — Easy Ease z After Effects. Gdy timeline ma fokus, F9 stosuje Ease, ⇧F9 Ease in, a ⌘⇧F9 Ease out.
Curve… otwiera rodziny Pennera od Sine do Back, z wyszukiwaniem po wrażeniu, a także po nazwie, obok zapisanych przez Ciebie krzywych. Tryb Curves rysuje ścieżki jako krzywe z uchwytami bezier, które przeciągasz bezpośrednio, łącznie z overshoot. Elastic i bounce celowo nie ma na liście krzywych; ten rodzaj ruchu tworzą generatory sprężyny i odbicia pod + Motion.
Najczęściej zadawane pytania
Co oznacza ease in i ease out?
Oba opisują stopniowe zmiany prędkości, ale narzędzia używają ich w przeciwnych znaczeniach. W CSS i funkcjach Pennera ease-in to wolny start, a ease-out to wolny koniec. W After Effects i innych narzędziach opartych na kluczach easing do klucza zwalnia ruch przy dojściu do niego, a easing z klucza zwalnia go przy odejściu.
Jaka jest różnica między interpolacją liniową a bezier?
Interpolacja liniowa porusza wartość ze stałą prędkością i zmienia się gwałtownie na każdym kluczu. Interpolacja bezier rysuje gładką krzywą przez klucze, z uchwytami sterującymi przyspieszaniem i zwalnianiem ruchu, co umożliwia easing.
Czym jest klucz hold?
Klucz ze stałą (skokową) interpolacją: wartość zostaje dokładnie tam, gdzie jest, do następnego klucza, po czym skacze. Służy do blockingu, mrugnięć, cięć i wszystkiego, co ma przeskakiwać zamiast się przemieszczać.
Jak zrobić, żeby animacja miała overshoot?
Dodaj klucz poza celem i klucz uspokajający po nim albo pociągnij uchwyt bezier tak, by krzywa wyszła poza wartość klucza i wróciła. Krzywa easingu w stylu back robi to samo jako preset.
Dlaczego moja animacja wygląda robotycznie?
Zwykle dlatego, że jest liniowa: stała prędkość z gwałtownymi startami i zatrzymaniami na każdym kluczu. Zmiękczenie startów i zatrzymań oraz przesunięcie części ruchu o kilka klatek, by nie ruszały jednocześnie, naprawia większość problemu.
