Czy ucząc się do matury stosowałeś technikę interwałów? Czyli trochę się pouczę, trochę pogram na komputerze, powtórzę twierdzenia i zobaczę co w telewizji, przypomnę sobie lektury i wyskoczę do kolegi? Jeśli tak, to dziś przypomnimy sobie ją w kontekście animacji CSS - będzie ona działać równie leniwie jak my przed maturą.
Pierwszy krok.
Animacja CSS może mieć easing (czy ktoś zna idealne tłumaczenie, bo ulżyć czy popuścić nie bardzo pasują?) zdefiniowany następująco:
- linear - czyli przebieg (właśnie, to jest dobre tłumaczenie!) oparty na funkcji liniowej,
- nielinearny predefiniowany - ease,
- nielinearny użytownika (tu gwoli ścisłości może też wpaść liniowy),
- steps(liczba kroków, start lub end).
O ile trzy pierwsze kojarzą się bardziej z systematyczną nauką do pracy, choć mniej lub bardziej intensywną, to właśnie wartość steps powoduje, że nasza animacja zachowuje się jakby chciała, a nie mogła. Pierwszy argument dla tej funkcji (bo to funkcja) jest wartością całkowitą i wymaganą. Drugi jest opcjonalny i domyślnie przyjmuje wartość end. Jak działa animacja z taką funkcją? Jeśli nasza animacja będzie mieć zdefiniowane dwie ramki (0% i 100%), to w zależności od pierwszego argumentu, przebieg zostanie podzielony na zadaną liczbę kroków. W trakcie działania animacji nie zobaczymy płynnej zmiany (jeśli taką widzielibyśmy bez użycia steps), lecz skokową zmianę właściwości. Zadając wartość 4 postęp 0-100% zostanie podzielony na 4 rozłączne przedziały: 0-25%, 25%-50%, 50%-75% oraz 75%-100%.
Być może wiesz na czym polega zmiana sygnału analogowego na cyfrowy, albo wiesz, że dźwięk 8-bitowy jest gorszej jakości od dźwięku 16-bitowego (zakładając tą samą częstotliwość próbkowania). I tu jest podobnie. To trochę tak jakby funkcja steps kwantowała sygnał analogowy (przebieg naszej animacji). Czym mniej kroków, tym animacja bardziej chropowata. Zobacz na szkicach:
Sygnał źródłowy:
Sygnał źródłowy poddany kwantyzacji 4-bitowej.
Jak widać zawsze przy N bitach, powstaje N+1 węzłów. Podobnie jest przy animacji, o czym dalej.
Jeśli obrócimy o 90 stopni nasz wykres, to otrzymamy dokładnie to samo co dzieje się przy dzieleniu animacji na kroki. Zresztą zerknij niżej. Trzy pionowe kreski dzielą przebieg na 4 kroki. 4 kroki tworzą jednak 5 węzłów, a w przypadku animacji CSS mamy zobaczyć tyle wartości (węzłów) ile kroków. Możemy więc pójść dwiema drogami: przerywaną lub kropkowaną. W przypadku pierwszej zaczniemy od wartość 225px, poprzez 250px, 275px i 300px, w przypadku drugiej zaczniemy od 200px, poprzez 225px, 250px i skończymy na 275px.
Krok do przodu, krok do tyłu.
Drugi argument funkcji steps może przyjąć wartość start lub end (domyślna). Czym się różni jedna od drugiej? Dla wartości end pierwszy krok animacji przyjmie natychmiastowo wartość wynikającą z wartości minimalnej pierwszego zakresu, tj. 0% (ścieżka kropkowana), natomiast w przypadku wartości start, pierwszy krok animacji przyjmie wartość z końca pierwszego zakresu (tu 25%, na powższym rysunku będzie to funkcja przerywana). Dlaczego z początka albo z końca? Być może przyszło Ci do głowy, że skoro napisałem o rozłącznych przedziałach, to koniec pierwszego nie może stanowić początku poprzedniego i vice versa. Dokładnie tak jest!
Zbiory wyglądają następująco:
- [0-25%), [25%-50%), [50%-75%), [75%-100%), czyli przedziały lewostronnie domknięte dla wartości end,
- (0-25%], (25%-50%], (50%-75%], (75%-100%], przedziały prawostronnie domknięte dla wartości start.
Wedle tej zależności moim zdaniem wartości tego argumentu powinny mieć odwrotne nazewnictwo...
Nie wiem czy to co teraz zobaczysz rozjaśni Ci temat czy zaciemni, ale trzymam kciuki. Tu widać przebieg liniowy animacji. Startujemy od 200px i przechodzimy płynnie do 300px.
Tak będzie wyglądać przebieg w 4 krokach przy ustawionym na end, albo braku drugiego argumentu.
A tak przy trybie start.
Przy wartości end mamy do czynienia z funkcją prawostronnie ciągłą, a przy start z funkcją lewostronnie ciągłą.
Zobaczmy jak wyglądają dla porównania dwie animacje z różnym trybem steps. Startują po sekundzie od kliknięcia:
Krok w przepaść?
I gdyby tego było mało, teraz jeszcze jedna ciekawostka. W przykładach podałem animację z dwiema klatkami, bo nie chciałem zaciemniać ciemności. Zakres między klatkami dzielony jest na tyle kroków ile zdefiniujemy w funkcji steps. Właśnie - zakres między klatkami, a nie cały przebieg animacji. Oznacza to, że jeśli zdefinujemy animację np. trzyklatkową (animacja jednoklatkowa, o której wspominałem we wpisie Kulturysta, czyli animacja CSS z jedną klatką, jest tak naprawdę też animacją trzyklatkową), to każdy z dwóch zakresów zostanie podzielony na zadaną liczbę kroków. Nie ma również znaczenia czas trwania zakresu. Jeśli cała animacja trwa 10 sekund, ale pierwszy przebieg od klatki 1-2 ma 3 sekundy, a przebieg od klatki 2-3 ma 7 sekund, to każdy z nich zostanie podzielony na cztery zakresy (pierwszy po 0,75s, drugi po 1,75s, a nie całość animacji w krokach po 1,25s=10s/8). Czyli nie dość, że animacja będzie skokowa, to odstępy czasowe w kolejnych grupach skoków wcale nie muszą być równe. Gdybym miał pokazać Ci to w sposób dźwiękonaśladowczy, to ta animacja brzmiałaby tak: trr, trr, trr, trr, trrrrrr, trrrrrr, trrrrrr, trrrrrr. Abyś przekonał się jak to wygląda, do powyższego przykładu dodałem klatkę w postępie 25%, tak więc przedział 0%-25% zostanie podzielony na cztery kroki, ale i przedział 25%-100% również.
Na dziś koniec, ale szybkimi krokami zbliżamy się do kolejnego wpisu. Do przeczytania!