WEBVTT

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

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

00:00:09.425 --> 00:00:12.539
Wzmocnilibyśmy wrażenie
nadciągającej zagłady.

00:00:12.639 --> 00:00:14.409
Jeden sposób

00:00:14.563 --> 00:00:20.049
- to animować style CSS tego obrazu
z pomocą "window.setInterval".

00:00:20.203 --> 00:00:24.729
W pierwszej kolejności znajdę obraz
i przechowam go w zmiennej:

00:00:24.916 --> 00:00:30.441
ohnoes =
document.getElementById("ohnoes").

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

00:00:36.437 --> 00:00:39.195
Będzie wiadomo,
od jakiej wielkości ma rosnąć.

00:00:39.371 --> 00:00:43.978
A teraz napiszę funkcję
"makeItBigger",

00:00:44.166 --> 00:00:47.972
która będzie odpowiedzialna
za powiększanie Koleżki.

00:00:48.088 --> 00:00:52.268
Tutaj musimy zmienić "style.width":

00:00:52.964 --> 00:00:58.607
wziąć poprzednią szerokość
i dodać do niej 1.

00:01:00.000 --> 00:01:02.717
W końcu przywołam "setInterval"

00:01:02.817 --> 00:01:07.175
w funkcji
"window.setInterval(makeItBigger)".

00:01:07.295 --> 00:01:11.703
Jak bardzo ma urosnąć? Albo jak często
program ma powiększać Koleżkę?

00:01:11.803 --> 00:01:13.629
Chcemy zrobić płynną animację.

00:01:13.745 --> 00:01:18.529
Zazwyczaj to od 24
do 60 klatek na sekundę.

00:01:18.656 --> 00:01:21.316
Wypróbuję 30 klatek na sekundę.

00:01:21.474 --> 00:01:23.893
Napiszę: 1000 podzielić przez 30.

00:01:25.426 --> 00:01:31.138
Hm... To nie działa. Wiecie, dlaczego?
Sprawa jest skomplikowana.

00:01:31.237 --> 00:01:33.646
Przejdźmy tutaj i zastanówmy się,

00:01:33.765 --> 00:01:37.007
jaka będzie wartość

00:01:37.107 --> 00:01:41.324
"ohnoes.style.width" po tej linii.

00:01:41.424 --> 00:01:45.998
Pewnie pomyśleliście,
że 50 pikseli przejdzie w 51 pikseli,

00:01:46.114 --> 00:01:50.016
ale zobaczmy,
ile wynosi "ohnoes.style.width"...

00:01:50.124 --> 00:01:54.683
Mamy tu "infoDiv", w którym możemy
to umieścić. To się równa...

00:01:58.096 --> 00:02:00.163
50 pikseli, w porządku.

00:02:00.352 --> 00:02:05.109
Teraz spróbujmy
do tych 50 pikseli dodać 1.

00:02:05.176 --> 00:02:07.547
Ile to jest, 50 pikseli plus 1?

00:02:07.645 --> 00:02:09.914
Pewnie powiecie, że 51 pikseli,

00:02:10.086 --> 00:02:14.931
ale JavaScript uważa zapis
"50 px" za ciąg znaków,

00:02:15.976 --> 00:02:20.225
więc zobaczymy "50px1".

00:02:20.343 --> 00:02:22.593
A to nie ma sensu.

00:02:22.726 --> 00:02:25.821
Przeglądarka prawdopodobnie
ignoruje to, że próbujemy

00:02:25.893 --> 00:02:29.629
przyporządkować własności
"szerokość" tę bezsensowną wartość.

00:02:29.747 --> 00:02:33.530
Musimy przekonwertować
liczbę z jednostką

00:02:33.622 --> 00:02:35.550
na samą liczbę,

00:02:35.656 --> 00:02:37.690
potem do tej liczby dodać 1

00:02:37.835 --> 00:02:40.635
i dopiero przywrócić piksele.

00:02:40.741 --> 00:02:45.302
Możemy to zrobić
za pomocą polecenia "parseFloat",

00:02:45.361 --> 00:02:47.253
które przekształci ciąg w liczbę.

00:02:47.337 --> 00:02:49.830
Potem możemy otoczyć to wszystko

00:02:49.923 --> 00:02:53.011
i na końcu dodać "px".

00:02:53.148 --> 00:02:57.725
O! To działa! On rośnie! Tak!

00:02:57.797 --> 00:03:01.185
Już widzicie trudność
w animowaniu własności CSS.

00:03:01.226 --> 00:03:03.275
Często mają przyklejone jednostki,

00:03:03.375 --> 00:03:06.003
więc trzeba je oddzielić...
Oj, rośnie!

00:03:06.103 --> 00:03:09.823
Jednostkę trzeba oddzielić,
a potem dołączyć z powrotem.

00:03:11.018 --> 00:03:14.505
No dobrze...
Staje się naprawdę przerażający!

00:03:14.592 --> 00:03:17.276
Natkniemy się na więcej
przerażających rzeczy,

00:03:17.410 --> 00:03:21.131
używając "setInterval"
do animacji właściwości CSS.

00:03:21.275 --> 00:03:24.035
Po pierwsze, nie ma gwarancji,

00:03:24.135 --> 00:03:28.352
że przeglądarka będzie skrupulatnie
przestrzegać interwału.

00:03:28.452 --> 00:03:33.089
Jeśli coś się stanie,
np. użytkownik będzie coś wpisywał,

00:03:33.188 --> 00:03:35.890
to przeglądarka
może przywołać funkcję później.

00:03:36.036 --> 00:03:38.662
I już nie będzie gładkiej animacji.

00:03:38.796 --> 00:03:43.236
Po drugie, przeglądarka przywoła funkcję
nawet gdy ta karta będzie ukryta.

00:03:43.329 --> 00:03:46.998
Będzie więc marnować moc komputera.

00:03:48.112 --> 00:03:51.735
Dlatego w nowoczesnych
przeglądarkach jest już nowa funkcja,

00:03:51.842 --> 00:03:55.358
zaprojektowana z myślą
o animacjach DOM-ów.

00:03:55.458 --> 00:03:59.049
Nazywa się
"window.requestAnimationFrame".

00:03:59.188 --> 00:04:03.182
Żeby jej użyć,
pozbędziemy się linii "setInterval"

00:04:03.291 --> 00:04:05.690
i przywołamy

00:04:05.790 --> 00:04:11.402
"requestAnimationFrame"
z wnętrza funkcji.

00:04:11.485 --> 00:04:14.815
Damy odniesienie

00:04:14.884 --> 00:04:17.671
do funkcji "makeItBigger".

00:04:18.832 --> 00:04:22.130
A potem po prostu przywołamy
"makeItBigger"

00:04:22.294 --> 00:04:24.010
podczas ładowania strony.

00:04:25.112 --> 00:04:27.284
"MakeItBigger"...

00:04:27.437 --> 00:04:30.372
O! Okej, on rośnie i to szybko!

00:04:30.472 --> 00:04:33.902
Przeglądarka
przywołuje "makeItBigger"

00:04:34.004 --> 00:04:35.574
tuż przed odświeżeniem,

00:04:35.631 --> 00:04:39.962
z prędkością 60 klatek na sekundę
- dwa razy większą niż poprzednio.

00:04:40.106 --> 00:04:43.097
Za każdym razem
do szerokości dodajemy 1 piksel.

00:04:43.211 --> 00:04:47.695
Policzmy, przecież dobrze to umiemy.
Dodajemy 60 pikseli na sekundę.

00:04:47.806 --> 00:04:52.060
W parę sekund Koleżka
przerasta stronę. Już go nie widać.

00:04:53.035 --> 00:04:55.891
Jak spowolnić naszą animację?

00:04:56.058 --> 00:04:57.331
Jest kilka sposobów.

00:04:57.431 --> 00:05:01.116
Lubię ten, gdy program
obserwuje, ile czasu upłynęło

00:05:01.230 --> 00:05:04.808
i na tej podstawie
oblicza nową szerokość.

00:05:04.949 --> 00:05:08.895
Najpierw trzeba zapamiętać
czas początkowy, w milisekundach.

00:05:08.988 --> 00:05:12.649
Jeszcze zanim funkcja
zostanie przywołana. "var startTime"...

00:05:12.765 --> 00:05:16.998
Oj, znowu rośnie.
"new Date().getTime()".

00:05:17.098 --> 00:05:20.481
I wewnątrz "makeItBigger"
przechowujemy czas bieżący:

00:05:20.611 --> 00:05:26.681
"var currTime = new Date().getTime()".

00:05:26.800 --> 00:05:30.164
Dla wygody ustalmy,
że Koleżka ma rosnąć

00:05:30.257 --> 00:05:33.902
o 30 pikseli na sekundę,
zaczynając od 50 pikseli.

00:05:33.995 --> 00:05:37.269
Obliczmy to więc:

00:05:37.463 --> 00:05:42.494
"newWidth = 50"

00:05:42.606 --> 00:05:44.491
- to nasza szerokość wyjściowa

00:05:44.611 --> 00:05:49.019
plus "currentTime minus startTime".

00:05:49.119 --> 00:05:53.307
To w milisekundach,
więc podzielimy przez tysiąc.

00:05:53.407 --> 00:05:57.262
A potem mnożymy przez 30.

00:05:57.338 --> 00:06:00.513
Bo chcemy, żeby Koleżka
rósł o 30 pikseli na sekundę.

00:06:00.738 --> 00:06:05.389
To nowa szerokość - "newWidth".
Teraz przypiszmy

00:06:05.489 --> 00:06:07.222
elementowi "style.width"

00:06:07.363 --> 00:06:09.986
wartość "newWidth".

00:06:10.065 --> 00:06:13.957
..."newWidth"... ach, wreszcie!

00:06:14.046 --> 00:06:18.903
I mamy płynną animację:
30 pikseli na sekundę.

00:06:19.808 --> 00:06:22.270
Możemy zmienić tę liczbę,

00:06:22.370 --> 00:06:26.382
jeśli chcemy,
by Koleżka rósł wolniej lub...

00:06:26.482 --> 00:06:27.657
szybciej.

00:06:30.861 --> 00:06:34.440
A gdyby tak zatrzymać animację,
gdy Koleżka będzie za duży?

00:06:34.540 --> 00:06:37.859
Możemy otoczyć tę linię
warunkiem "if"...

00:06:37.959 --> 00:06:42.587
Tę linię... i robić to tylko wtedy,
gdy bieżąca szerokość

00:06:42.667 --> 00:06:48.230
jest mniejsza
od danej liczby, np. 300.

00:06:48.362 --> 00:06:49.623
Wypróbujmy to.

00:06:51.225 --> 00:06:52.479
Dobrze.

00:06:52.572 --> 00:06:54.522
A teraz...

00:06:54.638 --> 00:06:58.493
"CurrentWidth" wynosi...
Nie, "newWidth".

00:06:58.619 --> 00:07:01.418
Dobrze.
Powiedzmy, że jeśli wyniesie 300...

00:07:03.787 --> 00:07:07.394
Dalej, Koleżko, dasz radę!

00:07:07.494 --> 00:07:08.634
Pięknie.

00:07:08.730 --> 00:07:12.518
Ta metoda używania
"requestAnimationFrame"

00:07:12.653 --> 00:07:18.415
powinna się sprawdzać, jeśli użytkownik
korzysta z Chrome, Firefox lub IE10+.

00:07:18.551 --> 00:07:21.573
Są biblioteki
i podkładki programowe JavaScript,

00:07:21.661 --> 00:07:25.196
używające "requestAnimationFrame",
gdy jest to możliwe,

00:07:25.351 --> 00:07:30.049
albo, w starszych przeglądarkach,
stosują "setInterval".

00:07:30.203 --> 00:07:32.417
Tak to jest przy projektowaniu stron:

00:07:32.528 --> 00:07:36.597
strona zmienia się cały czas,
przeglądarki dodają nowe opcje,

00:07:36.683 --> 00:07:40.149
projektanci odkrywają
nowe sposoby ich używania...

00:07:40.257 --> 00:07:43.563
Musicie stale dowiadywać się,
co jest nowe

00:07:43.656 --> 00:07:46.590
i co najlepiej nadaje się
do waszych celów.