WEBVTT

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

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

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

00:00:09.912 --> 00:00:12.605
-- გარდაუვალ უბედურებას
რომ მოასწავებდეს --

00:00:12.605 --> 00:00:17.450
ამისი გაკეთების ერთი გზა
არის CSS-ის სტილის ანიმირება

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

00:00:20.232 --> 00:00:32.074
პირველი ნაბიჯისთვის,
სურათს ცვლადში მოვათავსებთ,

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

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

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

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

00:00:48.899 --> 00:00:59.860
ავიღებთ წინა style.width-ს
და დავუმატებთ ერთს.

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

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

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

00:01:18.735 --> 00:01:26.159
მოდით იყოს 30 კადრი წამში.

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

00:01:31.504 --> 00:01:40.792
რა არის ohnoes.style.width-ის
მნიშვნელობა ამ ხაზის შემდეგ?

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

00:01:46.224 --> 00:01:50.134
მაგრამ მოდით ვნახოთ
რა იქნება ohnoes.style.width

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

00:02:05.543 --> 00:02:07.768
რას უდრის 50px პლუს ერთი?

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

00:02:10.767 --> 00:02:16.087
მაგრამ ჯავასკრიპტი
50px-ს აღიქვამს string-ად,

00:02:16.087 --> 00:02:22.122
ამიტომ პასუხი გამოვა
50px1, რაც უშინაარსოა.

00:02:22.122 --> 00:02:29.673
ესეიგი, ბრაუზერი უბრალოდ
არ აქცევს ყურადღებას ამ უშინაარსობას.

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

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

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

00:02:41.345 --> 00:02:45.824
ამისთვის ეს სიდიდე თავიდან
მოვათავსოთ parseFloat-ში,

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

00:02:47.888 --> 00:02:53.165
შემდეგ ვუმატებთ ერთს და
ბოლოს ისევ ვუმატებთ px-ს.

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

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

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

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

00:03:12.611 --> 00:03:16.397
CSS-ის ანიმაციების
თვისებებთან setInterval-ის გამოყენებისას

00:03:16.466 --> 00:03:21.541
არის გარკვეული სირთულეები.

00:03:21.541 --> 00:03:24.261
პირველი, ბრაუზერი
არ იძლევა იმის გარანტიას,

00:03:24.261 --> 00:03:28.401
რომ ზუსტად ისე შეასრულებს
პაუზას როგორც მივუთითებთ.

00:03:28.401 --> 00:03:33.363
თუ სხვა რაღაცები ჩაერია,
მაგალითად ბეჭდვა მომხმარებლისგან,

00:03:33.363 --> 00:03:36.187
შესაძლოა callback უფრო
გვიან იქნეს გამოძახებული.

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

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

00:03:41.437 --> 00:03:43.352
როცა ეს tab დახურულია.

00:03:43.352 --> 00:03:47.934
ეს არაა საჭირო მაგრამ
კომპიუტერის მეხსიერებას მაინც იკავებს.

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

00:03:52.084 --> 00:03:55.604
სპეციალურად ასეთი ანიმაციებისთვის

00:03:55.604 --> 00:03:59.034
და ეწოდება
window.requestAnimationFrame

00:03:59.034 --> 00:04:03.110
მის გამოსაყენებლად
მოვიშოროთ setInterval ხაზი.

00:04:03.110 --> 00:04:11.669
გამოვიძახოთ requestAnimationFrame
ფუნქციის შიგნიდან

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

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

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

00:04:30.986 --> 00:04:35.859
ბრაუზერი ახლა
makeItBigger-ს დახატვამდე იძახებს,

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

00:04:38.290 --> 00:04:40.885
წინანდელზე ორჯერ სწრაფი.

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

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

00:04:47.814 --> 00:04:51.205
რამდენიმე წამში
გამოსახულება გვერდზე დიდი ხდება

00:04:51.205 --> 00:04:53.352
უკვე აღარც ჩანს.

00:04:53.352 --> 00:04:56.324
როგორ შევანელოთ ანიმაცია?

00:04:56.324 --> 00:04:59.314
რამდენიმე გზა არსებობს.
ჩემი საყვარელი გზაა იმაზე დაკვირვება,

00:04:59.314 --> 00:05:04.378
თუ რა დრო გავიდა და ახალი
სიგანის ამის მიხედვით გამოთვლა.

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

00:05:11.162 --> 00:05:17.502
var startTime = new Date().getTime();

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

00:05:20.992 --> 00:05:26.953
var currTime = new Date().getTime();

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

00:05:31.863 --> 00:05:37.121
და დაწყება 50 პიქსელით.

00:05:37.121 --> 00:05:43.949
ახალი სიგანე ტოლი
იყოს 50-ს, საწყის სიგანეს,

00:05:44.059 --> 00:05:49.151
დამატებული მოცემული
დრო, მინუს საწყისი დრო,

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

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

00:06:00.400 --> 00:06:10.125
ეს ახალი სიგანეა, ახლა კი
style.width გავუტოლოთ ახალ სიგანეს.

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

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

00:06:20.252 --> 00:06:31.207
შეგვიძლია ეს რიცხვი შევცვალოთ თუ
უფრო ნელა ან სწრაფად გვინდა ზრდა.

00:06:31.207 --> 00:06:34.681
როგორ შევაჩეროთ
ანიმაცია თუ ის ძალიან დიდი გახდა?

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

00:06:38.213 --> 00:06:42.820
და შევასრულოთ მხოლოდ
იმ შემთხვევაში, თუ მოცემული სიგანე

00:06:42.820 --> 00:06:48.249
გარკვეულ რიცხვზე ნაკლები
იქნება, მაგალითად 300.

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

00:07:07.002 --> 00:07:09.419
მშვენიერია!

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

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

00:07:18.126 --> 00:07:21.937
ჯავასკრიპტის მრავალგვარი
ბიბლიოთეკა არსებობს,

00:07:21.937 --> 00:07:25.727
რომელიც მოითხოვს requestAnimationFrame-ს
როცა ის მიწვდომადია

00:07:25.727 --> 00:07:30.448
უფრო ძველ ბრაუზერებში
კი setInterval-ს დაუბრუნდება.

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

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

00:07:37.163 --> 00:07:40.453
დეველოპერები მათი
გამოყენების ახალ გზებს პოულობენ..

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

00:07:43.890 --> 00:07:46.651
და რა უკეთესი იმისთვის,
რაც თქვენ გინდათ გააკეთოთ.