1
00:00:00,391 --> 00:00:03,933
დავუბრუნდეთ Oh noes-ის დროის ათვლას.

2
00:00:03,933 --> 00:00:07,288
როგორ მოვიქცეთ თუ გვინდა
Oh noes გამოსახულება გაიზარდოს,

3
00:00:07,288 --> 00:00:09,912
როცა დროის ათვლა ნულს მიუახლოვდება?

4
00:00:09,912 --> 00:00:12,605
-- გარდაუვალ უბედურებას
რომ მოასწავებდეს --

5
00:00:12,605 --> 00:00:17,450
ამისი გაკეთების ერთი გზა
არის CSS-ის სტილის ანიმირება

6
00:00:17,450 --> 00:00:20,232
Window.setInterval-ის გამოყენებით.

7
00:00:20,232 --> 00:00:32,074
პირველი ნაბიჯისთვის,
სურათს ცვლადში მოვათავსებთ,

8
00:00:32,074 --> 00:00:34,900
შემდეგ, დავწერთ საწყის სტილს,

9
00:00:34,900 --> 00:00:39,191
ეს იმისთვის, რომ რამით დავიწყოთ.

10
00:00:39,191 --> 00:00:44,232
შემდეგ კი დავწერთ makeItBigger ფუნქციას.

11
00:00:44,232 --> 00:00:48,899
აქ საჭირო იქნება style.width-ის შეცვლა,

12
00:00:48,899 --> 00:00:59,860
ავიღებთ წინა style.width-ს
და დავუმატებთ ერთს.

13
00:00:59,906 --> 00:01:07,234
საბოლოოდ, ამ ფუნქციით
გამოვიძახებთ setInterval-ს,

14
00:01:07,234 --> 00:01:11,786
-- რამდენად ხშირად გვინდა იზრებოდეს?

15
00:01:11,786 --> 00:01:18,735
სუფთა ანიმაცია გვინდა, რაც ნიშნავს
დაახლოებით 24-დან 60 კადრამდე წამში.

16
00:01:18,735 --> 00:01:26,159
მოდით იყოს 30 კადრი წამში.

17
00:01:26,159 --> 00:01:31,504
არ მუშაობს. ხედავთ რატომ? ცოტა ეშმაკურია.

18
00:01:31,504 --> 00:01:40,792
რა არის ohnoes.style.width-ის
მნიშვნელობა ამ ხაზის შემდეგ?

19
00:01:40,852 --> 00:01:46,224
შეიძლება იფიქროთ,
რომ 50px გადადის 51px-ში,

20
00:01:46,224 --> 00:01:50,134
მაგრამ მოდით ვნახოთ
რა იქნება ohnoes.style.width

21
00:01:58,184 --> 00:02:05,543
50px-ს ვუმატებთ ერთს.

22
00:02:05,543 --> 00:02:07,768
რას უდრის 50px პლუს ერთი?

23
00:02:07,817 --> 00:02:10,767
შეიძლება იფიქროთ რომ ეს 51px იქნება,

24
00:02:10,767 --> 00:02:16,087
მაგრამ ჯავასკრიპტი
50px-ს აღიქვამს string-ად,

25
00:02:16,087 --> 00:02:22,122
ამიტომ პასუხი გამოვა
50px1, რაც უშინაარსოა.

26
00:02:22,122 --> 00:02:29,673
ესეიგი, ბრაუზერი უბრალოდ
არ აქცევს ყურადღებას ამ უშინაარსობას.

27
00:02:29,704 --> 00:02:35,733
საჭიროა ეს სიდიდე რიცხვად გადავიყვანოთ,

28
00:02:35,777 --> 00:02:37,634
შემდეგ, რიცხვს დავუმატოთ ერთი,

29
00:02:37,675 --> 00:02:41,345
შემდეგ კი ისევ გადავაქციოთ px-ად.

30
00:02:41,345 --> 00:02:45,824
ამისთვის ეს სიდიდე თავიდან
მოვათავსოთ parseFloat-ში,

31
00:02:45,824 --> 00:02:47,888
რაც მას რიცხვად გადააქცევს,

32
00:02:47,888 --> 00:02:53,165
შემდეგ ვუმატებთ ერთს და
ბოლოს ისევ ვუმატებთ px-ს.

33
00:02:53,165 --> 00:02:57,977
ძალიან კარგი, იზრდება!

34
00:02:57,977 --> 00:03:03,309
როგორც ხედავთ, CSS-ის ანიმაციებში
ზოგჯერ საქმე გვაქვს ერთეულებთან,

35
00:03:03,309 --> 00:03:08,586
რომლებიც უნდა მოვაშოროთ სიდედეებს,

36
00:03:08,586 --> 00:03:12,549
შემდეგ კი ისევ დავაბრუნოთ.

37
00:03:12,611 --> 00:03:16,397
CSS-ის ანიმაციების
თვისებებთან setInterval-ის გამოყენებისას

38
00:03:16,466 --> 00:03:21,541
არის გარკვეული სირთულეები.

39
00:03:21,541 --> 00:03:24,261
პირველი, ბრაუზერი
არ იძლევა იმის გარანტიას,

40
00:03:24,261 --> 00:03:28,401
რომ ზუსტად ისე შეასრულებს
პაუზას როგორც მივუთითებთ.

41
00:03:28,401 --> 00:03:33,363
თუ სხვა რაღაცები ჩაერია,
მაგალითად ბეჭდვა მომხმარებლისგან,

42
00:03:33,363 --> 00:03:36,187
შესაძლოა callback უფრო
გვიან იქნეს გამოძახებული.

43
00:03:36,258 --> 00:03:38,710
მაშინ სუფთა ანიმაციას ვერ მივიღებთ.

44
00:03:38,710 --> 00:03:41,437
მეორე - ბრაუზერი იმ
შემთხვევაშიც გამოიძახებს ფუნქციას,

45
00:03:41,437 --> 00:03:43,352
როცა ეს tab დახურულია.

46
00:03:43,352 --> 00:03:47,934
ეს არაა საჭირო მაგრამ
კომპიუტერის მეხსიერებას მაინც იკავებს.

47
00:03:47,934 --> 00:03:52,084
ამიტომ თანამედროვე
ბრაუზერებში სხვა ფუნქცია არსებობს,

48
00:03:52,084 --> 00:03:55,604
სპეციალურად ასეთი ანიმაციებისთვის

49
00:03:55,604 --> 00:03:59,034
და ეწოდება
window.requestAnimationFrame

50
00:03:59,034 --> 00:04:03,110
მის გამოსაყენებლად
მოვიშოროთ setInterval ხაზი.

51
00:04:03,110 --> 00:04:11,669
გამოვიძახოთ requestAnimationFrame
ფუნქციის შიგნიდან

52
00:04:11,669 --> 00:04:18,463
და მივუთითოთ makeItBigger ფუნქციაზე,

53
00:04:18,463 --> 00:04:26,768
შემდეგ კი makeItBigger-ს გამოვიძახებთ.

54
00:04:26,768 --> 00:04:30,986
ამჯერად გაცილებით სწრაფია!

55
00:04:30,986 --> 00:04:35,859
ბრაუზერი ახლა
makeItBigger-ს დახატვამდე იძახებს,

56
00:04:35,859 --> 00:04:38,290
რაც დაახლოებით 60 კადრია წამში,

57
00:04:38,290 --> 00:04:40,885
წინანდელზე ორჯერ სწრაფი.

58
00:04:40,885 --> 00:04:43,652
სიგანეს ყოველ ჯერზე ერთ პიქსელს ვუმატებთ.

59
00:04:43,652 --> 00:04:47,814
ესეიგი წამში ვუმატებთ 60 პიქსელს.

60
00:04:47,814 --> 00:04:51,205
რამდენიმე წამში
გამოსახულება გვერდზე დიდი ხდება

61
00:04:51,205 --> 00:04:53,352
უკვე აღარც ჩანს.

62
00:04:53,352 --> 00:04:56,324
როგორ შევანელოთ ანიმაცია?

63
00:04:56,324 --> 00:04:59,314
რამდენიმე გზა არსებობს.
ჩემი საყვარელი გზაა იმაზე დაკვირვება,

64
00:04:59,314 --> 00:05:04,378
თუ რა დრო გავიდა და ახალი
სიგანის ამის მიხედვით გამოთვლა.

65
00:05:04,498 --> 00:05:11,162
ვიწყებთ საწყისი დროის დამახსოვრებით,
მილიწამებში, ფუნქციის გამოძახებამდე.

66
00:05:11,162 --> 00:05:17,502
var startTime = new Date().getTime();

67
00:05:17,502 --> 00:05:20,992
makeItBigger-ში მოვათავსებთ მოცემულ დროს.

68
00:05:20,992 --> 00:05:26,953
var currTime = new Date().getTime();

69
00:05:26,953 --> 00:05:31,863
ვთქვათ, გვინდა 30
პიქსელი-წამში სიჩქარით ზრდა

70
00:05:31,863 --> 00:05:37,121
და დაწყება 50 პიქსელით.

71
00:05:37,121 --> 00:05:43,949
ახალი სიგანე ტოლი
იყოს 50-ს, საწყის სიგანეს,

72
00:05:44,059 --> 00:05:49,151
დამატებული მოცემული
დრო, მინუს საწყისი დრო,

73
00:05:49,151 --> 00:05:53,263
მილიწამებში ვართ, ამიტომ ვყოფთ 1000-ზე,

74
00:05:53,263 --> 00:06:00,400
შემდეგ კი პლუს 30,
რადგან წამში 30-ით გვინდა გაზრდა.

75
00:06:00,400 --> 00:06:10,125
ეს ახალი სიგანეა, ახლა კი
style.width გავუტოლოთ ახალ სიგანეს.

76
00:06:10,125 --> 00:06:12,626
გავუტოლოთ newWidth + px-ს.

77
00:06:12,626 --> 00:06:20,252
ესეც ასე, სუფთა, 30px/წამი ანიმაცია.

78
00:06:20,252 --> 00:06:31,207
შეგვიძლია ეს რიცხვი შევცვალოთ თუ
უფრო ნელა ან სწრაფად გვინდა ზრდა.

79
00:06:31,207 --> 00:06:34,681
როგორ შევაჩეროთ
ანიმაცია თუ ის ძალიან დიდი გახდა?

80
00:06:34,681 --> 00:06:38,213
შეგვიძლია ეს ხაზი მოვათავსოთ if-ში

81
00:06:38,213 --> 00:06:42,820
და შევასრულოთ მხოლოდ
იმ შემთხვევაში, თუ მოცემული სიგანე

82
00:06:42,820 --> 00:06:48,249
გარკვეულ რიცხვზე ნაკლები
იქნება, მაგალითად 300.

83
00:06:59,239 --> 00:07:07,002
ვნახოთ, თუ გაჩერდება 300-ზე.

84
00:07:07,002 --> 00:07:09,419
მშვენიერია!

85
00:07:09,419 --> 00:07:13,181
requestAnimationFrame ტექნიკა იმუშავებს,

86
00:07:13,181 --> 00:07:18,126
თუ მომხმარებელი იყენებს
Chrome-ს, Firefox-ს, ან IE10+-ს.

87
00:07:18,126 --> 00:07:21,937
ჯავასკრიპტის მრავალგვარი
ბიბლიოთეკა არსებობს,

88
00:07:21,937 --> 00:07:25,727
რომელიც მოითხოვს requestAnimationFrame-ს
როცა ის მიწვდომადია

89
00:07:25,727 --> 00:07:30,448
უფრო ძველ ბრაუზერებში
კი setInterval-ს დაუბრუნდება.

90
00:07:30,448 --> 00:07:34,962
web development ყოველთვის იცვლება,

91
00:07:34,962 --> 00:07:37,163
ბრაუზერები ახალ თვისებებს ამატებენ,

92
00:07:37,163 --> 00:07:40,453
დეველოპერები მათი
გამოყენების ახალ გზებს პოულობენ..

93
00:07:40,453 --> 00:07:43,890
ყოველთვის უნდა სწავლობდეთ რა არის ახალი

94
00:07:43,890 --> 00:07:46,651
და რა უკეთესი იმისთვის,
რაც თქვენ გინდათ გააკეთოთ.