INF.03. Animacja Metodą Klatek Kluczowych

I. Oś Czasu i Klatka Kluczowa (Keyframe)

Metoda klatek kluczowych (Keyframes) to technika tworzenia animacji oparta na interpolacji (tweening). Zamiast definiować każdą klatkę, definiujemy tylko dwa kluczowe stany:

Klatka Kluczowa (A): Definiuje stan początkowy (np. obiekt na pozycji X, przezroczystość 0).
Klatka Kluczowa (B): Definiuje stan końcowy (np. obiekt na pozycji Y, przezroczystość 1).
Interpolacja: Program (silnik animacji) automatycznie generuje wszystkie klatki pomiędzy A i B, tworząc płynny ruch.

Wizualizacja Interpolacji (Animacja Transformacji)

Klatka A (Start)

Klatka B (Koniec)

Przejście z Klatki A do B: Program oblicza zmiany pozycji, skali, obrotu, itp. w czasie.

II. Praca z Osią Czasu (Timeline)

Oś czasu to graficzna reprezentacja animacji wzdłuż czasu. Jest to główne narzędzie pracy w programach do edycji wideo, dźwięku i animacji (np. After Effects, DaVinci Resolve, CSS Animation, Adobe Animate).

Ścieżki (Tracks): W pionie mamy ścieżki, z których każda zawiera inny element multimedialny (wideo, audio, grafika).
Znacznik Czasu (Playhead): Pionowa linia, która pokazuje, w którym momencie animacji aktualnie się znajdujemy. Przesuwanie znacznika jest kluczowe do umieszczania klatek kluczowych.
Klip/Obiekt: Bloki na osi czasu reprezentujące trwanie danego elementu.
Ustawianie Klatek: Wybierasz obiekt, przesuwasz znacznik czasu do punktu, w którym chcesz, by zaszła zmiana, zmieniasz parametr (np. pozycję), a program automatycznie tworzy klatkę kluczową.

III. Efekty Przekształceń (Transformacji)

Przekształcenia to podstawowe zmiany, które możemy animować między klatkami kluczowymi. Każdy z tych parametrów może być "kluczowany" na osi czasu.

Główne Transformacje

Pozycja (Position): Zmiana współrzędnych X i Y. Używane do przesuwania obiektów po ekranie.
Skala (Scale): Zmiana rozmiaru obiektu (powiększanie/pomniejszanie).
Obrót (Rotation): Zmiana kąta obrotu wokół osi.
Krzywa Przezroczystości (Opacity): Zmiana widoczności obiektu (np. efekt płynnego pojawiania się — 0% do 100%).

Przykład Klatek Kluczowych (Pseudokod)

                    OBIEKT: Logo

                    CZAS 0:00:00 (Klatka Kluczowa 1)

                        Pozycja: X=100, Y=100

                        Skala: 50%

                        Przezroczystość: 0% (niewidoczne)

                    CZAS 0:00:02 (Klatka Kluczowa 2)

                        Pozycja: X=500, Y=500

                        Skala: 100%

                        Przezroczystość: 100% (widoczne)

                    // Program automatycznie obliczy ruch Logo z punktu X=100 do X=500 w ciągu 2 sekund.

IV. Efekty Przejść (Transitions)

Przejścia to specjalne efekty stosowane na początku lub na końcu klipu, lub pomiędzy dwoma klipami (w edycji wideo). Przejścia automatycznie używają klatek kluczowych do interpolacji parametrów.

Przejścia Wideo: Stopniowe przenikanie (Fade), Zmycie (Wipe), Rozpuszczenie (Dissolve). Służą do łagodnego łączenia scen.
Łagodzenie (Easing): To, jak szybko następuje przejście między klatkami kluczowymi.
- Linear: Stała prędkość (mechaniczny ruch).
- Ease-In/Ease-Out: Ruch jest powolny na początku/końcu (bardziej naturalny ruch).

Ćwiczenie Zadania Praktyczne

Zadanie 1: Animacja Pozycji i Skali

W programie obsługującym klatki kluczowe (np. DaVinci Resolve, Adobe Animate, CSS Animation):

Umieść obiekt na scenie.
Na 0. sekundzie ustaw Klatkę Kluczową: Pozycja (lewy górny róg) i Skala (50%).
Na 2. sekundzie ustaw drugą Klatkę Kluczową: Pozycja (prawy dolny róg) i Skala (100%).
Rezultat: Obiekt powinien płynnie przesuwać się i powiększać w ciągu 2 sekund.

Zadanie 2: Dodawanie Efektu Przejścia (Przezroczystości)

Zastosuj efekt "pojawiania się" (fade-in) do obiektu.

Na 0. sekundzie ustaw Klatkę Kluczową: Krzywa Przezroczystości (Opacity) na 0%.
Na 1. sekundzie ustaw drugą Klatkę Kluczową: Krzywa Przezroczystości (Opacity) na 100%.
Cel: Zastosuj łagodzenie Ease-Out do tego przejścia, aby pojawienie się było bardziej naturalne.