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.