Kompletny przewodnik po krzywych dynamiki aplikacji.

Co to są krzywe dynamiki w animacji? 

W kontekście animacji krzywe dynamiki nadają ruchom naturalny, organiczny charakter. Animacja liniowa — przygotowana bez krzywych dynamiki — będzie charakteryzować się mechanicznym ruchem, bez spowolnień i przyspieszeń. Ponieważ taka jednostajność prędkości nie występuje w naturze, odbieramy taki ruch jako nienaturalny. 

Obiekty w prawdziwym świecie po rozpoczęciu ruchu nie utrzymują stałej prędkości — zaczynają powoli, nabierają prędkości, a następnie zwalniają, dążąc do zatrzymania. 

Przypomina to jazdę samochodem — najpierw samochód jest nieruchomy, później przyspiesza i jakiś czas jedzie ze stałą prędkością, a pod koniec trasy zwalnia i zatrzymuje się. 

Takie ruchy są odzwierciedlane przez główne funkcje krzywych dynamiki, które możesz napotkać podczas pracy z animacjami. Dzięki nim ruch wygląda na o wiele bardziej naturalny.

• Rozpędzanie oznacza rozpoczęcie animacji od małej szybkości i jej przyspieszanie aż do czasu zatrzymania. 
  
• Zwalnianie oznacza rozpoczęcie animacji od dużej szybkości i jej zwalnianie na końcu.
  
• Rozpędzanie i zwalnianie to połączenie obu powyższych. 
  

Jak działają krzywe dynamiki?

Podczas animowania jakiegoś obiektu trzeba ustawić znaczniki nazywane klatkami kluczowymi, które wskazują punkt rozpoczęcia i zakończenia ruchu. 

Klatka kluczowa jest dokładnie tym, co sugeruje nazwa — to kluczowa, czyli ważna klatka, która ustawia wartość w czasie. Pozwala to systemowi obliczyć, jak mają funkcjonować wszystkie klatki pomiędzy klatkami kluczowymi. 

W szczególności klatki kluczowe zawierają instrukcje modyfikujące wartość każdej animacji mającej miejsce między klatkami kluczowymi. Wybrane krzywe dynamiki wpłyną na sposób poruszania się obiektów, ponieważ będą decydować o sposobie ich animowania między klatkami kluczowymi.

Jakie są korzyści z krzywych dynamiki?

Krzywe dynamiki to sposób modyfikowania ruchu w taki sposób, aby wpłynąć na reakcję odbiorców. Oto niektóre korzyści dla animacji z tych krzywych:

• Jest ludzka. Ruch liniowy nie występuje w naturze. Jeśli więc użyjemy ruchu liniowego w animacji, będzie ona wyglądać płasko i drażniąco, co popsuje wrażenia oglądającego. Realizm i dokładność są najważniejsze, jeśli ruch między klatkami kluczowymi ma wyglądać autentycznie i wiarygodnie. 
• Jest realistyczna. Krzywe dynamiki dają odbiorcy czas na zrozumienie, co się dzieje. Krzywe dynamiki gwarantują, że animacja ma płynne tempo wyglądające naturalnie i organicznie. Podtrzymuje to u odbiorców rozmyślne powstrzymywanie się od niedowierzania. 
• Jest żywa. Za pomocą krzywych dynamiki można też wywoływać efekt komediowy i wzmagać dramatyzm. Na przykład animacja z rozpędzaniem zaczyna się powoli i kończy z dużą szybkością. Wyobraź sobie Wilusia E. Kojota, który wybiega za krawędź kanionu i zawisa w powietrzu zanim gwałtownie spadnie w przepaść. W animacji komputerowej do osiągnięcia takiego efektu będą konieczne krzywe dynamiki. 
• Jest dostosowywalna. Dostępna jest gama efektów krzywych dynamiki. Niektóre zaczynają się szybko, inne wolno. W przypadku niektórych efektów krzywych dynamiki na końcu następuje zwolnienie. Jakikolwiek efekt chcesz osiągnąć podczas pracy nad animacją, zrobisz to, używając krzywych dynamiki.

Animowanie z użyciem krzywych dynamiki w programie After Effects

After Effects to popularny program do tworzenia efektów specjalnych i postprodukcji. Oto jak zastosować krzywe dynamiki w animacji. 

1. Przy otwartej animacji przesuń wskaźnik czasu na początek osi czasu. Klatki kluczowe będą ustawione jako podstawowe, liniowe klatki kluczowe, czyli takie, które dają stałą szybkość przez całą animację. 
   
   
2. Kliknij pierwszą klatkę kluczową, kliknij prawym przyciskiem myszy i wybierz z menu podręcznego opcję Asysta przy klatkach kluczowych. 
   
   
3. Przewiń zawartość — zobaczysz opcje Łatwa krzywa dynamiki, Łatwe rozpędzanie i Łatwe zwalnianie. 
   
   
4. Wybranie jednej z tych opcji spowoduje zmianę ruchu dla klatki kluczowej z liniowego na krzywą dynamiki.Zobaczysz, że kształt klatki kluczowej zmieni się. Przykładowo ruch liniowy jest oznaczony rombem, a opcja Łatwe zwalnianie jest oznaczona strzałką skierowaną w lewo.
   
   
5. W tym miejscu znajdziesz opcje krzywej dynamiki odpowiednie do żądanego ruchu. Przykładowo możesz wybrać zwalnianie dla początkowej klatki kluczowej i rozpędzanie w kierunku końcowej. W ten sposób powstanie realistyczne przyspieszanie i zwalnianie znane z naturalnego ruchu.
   
   
6. Zwracaj uwagę na różnicę w czasie między klatkami kluczowymi na panelu osi czasu. Im krótszy interwał czasu między klatkami kluczowymi, tym szybszy ruch, ponieważ cała droga musi zostać wykonana przed kolejną klatką kluczową. Przy dłuższym interwale ruch jest znacznie wolniejszy, ponieważ droga może odbywać się bardziej leniwie.
   
   
7. Ruch ten możesz łatwo dostosować, po prostu przesuwając klatki kluczowe do przodu i do tyłu na osi czasu.
   
   
8. Możesz użyć ikony edytora wykresu, aby zobaczyć na wykresie, jak krzywa dynamiki wpływa na klatki kluczowe. 

Dowiedz się więcej o krzywych dynamiki w programie Adobe After Effects

Animowanie z użyciem krzywych dynamiki w programie Animate

W programie Adobe Animate krzywe dynamiki można zastosować nawet do wielu właściwości jednocześnie. Jeśli więc istnieje obiekt, który równocześnie przesuwa się i obraca, można zastosować krzywe dynamiki z różnymi szybkościami do każdego rodzaju ruchu. 

Oto jak to działa.

1. W animacji wybierz klatkę kluczową w zakresie animacji klasycznej i przejdź do sekcji animowania klatkami pośrednimi w panelu właściwości. 
2. Z menu rozwijanego krzywych dynamiki wybierz pozycję „Każda właściwość oddzielnie”. 
3. Zobaczysz pola dla każdej właściwości. Kliknij pozycję Klasyczna krzywa dynamiki, aby otworzyć panel wstępnie ustawionych krzywych dynamiki, i wybierz opcje krzywych dynamiki dla swojej właściwości. 
4. Możesz też dodać niestandardowe krzywe dynamiki. Użyj panelu i wykresu niestandardowych krzywych dynamiki, aby utworzyć idealną krzywą dynamiki dla danej klatki kluczowej. Krzywą dynamiki można łatwo przeciągnąć i dostosować, aby idealnie odpowiadała potrzebom. 
5. Pamiętaj, że krzywą dynamiki możesz też dodać do wszystkich właściwości jednocześnie. W tym celu wróć do menu rozwijanego Krzywe dynamiki i wybierz odpowiednie opcje.

Dowiedz się więcej o edytowaniu klatek pośrednich w programie Animate

Animowanie z użyciem krzywych dynamiki w programie Premiere Pro

W programie Premiere Pro dostępna jest cała gama opcji krzywych dynamiki, w tym Rozpędzanie, Zwalnianie, Wstrzymanie, Automatyczna krzywa Beziera i Ciągła krzywa Beziera. 

Krzywa Beziera pozwala dostosować wykres krzywej dynamiki. Opcja Automatyczna krzywa Beziera pomaga uzyskać płynniejsze zmiany. 

Stosowanie różnych funkcji krzywych dynamiki do klatek kluczowych jest łatwe. 

1. Ustal klatki kluczowe dla swojej animacji.
2. Wybierz klatkę kluczową i przejdź do panelu Opcje efektów.
3. Po prawej stronie panelu kliknij niewielki niebieski romb symbolizujący klatkę kluczową. Standardowo powinna być zastosowana animacja liniowa.
4. Kliknij prawym przyciskiem myszy i przejdź do menu rozwijanego Interpolacja czasowa.
5. Wybierz opcję krzywej dynamiki lub użyj takich opcji jak krzywa Beziera, aby dostosować krzywą dynamiki. 
6. Jeśli klikniesz oś czasu prawym przyciskiem myszy dla każdej klatki kluczowej oraz klikniesz opcję Pokaż klatki kluczowe klipu > Ruch > Położenie, umożliwi to edytowanie wykresu krzywej dynamiki dla klatek kluczowych na osi czasu. Pozwala to tworzyć płynniejsze lub ostrzejsze przejścia w ramach klatki kluczowej.

Dowiedz się więcej o krzywych dynamiki i klatkach kluczowych w programie Premiere Pro

Często zadawane pytania na temat krzywych dynamiki.

Jakie jest główne przeznaczenie krzywych dynamiki?

Krzywe dynamiki zaprojektowano z myślą o modyfikowaniu ruchu w ramach animacji w celu stworzenia interesującego, organicznego ruchu. Zastosowanie krzywych dynamiki sprawia, że animacje przestają wyglądać na monotonne lub zbyt gwałtowne. Ruchowi nadawana jest płynność, dzięki której ostateczny rezultat wygląda bardziej profesjonalnie. Początek i koniec animacji jest łagodzony, aby początek i koniec ruchu były płynniejsze.  

Co robi animacja CSS?

Animacja CSS (Cascading Style Sheets) to seria poleceń, które decydują, jak animacja ma być wyświetlana na stronie, gdy obiekt przechodzi z jednej konfiguracji stylu CSS do innej. Klatki kluczowe są kodowane w arkuszu CSS, aby określić stan początkowy i końcowy stylu animacji oraz przeprowadzić ją do końca, gdy to konieczne. Animacje CSS zwykle są płynnie renderowane i zachowuje się dużą kontrolę nad tym, jak prezentowany jest produkt końcowy.

Jakie są rodzaje funkcji krzywych dynamiki w arkuszach CSS?

Główne funkcje krzywych dynamiki w arkuszach CSS to: linear (animacja liniowa), ease-out (zwalnianie), ease-in (rozpędzanie) oraz ease-in-out (rozpędzanie i zwalnianie). Wszystkie te funkcje można stosować w arkuszach CSS, aby przejścia między klatkami kluczowymi były naturalniejsze. 

Co to jest przejście liniowe w arkuszu CSS?

Przejście liniowe oznacza utrzymanie takiej samej szybkości przez całą animację. Czas i wartość klatki kluczowej zwiększają się w tym samym tempie. Ten efekt może być odbierany jako robotyczny i nienaturalny, dlatego stosuje się krzywe dynamiki, które wygładzają ruchy i sprawiają, że wyglądają one autentyczniej. 

Co to jest zwalnianie w arkuszach CSS?

Efekty zwalniania oznaczają dynamiczny początek, a następnie zwalnianie. Najlepiej sprawdzają się przy animacjach prezentujących interakcję z użytkownikiem, ponieważ szybkość na początku daje wrażenie szybkiej reakcji. To przejście CSS może być także używane dla ikon, które trafiają na ekran spoza jego granic, ponieważ animacja sprawia wrażenie spieszenia się w celu udzielenia pomocy.

Co to jest rozpędzanie w arkuszach CSS?

Rozpędzanie jest rzadziej stosowanym przejściem, ponieważ wolny początek i nagły koniec może być zniechęcający dla odbiorców. Przydaje się jednak do animowania ikon i obrazów, które są przenoszone poza ekran, szczególnie jeśli animowany obiekt całkowicie opuszcza ekran bezpośrednio przed wstrzymaniem animacji. Przejścia z rozpędzaniem powinny być krótkie. W przeciwnym razie mogą sprawiać wrażenie powolnych i wywoływać zniecierpliwienie u użytkownika.

Co to jest rozpędzanie i zwalnianie w arkuszach CSS?

Przejście z rozpędzaniem i zwalnianiem zawiera elementy rozpędzania i elementy zwalniania. Zaczyna się powoli i pośrodku przyspiesza. Sprawdza się idealnie przy tworzeniu animacji, które są odtwarzane w pętli.

Dowiedz się więcej na temat animowania.

• Omówienie cyklu chodu 
  
• Pozy kluczowe w animacji
• Omówienie morfingu w animacji
• Co to jest animacja generowana komputerowo?