0:00:00.391,0:00:03.933
დავუბრუნდეთ Oh noes-ის დროის ათვლას.

0:00:03.933,0:00:07.288
როგორ მოვიქცეთ თუ გვინდა[br]Oh noes გამოსახულება გაიზარდოს,

0:00:07.288,0:00:09.912
როცა დროის ათვლა ნულს მიუახლოვდება?

0:00:09.912,0:00:12.605
-- გარდაუვალ უბედურებას[br]რომ მოასწავებდეს --

0:00:12.605,0:00:17.450
ამისი გაკეთების ერთი გზა[br]არის CSS-ის სტილის ანიმირება

0:00:17.450,0:00:20.232
Window.setInterval-ის გამოყენებით.

0:00:20.232,0:00:32.074
პირველი ნაბიჯისთვის,[br]სურათს ცვლადში მოვათავსებთ,

0:00:32.074,0:00:34.900
შემდეგ, დავწერთ საწყის სტილს,

0:00:34.900,0:00:39.191
ეს იმისთვის, რომ რამით დავიწყოთ.

0:00:39.191,0:00:44.232
შემდეგ კი დავწერთ makeItBigger ფუნქციას.

0:00:44.232,0:00:48.899
აქ საჭირო იქნება style.width-ის შეცვლა,

0:00:48.899,0:00:59.860
ავიღებთ წინა style.width-ს[br]და დავუმატებთ ერთს.

0:00:59.906,0:01:07.234
საბოლოოდ, ამ ფუნქციით[br]გამოვიძახებთ setInterval-ს,

0:01:07.234,0:01:11.786
-- რამდენად ხშირად გვინდა იზრებოდეს?

0:01:11.786,0:01:18.735
სუფთა ანიმაცია გვინდა, რაც ნიშნავს[br]დაახლოებით 24-დან 60 კადრამდე წამში.

0:01:18.735,0:01:26.159
მოდით იყოს 30 კადრი წამში.

0:01:26.159,0:01:31.504
არ მუშაობს. ხედავთ რატომ? ცოტა ეშმაკურია.

0:01:31.504,0:01:40.792
რა არის ohnoes.style.width-ის[br]მნიშვნელობა ამ ხაზის შემდეგ?

0:01:40.852,0:01:46.224
შეიძლება იფიქროთ,[br]რომ 50px გადადის 51px-ში,

0:01:46.224,0:01:50.134
მაგრამ მოდით ვნახოთ[br]რა იქნება ohnoes.style.width

0:01:58.184,0:02:05.543
50px-ს ვუმატებთ ერთს.

0:02:05.543,0:02:07.768
რას უდრის 50px პლუს ერთი?

0:02:07.817,0:02:10.767
შეიძლება იფიქროთ რომ ეს 51px იქნება,

0:02:10.767,0:02:16.087
მაგრამ ჯავასკრიპტი[br]50px-ს აღიქვამს string-ად,

0:02:16.087,0:02:22.122
ამიტომ პასუხი გამოვა[br]50px1, რაც უშინაარსოა.

0:02:22.122,0:02:29.673
ესეიგი, ბრაუზერი უბრალოდ[br]არ აქცევს ყურადღებას ამ უშინაარსობას.

0:02:29.704,0:02:35.733
საჭიროა ეს სიდიდე რიცხვად გადავიყვანოთ,

0:02:35.777,0:02:37.634
შემდეგ, რიცხვს დავუმატოთ ერთი,

0:02:37.675,0:02:41.345
შემდეგ კი ისევ გადავაქციოთ px-ად.

0:02:41.345,0:02:45.824
ამისთვის ეს სიდიდე თავიდან[br]მოვათავსოთ parseFloat-ში,

0:02:45.824,0:02:47.888
რაც მას რიცხვად გადააქცევს,

0:02:47.888,0:02:53.165
შემდეგ ვუმატებთ ერთს და[br]ბოლოს ისევ ვუმატებთ px-ს.

0:02:53.165,0:02:57.977
ძალიან კარგი, იზრდება!

0:02:57.977,0:03:03.309
როგორც ხედავთ, CSS-ის ანიმაციებში[br]ზოგჯერ საქმე გვაქვს ერთეულებთან,

0:03:03.309,0:03:08.586
რომლებიც უნდა მოვაშოროთ სიდედეებს,

0:03:08.586,0:03:12.549
შემდეგ კი ისევ დავაბრუნოთ.

0:03:12.611,0:03:16.397
CSS-ის ანიმაციების[br]თვისებებთან setInterval-ის გამოყენებისას

0:03:16.466,0:03:21.541
არის გარკვეული სირთულეები.

0:03:21.541,0:03:24.261
პირველი, ბრაუზერი[br]არ იძლევა იმის გარანტიას,

0:03:24.261,0:03:28.401
რომ ზუსტად ისე შეასრულებს[br]პაუზას როგორც მივუთითებთ.

0:03:28.401,0:03:33.363
თუ სხვა რაღაცები ჩაერია,[br]მაგალითად ბეჭდვა მომხმარებლისგან,

0:03:33.363,0:03:36.187
შესაძლოა callback უფრო[br]გვიან იქნეს გამოძახებული.

0:03:36.258,0:03:38.710
მაშინ სუფთა ანიმაციას ვერ მივიღებთ.

0:03:38.710,0:03:41.437
მეორე - ბრაუზერი იმ[br]შემთხვევაშიც გამოიძახებს ფუნქციას,

0:03:41.437,0:03:43.352
როცა ეს tab დახურულია.

0:03:43.352,0:03:47.934
ეს არაა საჭირო მაგრამ[br]კომპიუტერის მეხსიერებას მაინც იკავებს.

0:03:47.934,0:03:52.084
ამიტომ თანამედროვე[br]ბრაუზერებში სხვა ფუნქცია არსებობს,

0:03:52.084,0:03:55.604
სპეციალურად ასეთი ანიმაციებისთვის

0:03:55.604,0:03:59.034
და ეწოდება[br]window.requestAnimationFrame

0:03:59.034,0:04:03.110
მის გამოსაყენებლად[br]მოვიშოროთ setInterval ხაზი.

0:04:03.110,0:04:11.669
გამოვიძახოთ requestAnimationFrame[br]ფუნქციის შიგნიდან

0:04:11.669,0:04:18.463
და მივუთითოთ makeItBigger ფუნქციაზე,

0:04:18.463,0:04:26.768
შემდეგ კი makeItBigger-ს გამოვიძახებთ.

0:04:26.768,0:04:30.986
ამჯერად გაცილებით სწრაფია!

0:04:30.986,0:04:35.859
ბრაუზერი ახლა[br]makeItBigger-ს დახატვამდე იძახებს,

0:04:35.859,0:04:38.290
რაც დაახლოებით 60 კადრია წამში,

0:04:38.290,0:04:40.885
წინანდელზე ორჯერ სწრაფი.

0:04:40.885,0:04:43.652
სიგანეს ყოველ ჯერზე ერთ პიქსელს ვუმატებთ.

0:04:43.652,0:04:47.814
ესეიგი წამში ვუმატებთ 60 პიქსელს.

0:04:47.814,0:04:51.205
რამდენიმე წამში[br]გამოსახულება გვერდზე დიდი ხდება

0:04:51.205,0:04:53.352
უკვე აღარც ჩანს.

0:04:53.352,0:04:56.324
როგორ შევანელოთ ანიმაცია?

0:04:56.324,0:04:59.314
რამდენიმე გზა არსებობს.[br]ჩემი საყვარელი გზაა იმაზე დაკვირვება,

0:04:59.314,0:05:04.378
თუ რა დრო გავიდა და ახალი[br]სიგანის ამის მიხედვით გამოთვლა.

0:05:04.498,0:05:11.162
ვიწყებთ საწყისი დროის დამახსოვრებით,[br]მილიწამებში, ფუნქციის გამოძახებამდე.

0:05:11.162,0:05:17.502
var startTime = new Date().getTime();

0:05:17.502,0:05:20.992
makeItBigger-ში მოვათავსებთ მოცემულ დროს.

0:05:20.992,0:05:26.953
var currTime = new Date().getTime();

0:05:26.953,0:05:31.863
ვთქვათ, გვინდა 30[br]პიქსელი-წამში სიჩქარით ზრდა

0:05:31.863,0:05:37.121
და დაწყება 50 პიქსელით.

0:05:37.121,0:05:43.949
ახალი სიგანე ტოლი[br]იყოს 50-ს, საწყის სიგანეს,

0:05:44.059,0:05:49.151
დამატებული მოცემული[br]დრო, მინუს საწყისი დრო,

0:05:49.151,0:05:53.263
მილიწამებში ვართ, ამიტომ ვყოფთ 1000-ზე,

0:05:53.263,0:06:00.400
შემდეგ კი პლუს 30,[br]რადგან წამში 30-ით გვინდა გაზრდა.

0:06:00.400,0:06:10.125
ეს ახალი სიგანეა, ახლა კი[br]style.width გავუტოლოთ ახალ სიგანეს.

0:06:10.125,0:06:12.626
გავუტოლოთ newWidth + px-ს.

0:06:12.626,0:06:20.252
ესეც ასე, სუფთა, 30px/წამი ანიმაცია.

0:06:20.252,0:06:31.207
შეგვიძლია ეს რიცხვი შევცვალოთ თუ[br]უფრო ნელა ან სწრაფად გვინდა ზრდა.

0:06:31.207,0:06:34.681
როგორ შევაჩეროთ[br]ანიმაცია თუ ის ძალიან დიდი გახდა?

0:06:34.681,0:06:38.213
შეგვიძლია ეს ხაზი მოვათავსოთ if-ში

0:06:38.213,0:06:42.820
და შევასრულოთ მხოლოდ[br]იმ შემთხვევაში, თუ მოცემული სიგანე

0:06:42.820,0:06:48.249
გარკვეულ რიცხვზე ნაკლები[br]იქნება, მაგალითად 300.

0:06:59.239,0:07:07.002
ვნახოთ, თუ გაჩერდება 300-ზე.

0:07:07.002,0:07:09.419
მშვენიერია!

0:07:09.419,0:07:13.181
requestAnimationFrame ტექნიკა იმუშავებს,

0:07:13.181,0:07:18.126
თუ მომხმარებელი იყენებს[br]Chrome-ს, Firefox-ს, ან IE10+-ს.

0:07:18.126,0:07:21.937
ჯავასკრიპტის მრავალგვარი[br]ბიბლიოთეკა არსებობს,

0:07:21.937,0:07:25.727
რომელიც მოითხოვს requestAnimationFrame-ს[br]როცა ის მიწვდომადია

0:07:25.727,0:07:30.448
უფრო ძველ ბრაუზერებში[br]კი setInterval-ს დაუბრუნდება.

0:07:30.448,0:07:34.962
web development ყოველთვის იცვლება,

0:07:34.962,0:07:37.163
ბრაუზერები ახალ თვისებებს ამატებენ,

0:07:37.163,0:07:40.453
დეველოპერები მათი[br]გამოყენების ახალ გზებს პოულობენ..

0:07:40.453,0:07:43.890
ყოველთვის უნდა სწავლობდეთ რა არის ახალი

0:07:43.890,0:07:46.651
და რა უკეთესი იმისთვის,[br]რაც თქვენ გინდათ გააკეთოთ.