1
00:00:00,673 --> 00:00:03,553
Wracamy do licznika Koleżki-O-Nie.

2
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?

3
00:00:09,425 --> 00:00:12,539
Wzmocnilibyśmy wrażenie
nadciągającej zagłady.

4
00:00:12,639 --> 00:00:14,409
Jeden sposób

5
00:00:14,563 --> 00:00:20,049
- to animować style CSS tego obrazu
z pomocą "window.setInterval".

6
00:00:20,203 --> 00:00:24,729
W pierwszej kolejności znajdę obraz
i przechowam go w zmiennej:

7
00:00:24,916 --> 00:00:30,441
ohnoes =
document.getElementById("ohnoes").

8
00:00:31,834 --> 00:00:36,339
Określę styl początkowy, by zmiany
zaczynały się przy pewnej szerokości.

9
00:00:36,437 --> 00:00:39,195
Będzie wiadomo,
od jakiej wielkości ma rosnąć.

10
00:00:39,371 --> 00:00:43,978
A teraz napiszę funkcję
"makeItBigger",

11
00:00:44,166 --> 00:00:47,972
która będzie odpowiedzialna
za powiększanie Koleżki.

12
00:00:48,088 --> 00:00:52,268
Tutaj musimy zmienić "style.width":

13
00:00:52,964 --> 00:00:58,607
wziąć poprzednią szerokość
i dodać do niej 1.

14
00:01:00,000 --> 00:01:02,717
W końcu przywołam "setInterval"

15
00:01:02,817 --> 00:01:07,175
w funkcji
"window.setInterval(makeItBigger)".

16
00:01:07,295 --> 00:01:11,703
Jak bardzo ma urosnąć? Albo jak często
program ma powiększać Koleżkę?

17
00:01:11,803 --> 00:01:13,629
Chcemy zrobić płynną animację.

18
00:01:13,745 --> 00:01:18,529
Zazwyczaj to od 24
do 60 klatek na sekundę.

19
00:01:18,656 --> 00:01:21,316
Wypróbuję 30 klatek na sekundę.

20
00:01:21,474 --> 00:01:23,893
Napiszę: 1000 podzielić przez 30.

21
00:01:25,426 --> 00:01:31,138
Hm... To nie działa. Wiecie, dlaczego?
Sprawa jest skomplikowana.

22
00:01:31,237 --> 00:01:33,646
Przejdźmy tutaj i zastanówmy się,

23
00:01:33,765 --> 00:01:37,007
jaka będzie wartość

24
00:01:37,107 --> 00:01:41,324
"ohnoes.style.width" po tej linii.

25
00:01:41,424 --> 00:01:45,998
Pewnie pomyśleliście,
że 50 pikseli przejdzie w 51 pikseli,

26
00:01:46,114 --> 00:01:50,016
ale zobaczmy,
ile wynosi "ohnoes.style.width"...

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

28
00:01:58,096 --> 00:02:00,163
50 pikseli, w porządku.

29
00:02:00,352 --> 00:02:05,109
Teraz spróbujmy
do tych 50 pikseli dodać 1.

30
00:02:05,176 --> 00:02:07,547
Ile to jest, 50 pikseli plus 1?

31
00:02:07,645 --> 00:02:09,914
Pewnie powiecie, że 51 pikseli,

32
00:02:10,086 --> 00:02:14,931
ale JavaScript uważa zapis
"50 px" za ciąg znaków,

33
00:02:15,976 --> 00:02:20,225
więc zobaczymy "50px1".

34
00:02:20,343 --> 00:02:22,593
A to nie ma sensu.

35
00:02:22,726 --> 00:02:25,821
Przeglądarka prawdopodobnie
ignoruje to, że próbujemy

36
00:02:25,893 --> 00:02:29,629
przyporządkować własności
"szerokość" tę bezsensowną wartość.

37
00:02:29,747 --> 00:02:33,530
Musimy przekonwertować
liczbę z jednostką

38
00:02:33,622 --> 00:02:35,550
na samą liczbę,

39
00:02:35,656 --> 00:02:37,690
potem do tej liczby dodać 1

40
00:02:37,835 --> 00:02:40,635
i dopiero przywrócić piksele.

41
00:02:40,741 --> 00:02:45,302
Możemy to zrobić
za pomocą polecenia "parseFloat",

42
00:02:45,361 --> 00:02:47,253
które przekształci ciąg w liczbę.

43
00:02:47,337 --> 00:02:49,830
Potem możemy otoczyć to wszystko

44
00:02:49,923 --> 00:02:53,011
i na końcu dodać "px".

45
00:02:53,148 --> 00:02:57,725
O! To działa! On rośnie! Tak!

46
00:02:57,797 --> 00:03:01,185
Już widzicie trudność
w animowaniu własności CSS.

47
00:03:01,226 --> 00:03:03,275
Często mają przyklejone jednostki,

48
00:03:03,375 --> 00:03:06,003
więc trzeba je oddzielić...
Oj, rośnie!

49
00:03:06,103 --> 00:03:09,823
Jednostkę trzeba oddzielić,
a potem dołączyć z powrotem.

50
00:03:11,018 --> 00:03:14,505
No dobrze...
Staje się naprawdę przerażający!

51
00:03:14,592 --> 00:03:17,276
Natkniemy się na więcej
przerażających rzeczy,

52
00:03:17,410 --> 00:03:21,131
używając "setInterval"
do animacji właściwości CSS.

53
00:03:21,275 --> 00:03:24,035
Po pierwsze, nie ma gwarancji,

54
00:03:24,135 --> 00:03:28,352
że przeglądarka będzie skrupulatnie
przestrzegać interwału.

55
00:03:28,452 --> 00:03:33,089
Jeśli coś się stanie,
np. użytkownik będzie coś wpisywał,

56
00:03:33,188 --> 00:03:35,890
to przeglądarka
może przywołać funkcję później.

57
00:03:36,036 --> 00:03:38,662
I już nie będzie gładkiej animacji.

58
00:03:38,796 --> 00:03:43,236
Po drugie, przeglądarka przywoła funkcję
nawet gdy ta karta będzie ukryta.

59
00:03:43,329 --> 00:03:46,998
Będzie więc marnować moc komputera.

60
00:03:48,112 --> 00:03:51,735
Dlatego w nowoczesnych
przeglądarkach jest już nowa funkcja,

61
00:03:51,842 --> 00:03:55,358
zaprojektowana z myślą
o animacjach DOM-ów.

62
00:03:55,458 --> 00:03:59,049
Nazywa się
"window.requestAnimationFrame".

63
00:03:59,188 --> 00:04:03,182
Żeby jej użyć,
pozbędziemy się linii "setInterval"

64
00:04:03,291 --> 00:04:05,690
i przywołamy

65
00:04:05,790 --> 00:04:11,402
"requestAnimationFrame"
z wnętrza funkcji.

66
00:04:11,485 --> 00:04:14,815
Damy odniesienie

67
00:04:14,884 --> 00:04:17,671
do funkcji "makeItBigger".

68
00:04:18,832 --> 00:04:22,130
A potem po prostu przywołamy
"makeItBigger"

69
00:04:22,294 --> 00:04:24,010
podczas ładowania strony.

70
00:04:25,112 --> 00:04:27,284
"MakeItBigger"...

71
00:04:27,437 --> 00:04:30,372
O! Okej, on rośnie i to szybko!

72
00:04:30,472 --> 00:04:33,902
Przeglądarka
przywołuje "makeItBigger"

73
00:04:34,004 --> 00:04:35,574
tuż przed odświeżeniem,

74
00:04:35,631 --> 00:04:39,962
z prędkością 60 klatek na sekundę
- dwa razy większą niż poprzednio.

75
00:04:40,106 --> 00:04:43,097
Za każdym razem
do szerokości dodajemy 1 piksel.

76
00:04:43,211 --> 00:04:47,695
Policzmy, przecież dobrze to umiemy.
Dodajemy 60 pikseli na sekundę.

77
00:04:47,806 --> 00:04:52,060
W parę sekund Koleżka
przerasta stronę. Już go nie widać.

78
00:04:53,035 --> 00:04:55,891
Jak spowolnić naszą animację?

79
00:04:56,058 --> 00:04:57,331
Jest kilka sposobów.

80
00:04:57,431 --> 00:05:01,116
Lubię ten, gdy program
obserwuje, ile czasu upłynęło

81
00:05:01,230 --> 00:05:04,808
i na tej podstawie
oblicza nową szerokość.

82
00:05:04,949 --> 00:05:08,895
Najpierw trzeba zapamiętać
czas początkowy, w milisekundach.

83
00:05:08,988 --> 00:05:12,649
Jeszcze zanim funkcja
zostanie przywołana. "var startTime"...

84
00:05:12,765 --> 00:05:16,998
Oj, znowu rośnie.
"new Date().getTime()".

85
00:05:17,098 --> 00:05:20,481
I wewnątrz "makeItBigger"
przechowujemy czas bieżący:

86
00:05:20,611 --> 00:05:26,681
"var currTime = new Date().getTime()".

87
00:05:26,800 --> 00:05:30,164
Dla wygody ustalmy,
że Koleżka ma rosnąć

88
00:05:30,257 --> 00:05:33,902
o 30 pikseli na sekundę,
zaczynając od 50 pikseli.

89
00:05:33,995 --> 00:05:37,269
Obliczmy to więc:

90
00:05:37,463 --> 00:05:42,494
"newWidth = 50"

91
00:05:42,606 --> 00:05:44,491
- to nasza szerokość wyjściowa

92
00:05:44,611 --> 00:05:49,019
plus "currentTime minus startTime".

93
00:05:49,119 --> 00:05:53,307
To w milisekundach,
więc podzielimy przez tysiąc.

94
00:05:53,407 --> 00:05:57,262
A potem mnożymy przez 30.

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

96
00:06:00,738 --> 00:06:05,389
To nowa szerokość - "newWidth".
Teraz przypiszmy

97
00:06:05,489 --> 00:06:07,222
elementowi "style.width"

98
00:06:07,363 --> 00:06:09,986
wartość "newWidth".

99
00:06:10,065 --> 00:06:13,957
..."newWidth"... ach, wreszcie!

100
00:06:14,046 --> 00:06:18,903
I mamy płynną animację:
30 pikseli na sekundę.

101
00:06:19,808 --> 00:06:22,270
Możemy zmienić tę liczbę,

102
00:06:22,370 --> 00:06:26,382
jeśli chcemy,
by Koleżka rósł wolniej lub...

103
00:06:26,482 --> 00:06:27,657
szybciej.

104
00:06:30,861 --> 00:06:34,440
A gdyby tak zatrzymać animację,
gdy Koleżka będzie za duży?

105
00:06:34,540 --> 00:06:37,859
Możemy otoczyć tę linię
warunkiem "if"...

106
00:06:37,959 --> 00:06:42,587
Tę linię... i robić to tylko wtedy,
gdy bieżąca szerokość

107
00:06:42,667 --> 00:06:48,230
jest mniejsza
od danej liczby, np. 300.

108
00:06:48,362 --> 00:06:49,623
Wypróbujmy to.

109
00:06:51,225 --> 00:06:52,479
Dobrze.

110
00:06:52,572 --> 00:06:54,522
A teraz...

111
00:06:54,638 --> 00:06:58,493
"CurrentWidth" wynosi...
Nie, "newWidth".

112
00:06:58,619 --> 00:07:01,418
Dobrze.
Powiedzmy, że jeśli wyniesie 300...

113
00:07:03,787 --> 00:07:07,394
Dalej, Koleżko, dasz radę!

114
00:07:07,494 --> 00:07:08,634
Pięknie.

115
00:07:08,730 --> 00:07:12,518
Ta metoda używania
"requestAnimationFrame"

116
00:07:12,653 --> 00:07:18,415
powinna się sprawdzać, jeśli użytkownik
korzysta z Chrome, Firefox lub IE10+.

117
00:07:18,551 --> 00:07:21,573
Są biblioteki
i podkładki programowe JavaScript,

118
00:07:21,661 --> 00:07:25,196
używające "requestAnimationFrame",
gdy jest to możliwe,

119
00:07:25,351 --> 00:07:30,049
albo, w starszych przeglądarkach,
stosują "setInterval".

120
00:07:30,203 --> 00:07:32,417
Tak to jest przy projektowaniu stron:

121
00:07:32,528 --> 00:07:36,597
strona zmienia się cały czas,
przeglądarki dodają nowe opcje,

122
00:07:36,683 --> 00:07:40,149
projektanci odkrywają
nowe sposoby ich używania...

123
00:07:40,257 --> 00:07:43,563
Musicie stale dowiadywać się,
co jest nowe

124
00:07:43,656 --> 00:07:46,590
i co najlepiej nadaje się
do waszych celów.