INF.03.3 (5)

Zasady Tworzenia
Animowanych GIF-ów

Wizualny proces tworzenia animacji poklatkowej · Tomasz Puchała · toloki.pl

Sekcja I

Kluczowa Rola Klatek (Warstw)

Animowany GIF jest niczym krótki komiks, w którym każda ramka to kolejny rysunek. W programie do edycji grafiki rastrowej (np. GIMP, Photoshop) każda klatka animacji musi być przygotowana jako osobna warstwa.

Animacja następuje poprzez szybkie ukrywanie i pokazywanie kolejnych warstw w określonym interwale czasowym — zwanym opóźnieniem (delay). Im mniejsze opóźnienie, tym płynniejszy ruch.

📁 PANEL WARSTW (LAYERS) — Przykład animacji oka
5
Warstwa 5: Klatka 5 — Oko otwarte (powrót)
4
Warstwa 4: Klatka 4 — Oko w połowie (zamykanie)
3
Warstwa 3: Klatka 3 — Oko całkowicie zamknięte
2
Warstwa 2: Klatka 2 — Oko w połowie (otwieranie)
1
Warstwa 1: Klatka 1 — Oko otwarte (startowa)
↑ W programach jak GIMP warstwy są numerowane od dołu. Animacja odczytuje je od dołu do góry.
Sekcja II

Wizualizacja Procesu Tworzenia

Poniższy schemat ilustruje, jak warstwy z programu graficznego są mapowane na ramki Osi Czasu (Timeline), tworząc iluzję ruchu. Każda klatka ma swój czas wyświetlania.

🎬 PRZYKŁAD: ANIMACJA "MR. KROPKA" · żywa wersja →
🔵
Klatka 1
0.2s · góra
→
🔵
Klatka 2
0.2s · środek
→
⚫
Klatka 3
0.2s · dół
→
🔵
Klatka 4
0.2s · środek
→
Żywa
animacja
PĘTLA NIESKOŃCZONA · EKSPORT AKTYWNY · Powrót do Klatki 1

Oś czasu — jak działa w praktyce

Eksportując GIF, program zamienia każdą warstwę w oddzielną ramkę. Czas opóźnienia między ramkami (delay) określa prędkość animacji. Wartość 0.1s = 10 FPS, 0.04s ≈ 25 FPS.

Sekcja III

Narzędzia i Optymalizacja

🖌️

A. Narzędzia Edytora Grafiki

  • Warstwy (Layers) — Separacja klatek. Każda warstwa = jedna klatka animacji.
  • Kopiowanie warstw — Najszybszy sposób tworzenia kolejnej klatki. Kopiujesz i lekko modyfikujesz.
  • Ołówek / Pędzel — Rysowanie treści każdej klatki z osobna.
  • Zaznaczanie i przesunięcie — Przesuwanie obiektów między klatkami, by symulować ruch.
  • Panel Osi Czasu — W Photoshopie: Okno → Oś czasu. Zarządzanie klatkami i opóźnieniami.
⚙️

B. Eksport i Optymalizacja GIF

  • Wymiary (px) — Zmniejszaj do minimum, np. 300×300 px. Mniejszy obraz = mniejszy plik.
  • Paleta kolorów — Maksimum 256 kolorów. Prosta animacja? Wystarczy 32–64 kolory.
  • Opóźnienie (Delay) — Czas między klatkami. Typowo 0.1–0.3s na klatkę.
  • Pętla (Looping) — Ciągle / Raz / N razy.
  • Dithering — Symulacja brakujących kolorów. Zwiększa rozmiar pliku.
Sekcja IV

Parametry Eksportu — Tabela

Poniżej zestawienie najważniejszych parametrów eksportu do formatu GIF z zalecanymi wartościami:

Parametr Opis Zalecana wartość Wpływ na plik
Rozmiar (px) Szerokość × Wysokość w pikselach ≤ 400×400 px ↑ rozmiar = ↑ plik
Kolory Liczba kolorów w palecie (max 256) 64–128 ↑ kolory = ↑ plik
Delay Opóźnienie między klatkami (sekundy) 0.1 – 0.3s Wpływa na płynność
Pętla Liczba powtórzeń animacji Ciągle (0) Minimalny wpływ
Dithering Symulacja kolorów spoza palety Brak / Diffusion 25% ↑ dithering = ↑ plik
Interlacing Progresywne wczytywanie GIF-a Wyłączone Lekki wzrost rozmiaru
Optymalizacja ramek Zapisuje tylko zmienione piksele Włączone ↓ plik do 60%
Sekcja V

Ćwiczenia Praktyczne

01
Projekt: Bouncing Ball (5 klatek)
  • 1
    Klatka 1 — Piłka na górze (okrągła)
  • 2
    Klatka 2 — Piłka w połowie drogi (lekko rozciągnięta pionowo)
  • 3
    Klatka 3 — Piłka na dole (spłaszczona — efekt kompresji)
  • 4
    Klatka 4 — Piłka wznosi się (rozciągnięta pionowo)
  • 5
    Klatka 5 — Piłka wraca na górę (okrągła)
🎯 Cel: Zaimplementuj 5 warstw jako klatki GIF z delay = 0.15s
K1
Góra
K2
Środek↓
K3
Dół 🫓
K4
Środek↑
K5
Góra
02
Optymalizacja: Porównanie Palet Kolorów
  • 1
    Stwórz GIF z 2 klatkami: kwadrat czerwony → zielony
  • 2
    Eksportuj Wersję A — paleta 256 kolorów
  • 3
    Eksportuj Wersję B — paleta 16 kolorów
  • 4
    Porównaj rozmiary plików. Różnica wynosi nawet 60–70%!
🎯 Cel: Zrozumieć wpływ palety na rozmiar pliku GIF
Wersja A · 256 kolorów
Rozmiar pliku: ~48 KB
Wersja B · 16 kolorów
Rozmiar pliku: ~17 KB
03
Bonus: Animacja Tekstu (5 klatek)
  • 1
    Klatka 1 — Puste tło
  • 2
    Klatka 2 — Pierwsza litera słowa "GIMP"
  • 3
    Klatka 3 — "GI"
  • 4
    Klatka 4 — "GIM"
  • 5
    Klatka 5 — "GIMP" + efekt błysku
🎯 Cel: Animacja typewriter z efektem wejścia tekstu
Demo

Interaktywny Symulator GIF

Wybierz animację i prędkość, aby zobaczyć, jak zmienia się wrażenie ruchu przy różnych opóźnieniach między klatkami.

Delay: 0.15s = ~7 FPS
Sekcja VI

Słownik Pojęć GIF

GIF
Graphics Interchange Format. Format pliku graficznego z 1987 r. obsługujący animacje i maksymalnie 256 kolorów.
Klatka (Frame)
Jeden statyczny obraz będący częścią animacji. Sekwencja klatek tworzy iluzję ruchu.
Delay (Opóźnienie)
Czas wyświetlania jednej klatki w setkach sekundy (centiseconds). Wartość 10 = 0.1s = 10 FPS.
Paleta Kolorów
Zbiór do 256 kolorów użytych w GIF-ie. Ograniczona paleta zmniejsza rozmiar pliku.
Dithering
Technika symulowania kolorów spoza palety przez mieszanie dostępnych pikseli. Poprawia jakość kosztem rozmiaru.
Pętla (Loop)
Opcja powtarzania animacji od początku po jej zakończeniu. Wartość 0 = pętla nieskończona.
Warstwa (Layer)
W edytorze grafiki: oddzielna płaszczyzna rysunku. W animacji GIF każda warstwa staje się jedną klatką.
LZW Compression
Algorytm kompresji używany w GIF-ach. Działa lepiej na prostych obrazach z dużymi jednolitymi obszarami.
FPS
Frames Per Second — liczba klatek na sekundę. Wyższe FPS = płynniejsza animacja = większy plik.