0:00:00.673,0:00:03.553
Wracamy do licznika Koleżki-O-Nie.

0:00:03.747,0:00:09.311
A gdybyśmy chcieli, żeby Koleżka rósł[br]w miarę, jak licznik zbliża się do 0?

0:00:09.425,0:00:12.539
Wzmocnilibyśmy wrażenie[br]nadciągającej zagłady.

0:00:12.639,0:00:14.409
Jeden sposób

0:00:14.563,0:00:20.049
- to animować style CSS tego obrazu[br]z pomocą "window.setInterval".

0:00:20.203,0:00:24.729
W pierwszej kolejności znajdę obraz[br]i przechowam go w zmiennej:

0:00:24.916,0:00:30.441
ohnoes =[br]document.getElementById("ohnoes").

0:00:31.834,0:00:36.339
Określę styl początkowy, by zmiany[br]zaczynały się przy pewnej szerokości.

0:00:36.437,0:00:39.195
Będzie wiadomo,[br]od jakiej wielkości ma rosnąć.

0:00:39.371,0:00:43.978
A teraz napiszę funkcję[br]"makeItBigger",

0:00:44.166,0:00:47.972
która będzie odpowiedzialna[br]za powiększanie Koleżki.

0:00:48.088,0:00:52.268
Tutaj musimy zmienić "style.width":

0:00:52.964,0:00:58.607
wziąć poprzednią szerokość[br]i dodać do niej 1.

0:01:00.000,0:01:02.717
W końcu przywołam "setInterval"

0:01:02.817,0:01:07.175
w funkcji[br]"window.setInterval(makeItBigger)".

0:01:07.295,0:01:11.703
Jak bardzo ma urosnąć? Albo jak często[br]program ma powiększać Koleżkę?

0:01:11.803,0:01:13.629
Chcemy zrobić płynną animację.

0:01:13.745,0:01:18.529
Zazwyczaj to od 24[br]do 60 klatek na sekundę.

0:01:18.656,0:01:21.316
Wypróbuję 30 klatek na sekundę.

0:01:21.474,0:01:23.893
Napiszę: 1000 podzielić przez 30.

0:01:25.426,0:01:31.138
Hm... To nie działa. Wiecie, dlaczego?[br]Sprawa jest skomplikowana.

0:01:31.237,0:01:33.646
Przejdźmy tutaj i zastanówmy się,

0:01:33.765,0:01:37.007
jaka będzie wartość

0:01:37.107,0:01:41.324
"ohnoes.style.width" po tej linii.

0:01:41.424,0:01:45.998
Pewnie pomyśleliście,[br]że 50 pikseli przejdzie w 51 pikseli,

0:01:46.114,0:01:50.016
ale zobaczmy,[br]ile wynosi "ohnoes.style.width"...

0:01:50.124,0:01:54.683
Mamy tu "infoDiv", w którym możemy[br]to umieścić. To się równa...

0:01:58.096,0:02:00.163
50 pikseli, w porządku.

0:02:00.352,0:02:05.109
Teraz spróbujmy[br]do tych 50 pikseli dodać 1.

0:02:05.176,0:02:07.547
Ile to jest, 50 pikseli plus 1?

0:02:07.645,0:02:09.914
Pewnie powiecie, że 51 pikseli,

0:02:10.086,0:02:14.931
ale JavaScript uważa zapis[br]"50 px" za ciąg znaków,

0:02:15.976,0:02:20.225
więc zobaczymy "50px1".

0:02:20.343,0:02:22.593
A to nie ma sensu.

0:02:22.726,0:02:25.821
Przeglądarka prawdopodobnie[br]ignoruje to, że próbujemy

0:02:25.893,0:02:29.629
przyporządkować własności[br]"szerokość" tę bezsensowną wartość.

0:02:29.747,0:02:33.530
Musimy przekonwertować[br]liczbę z jednostką

0:02:33.622,0:02:35.550
na samą liczbę,

0:02:35.656,0:02:37.690
potem do tej liczby dodać 1

0:02:37.835,0:02:40.635
i dopiero przywrócić piksele.

0:02:40.741,0:02:45.302
Możemy to zrobić[br]za pomocą polecenia "parseFloat",

0:02:45.361,0:02:47.253
które przekształci ciąg w liczbę.

0:02:47.337,0:02:49.830
Potem możemy otoczyć to wszystko

0:02:49.923,0:02:53.011
i na końcu dodać "px".

0:02:53.148,0:02:57.725
O! To działa! On rośnie! Tak!

0:02:57.797,0:03:01.185
Już widzicie trudność[br]w animowaniu własności CSS.

0:03:01.226,0:03:03.275
Często mają przyklejone jednostki,

0:03:03.375,0:03:06.003
więc trzeba je oddzielić...[br]Oj, rośnie!

0:03:06.103,0:03:09.823
Jednostkę trzeba oddzielić,[br]a potem dołączyć z powrotem.

0:03:11.018,0:03:14.505
No dobrze...[br]Staje się naprawdę przerażający!

0:03:14.592,0:03:17.276
Natkniemy się na więcej[br]przerażających rzeczy,

0:03:17.410,0:03:21.131
używając "setInterval"[br]do animacji właściwości CSS.

0:03:21.275,0:03:24.035
Po pierwsze, nie ma gwarancji,

0:03:24.135,0:03:28.352
że przeglądarka będzie skrupulatnie[br]przestrzegać interwału.

0:03:28.452,0:03:33.089
Jeśli coś się stanie,[br]np. użytkownik będzie coś wpisywał,

0:03:33.188,0:03:35.890
to przeglądarka[br]może przywołać funkcję później.

0:03:36.036,0:03:38.662
I już nie będzie gładkiej animacji.

0:03:38.796,0:03:43.236
Po drugie, przeglądarka przywoła funkcję[br]nawet gdy ta karta będzie ukryta.

0:03:43.329,0:03:46.998
Będzie więc marnować moc komputera.

0:03:48.112,0:03:51.735
Dlatego w nowoczesnych[br]przeglądarkach jest już nowa funkcja,

0:03:51.842,0:03:55.358
zaprojektowana z myślą[br]o animacjach DOM-ów.

0:03:55.458,0:03:59.049
Nazywa się[br]"window.requestAnimationFrame".

0:03:59.188,0:04:03.182
Żeby jej użyć,[br]pozbędziemy się linii "setInterval"

0:04:03.291,0:04:05.690
i przywołamy

0:04:05.790,0:04:11.402
"requestAnimationFrame"[br]z wnętrza funkcji.

0:04:11.485,0:04:14.815
Damy odniesienie

0:04:14.884,0:04:17.671
do funkcji "makeItBigger".

0:04:18.832,0:04:22.130
A potem po prostu przywołamy[br]"makeItBigger"

0:04:22.294,0:04:24.010
podczas ładowania strony.

0:04:25.112,0:04:27.284
"MakeItBigger"...

0:04:27.437,0:04:30.372
O! Okej, on rośnie i to szybko!

0:04:30.472,0:04:33.902
Przeglądarka[br]przywołuje "makeItBigger"

0:04:34.004,0:04:35.574
tuż przed odświeżeniem,

0:04:35.631,0:04:39.962
z prędkością 60 klatek na sekundę[br]- dwa razy większą niż poprzednio.

0:04:40.106,0:04:43.097
Za każdym razem[br]do szerokości dodajemy 1 piksel.

0:04:43.211,0:04:47.695
Policzmy, przecież dobrze to umiemy.[br]Dodajemy 60 pikseli na sekundę.

0:04:47.806,0:04:52.060
W parę sekund Koleżka[br]przerasta stronę. Już go nie widać.

0:04:53.035,0:04:55.891
Jak spowolnić naszą animację?

0:04:56.058,0:04:57.331
Jest kilka sposobów.

0:04:57.431,0:05:01.116
Lubię ten, gdy program[br]obserwuje, ile czasu upłynęło

0:05:01.230,0:05:04.808
i na tej podstawie[br]oblicza nową szerokość.

0:05:04.949,0:05:08.895
Najpierw trzeba zapamiętać[br]czas początkowy, w milisekundach.

0:05:08.988,0:05:12.649
Jeszcze zanim funkcja[br]zostanie przywołana. "var startTime"...

0:05:12.765,0:05:16.998
Oj, znowu rośnie.[br]"new Date().getTime()".

0:05:17.098,0:05:20.481
I wewnątrz "makeItBigger"[br]przechowujemy czas bieżący:

0:05:20.611,0:05:26.681
"var currTime = new Date().getTime()".

0:05:26.800,0:05:30.164
Dla wygody ustalmy,[br]że Koleżka ma rosnąć

0:05:30.257,0:05:33.902
o 30 pikseli na sekundę,[br]zaczynając od 50 pikseli.

0:05:33.995,0:05:37.269
Obliczmy to więc:

0:05:37.463,0:05:42.494
"newWidth = 50"

0:05:42.606,0:05:44.491
- to nasza szerokość wyjściowa

0:05:44.611,0:05:49.019
plus "currentTime minus startTime".

0:05:49.119,0:05:53.307
To w milisekundach,[br]więc podzielimy przez tysiąc.

0:05:53.407,0:05:57.262
A potem mnożymy przez 30.

0:05:57.338,0:06:00.513
Bo chcemy, żeby Koleżka[br]rósł o 30 pikseli na sekundę.

0:06:00.738,0:06:05.389
To nowa szerokość - "newWidth".[br]Teraz przypiszmy

0:06:05.489,0:06:07.222
elementowi "style.width"

0:06:07.363,0:06:09.986
wartość "newWidth".

0:06:10.065,0:06:13.957
..."newWidth"... ach, wreszcie!

0:06:14.046,0:06:18.903
I mamy płynną animację:[br]30 pikseli na sekundę.

0:06:19.808,0:06:22.270
Możemy zmienić tę liczbę,

0:06:22.370,0:06:26.382
jeśli chcemy,[br]by Koleżka rósł wolniej lub...

0:06:26.482,0:06:27.657
szybciej.

0:06:30.861,0:06:34.440
A gdyby tak zatrzymać animację,[br]gdy Koleżka będzie za duży?

0:06:34.540,0:06:37.859
Możemy otoczyć tę linię[br]warunkiem "if"...

0:06:37.959,0:06:42.587
Tę linię... i robić to tylko wtedy,[br]gdy bieżąca szerokość

0:06:42.667,0:06:48.230
jest mniejsza[br]od danej liczby, np. 300.

0:06:48.362,0:06:49.623
Wypróbujmy to.

0:06:51.225,0:06:52.479
Dobrze.

0:06:52.572,0:06:54.522
A teraz...

0:06:54.638,0:06:58.493
"CurrentWidth" wynosi...[br]Nie, "newWidth".

0:06:58.619,0:07:01.418
Dobrze.[br]Powiedzmy, że jeśli wyniesie 300...

0:07:03.787,0:07:07.394
Dalej, Koleżko, dasz radę!

0:07:07.494,0:07:08.634
Pięknie.

0:07:08.730,0:07:12.518
Ta metoda używania[br]"requestAnimationFrame"

0:07:12.653,0:07:18.415
powinna się sprawdzać, jeśli użytkownik[br]korzysta z Chrome, Firefox lub IE10+.

0:07:18.551,0:07:21.573
Są biblioteki[br]i podkładki programowe JavaScript,

0:07:21.661,0:07:25.196
używające "requestAnimationFrame",[br]gdy jest to możliwe,

0:07:25.351,0:07:30.049
albo, w starszych przeglądarkach,[br]stosują "setInterval".

0:07:30.203,0:07:32.417
Tak to jest przy projektowaniu stron:

0:07:32.528,0:07:36.597
strona zmienia się cały czas,[br]przeglądarki dodają nowe opcje,

0:07:36.683,0:07:40.149
projektanci odkrywają[br]nowe sposoby ich używania...

0:07:40.257,0:07:43.563
Musicie stale dowiadywać się,[br]co jest nowe

0:07:43.656,0:07:46.590
i co najlepiej nadaje się[br]do waszych celów.