Wracamy do licznika Koleżki-O-Nie.
A gdybyśmy chcieli, żeby Koleżka rósł w miarę, jak licznik zbliża się do 0?
Wzmocnilibyśmy wrażenie nadciągającej zagłady.
Jeden sposób
- to animować style CSS tego obrazu z pomocą "window.setInterval".
W pierwszej kolejności znajdę obraz i przechowam go w zmiennej:
ohnoes = document.getElementById("ohnoes").
Określę styl początkowy, by zmiany zaczynały się przy pewnej szerokości.
Będzie wiadomo, od jakiej wielkości ma rosnąć.
A teraz napiszę funkcję "makeItBigger",
która będzie odpowiedzialna za powiększanie Koleżki.
Tutaj musimy zmienić "style.width":
wziąć poprzednią szerokość i dodać do niej 1.
W końcu przywołam "setInterval"
w funkcji "window.setInterval(makeItBigger)".
Jak bardzo ma urosnąć? Albo jak często program ma powiększać Koleżkę?
Chcemy zrobić płynną animację.
Zazwyczaj to od 24 do 60 klatek na sekundę.
Wypróbuję 30 klatek na sekundę.
Napiszę: 1000 podzielić przez 30.
Hm... To nie działa. Wiecie, dlaczego? Sprawa jest skomplikowana.
Przejdźmy tutaj i zastanówmy się,
jaka będzie wartość
"ohnoes.style.width" po tej linii.
Pewnie pomyśleliście, że 50 pikseli przejdzie w 51 pikseli,
ale zobaczmy, ile wynosi "ohnoes.style.width"...
Mamy tu "infoDiv", w którym możemy to umieścić. To się równa...
50 pikseli, w porządku.
Teraz spróbujmy do tych 50 pikseli dodać 1.
Ile to jest, 50 pikseli plus 1?
Pewnie powiecie, że 51 pikseli,
ale JavaScript uważa zapis "50 px" za ciąg znaków,
więc zobaczymy "50px1".
A to nie ma sensu.
Przeglądarka prawdopodobnie ignoruje to, że próbujemy
przyporządkować własności "szerokość" tę bezsensowną wartość.
Musimy przekonwertować liczbę z jednostką
na samą liczbę,
potem do tej liczby dodać 1
i dopiero przywrócić piksele.
Możemy to zrobić za pomocą polecenia "parseFloat",
które przekształci ciąg w liczbę.
Potem możemy otoczyć to wszystko
i na końcu dodać "px".
O! To działa! On rośnie! Tak!
Już widzicie trudność w animowaniu własności CSS.
Często mają przyklejone jednostki,
więc trzeba je oddzielić... Oj, rośnie!
Jednostkę trzeba oddzielić, a potem dołączyć z powrotem.
No dobrze... Staje się naprawdę przerażający!
Natkniemy się na więcej przerażających rzeczy,
używając "setInterval" do animacji właściwości CSS.
Po pierwsze, nie ma gwarancji,
że przeglądarka będzie skrupulatnie przestrzegać interwału.
Jeśli coś się stanie, np. użytkownik będzie coś wpisywał,
to przeglądarka może przywołać funkcję później.
I już nie będzie gładkiej animacji.
Po drugie, przeglądarka przywoła funkcję nawet gdy ta karta będzie ukryta.
Będzie więc marnować moc komputera.
Dlatego w nowoczesnych przeglądarkach jest już nowa funkcja,
zaprojektowana z myślą o animacjach DOM-ów.
Nazywa się "window.requestAnimationFrame".
Żeby jej użyć, pozbędziemy się linii "setInterval"
i przywołamy
"requestAnimationFrame" z wnętrza funkcji.
Damy odniesienie
do funkcji "makeItBigger".
A potem po prostu przywołamy "makeItBigger"
podczas ładowania strony.
"MakeItBigger"...
O! Okej, on rośnie i to szybko!
Przeglądarka przywołuje "makeItBigger"
tuż przed odświeżeniem,
z prędkością 60 klatek na sekundę - dwa razy większą niż poprzednio.
Za każdym razem do szerokości dodajemy 1 piksel.
Policzmy, przecież dobrze to umiemy. Dodajemy 60 pikseli na sekundę.
W parę sekund Koleżka przerasta stronę. Już go nie widać.
Jak spowolnić naszą animację?
Jest kilka sposobów.
Lubię ten, gdy program obserwuje, ile czasu upłynęło
i na tej podstawie oblicza nową szerokość.
Najpierw trzeba zapamiętać czas początkowy, w milisekundach.
Jeszcze zanim funkcja zostanie przywołana. "var startTime"...
Oj, znowu rośnie. "new Date().getTime()".
I wewnątrz "makeItBigger" przechowujemy czas bieżący:
"var currTime = new Date().getTime()".
Dla wygody ustalmy, że Koleżka ma rosnąć
o 30 pikseli na sekundę, zaczynając od 50 pikseli.
Obliczmy to więc:
"newWidth = 50"
- to nasza szerokość wyjściowa
plus "currentTime minus startTime".
To w milisekundach, więc podzielimy przez tysiąc.
A potem mnożymy przez 30.
Bo chcemy, żeby Koleżka rósł o 30 pikseli na sekundę.
To nowa szerokość - "newWidth". Teraz przypiszmy
elementowi "style.width"
wartość "newWidth".
..."newWidth"... ach, wreszcie!
I mamy płynną animację: 30 pikseli na sekundę.
Możemy zmienić tę liczbę,
jeśli chcemy, by Koleżka rósł wolniej lub...
szybciej.
A gdyby tak zatrzymać animację, gdy Koleżka będzie za duży?
Możemy otoczyć tę linię warunkiem "if"...
Tę linię... i robić to tylko wtedy, gdy bieżąca szerokość
jest mniejsza od danej liczby, np. 300.
Wypróbujmy to.
Dobrze.
A teraz...
"CurrentWidth" wynosi... Nie, "newWidth".
Dobrze. Powiedzmy, że jeśli wyniesie 300...
Dalej, Koleżko, dasz radę!
Pięknie.
Ta metoda używania "requestAnimationFrame"
powinna się sprawdzać, jeśli użytkownik korzysta z Chrome, Firefox lub IE10+.
Są biblioteki i podkładki programowe JavaScript,
używające "requestAnimationFrame", gdy jest to możliwe,
albo, w starszych przeglądarkach, stosują "setInterval".
Tak to jest przy projektowaniu stron:
strona zmienia się cały czas, przeglądarki dodają nowe opcje,
projektanci odkrywają nowe sposoby ich używania...
Musicie stale dowiadywać się, co jest nowe
i co najlepiej nadaje się do waszych celów.