[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.39,0:00:03.93,Default,,0000,0000,0000,,დავუბრუნდეთ Oh noes-ის დროის ათვლას.
Dialogue: 0,0:00:03.93,0:00:07.29,Default,,0000,0000,0000,,როგორ მოვიქცეთ თუ გვინდა\NOh noes გამოსახულება გაიზარდოს,
Dialogue: 0,0:00:07.29,0:00:09.91,Default,,0000,0000,0000,,როცა დროის ათვლა ნულს მიუახლოვდება?
Dialogue: 0,0:00:09.91,0:00:12.60,Default,,0000,0000,0000,,-- გარდაუვალ უბედურებას\Nრომ მოასწავებდეს --
Dialogue: 0,0:00:12.60,0:00:17.45,Default,,0000,0000,0000,,ამისი გაკეთების ერთი გზა\Nარის CSS-ის სტილის ანიმირება
Dialogue: 0,0:00:17.45,0:00:20.23,Default,,0000,0000,0000,,Window.setInterval-ის გამოყენებით.
Dialogue: 0,0:00:20.23,0:00:32.07,Default,,0000,0000,0000,,პირველი ნაბიჯისთვის,\Nსურათს ცვლადში მოვათავსებთ,
Dialogue: 0,0:00:32.07,0:00:34.90,Default,,0000,0000,0000,,შემდეგ, დავწერთ საწყის სტილს,
Dialogue: 0,0:00:34.90,0:00:39.19,Default,,0000,0000,0000,,ეს იმისთვის, რომ რამით დავიწყოთ.
Dialogue: 0,0:00:39.19,0:00:44.23,Default,,0000,0000,0000,,შემდეგ კი დავწერთ makeItBigger ფუნქციას.
Dialogue: 0,0:00:44.23,0:00:48.90,Default,,0000,0000,0000,,აქ საჭირო იქნება style.width-ის შეცვლა,
Dialogue: 0,0:00:48.90,0:00:59.86,Default,,0000,0000,0000,,ავიღებთ წინა style.width-ს\Nდა დავუმატებთ ერთს.
Dialogue: 0,0:00:59.91,0:01:07.23,Default,,0000,0000,0000,,საბოლოოდ, ამ ფუნქციით\Nგამოვიძახებთ setInterval-ს,
Dialogue: 0,0:01:07.23,0:01:11.79,Default,,0000,0000,0000,,-- რამდენად ხშირად გვინდა იზრებოდეს?
Dialogue: 0,0:01:11.79,0:01:18.74,Default,,0000,0000,0000,,სუფთა ანიმაცია გვინდა, რაც ნიშნავს\Nდაახლოებით 24-დან 60 კადრამდე წამში.
Dialogue: 0,0:01:18.74,0:01:26.16,Default,,0000,0000,0000,,მოდით იყოს 30 კადრი წამში.
Dialogue: 0,0:01:26.16,0:01:31.50,Default,,0000,0000,0000,,არ მუშაობს. ხედავთ რატომ? ცოტა ეშმაკურია.
Dialogue: 0,0:01:31.50,0:01:40.79,Default,,0000,0000,0000,,რა არის ohnoes.style.width-ის\Nმნიშვნელობა ამ ხაზის შემდეგ?
Dialogue: 0,0:01:40.85,0:01:46.22,Default,,0000,0000,0000,,შეიძლება იფიქროთ,\Nრომ 50px გადადის 51px-ში,
Dialogue: 0,0:01:46.22,0:01:50.13,Default,,0000,0000,0000,,მაგრამ მოდით ვნახოთ\Nრა იქნება ohnoes.style.width
Dialogue: 0,0:01:58.18,0:02:05.54,Default,,0000,0000,0000,,50px-ს ვუმატებთ ერთს.
Dialogue: 0,0:02:05.54,0:02:07.77,Default,,0000,0000,0000,,რას უდრის 50px პლუს ერთი?
Dialogue: 0,0:02:07.82,0:02:10.77,Default,,0000,0000,0000,,შეიძლება იფიქროთ რომ ეს 51px იქნება,
Dialogue: 0,0:02:10.77,0:02:16.09,Default,,0000,0000,0000,,მაგრამ ჯავასკრიპტი\N50px-ს აღიქვამს string-ად,
Dialogue: 0,0:02:16.09,0:02:22.12,Default,,0000,0000,0000,,ამიტომ პასუხი გამოვა\N50px1, რაც უშინაარსოა.
Dialogue: 0,0:02:22.12,0:02:29.67,Default,,0000,0000,0000,,ესეიგი, ბრაუზერი უბრალოდ\Nარ აქცევს ყურადღებას ამ უშინაარსობას.
Dialogue: 0,0:02:29.70,0:02:35.73,Default,,0000,0000,0000,,საჭიროა ეს სიდიდე რიცხვად გადავიყვანოთ,
Dialogue: 0,0:02:35.78,0:02:37.63,Default,,0000,0000,0000,,შემდეგ, რიცხვს დავუმატოთ ერთი,
Dialogue: 0,0:02:37.68,0:02:41.34,Default,,0000,0000,0000,,შემდეგ კი ისევ გადავაქციოთ px-ად.
Dialogue: 0,0:02:41.34,0:02:45.82,Default,,0000,0000,0000,,ამისთვის ეს სიდიდე თავიდან\Nმოვათავსოთ parseFloat-ში,
Dialogue: 0,0:02:45.82,0:02:47.89,Default,,0000,0000,0000,,რაც მას რიცხვად გადააქცევს,
Dialogue: 0,0:02:47.89,0:02:53.16,Default,,0000,0000,0000,,შემდეგ ვუმატებთ ერთს და\Nბოლოს ისევ ვუმატებთ px-ს.
Dialogue: 0,0:02:53.16,0:02:57.98,Default,,0000,0000,0000,,ძალიან კარგი, იზრდება!
Dialogue: 0,0:02:57.98,0:03:03.31,Default,,0000,0000,0000,,როგორც ხედავთ, CSS-ის ანიმაციებში\Nზოგჯერ საქმე გვაქვს ერთეულებთან,
Dialogue: 0,0:03:03.31,0:03:08.59,Default,,0000,0000,0000,,რომლებიც უნდა მოვაშოროთ სიდედეებს,
Dialogue: 0,0:03:08.59,0:03:12.55,Default,,0000,0000,0000,,შემდეგ კი ისევ დავაბრუნოთ.
Dialogue: 0,0:03:12.61,0:03:16.40,Default,,0000,0000,0000,,CSS-ის ანიმაციების\Nთვისებებთან setInterval-ის გამოყენებისას
Dialogue: 0,0:03:16.47,0:03:21.54,Default,,0000,0000,0000,,არის გარკვეული სირთულეები.
Dialogue: 0,0:03:21.54,0:03:24.26,Default,,0000,0000,0000,,პირველი, ბრაუზერი\Nარ იძლევა იმის გარანტიას,
Dialogue: 0,0:03:24.26,0:03:28.40,Default,,0000,0000,0000,,რომ ზუსტად ისე შეასრულებს\Nპაუზას როგორც მივუთითებთ.
Dialogue: 0,0:03:28.40,0:03:33.36,Default,,0000,0000,0000,,თუ სხვა რაღაცები ჩაერია,\Nმაგალითად ბეჭდვა მომხმარებლისგან,
Dialogue: 0,0:03:33.36,0:03:36.19,Default,,0000,0000,0000,,შესაძლოა callback უფრო\Nგვიან იქნეს გამოძახებული.
Dialogue: 0,0:03:36.26,0:03:38.71,Default,,0000,0000,0000,,მაშინ სუფთა ანიმაციას ვერ მივიღებთ.
Dialogue: 0,0:03:38.71,0:03:41.44,Default,,0000,0000,0000,,მეორე - ბრაუზერი იმ\Nშემთხვევაშიც გამოიძახებს ფუნქციას,
Dialogue: 0,0:03:41.44,0:03:43.35,Default,,0000,0000,0000,,როცა ეს tab დახურულია.
Dialogue: 0,0:03:43.35,0:03:47.93,Default,,0000,0000,0000,,ეს არაა საჭირო მაგრამ\Nკომპიუტერის მეხსიერებას მაინც იკავებს.
Dialogue: 0,0:03:47.93,0:03:52.08,Default,,0000,0000,0000,,ამიტომ თანამედროვე\Nბრაუზერებში სხვა ფუნქცია არსებობს,
Dialogue: 0,0:03:52.08,0:03:55.60,Default,,0000,0000,0000,,სპეციალურად ასეთი ანიმაციებისთვის
Dialogue: 0,0:03:55.60,0:03:59.03,Default,,0000,0000,0000,,და ეწოდება\Nwindow.requestAnimationFrame
Dialogue: 0,0:03:59.03,0:04:03.11,Default,,0000,0000,0000,,მის გამოსაყენებლად\Nმოვიშოროთ setInterval ხაზი.
Dialogue: 0,0:04:03.11,0:04:11.67,Default,,0000,0000,0000,,გამოვიძახოთ requestAnimationFrame\Nფუნქციის შიგნიდან
Dialogue: 0,0:04:11.67,0:04:18.46,Default,,0000,0000,0000,,და მივუთითოთ makeItBigger ფუნქციაზე,
Dialogue: 0,0:04:18.46,0:04:26.77,Default,,0000,0000,0000,,შემდეგ კი makeItBigger-ს გამოვიძახებთ.
Dialogue: 0,0:04:26.77,0:04:30.99,Default,,0000,0000,0000,,ამჯერად გაცილებით სწრაფია!
Dialogue: 0,0:04:30.99,0:04:35.86,Default,,0000,0000,0000,,ბრაუზერი ახლა\NmakeItBigger-ს დახატვამდე იძახებს,
Dialogue: 0,0:04:35.86,0:04:38.29,Default,,0000,0000,0000,,რაც დაახლოებით 60 კადრია წამში,
Dialogue: 0,0:04:38.29,0:04:40.88,Default,,0000,0000,0000,,წინანდელზე ორჯერ სწრაფი.
Dialogue: 0,0:04:40.88,0:04:43.65,Default,,0000,0000,0000,,სიგანეს ყოველ ჯერზე ერთ პიქსელს ვუმატებთ.
Dialogue: 0,0:04:43.65,0:04:47.81,Default,,0000,0000,0000,,ესეიგი წამში ვუმატებთ 60 პიქსელს.
Dialogue: 0,0:04:47.81,0:04:51.20,Default,,0000,0000,0000,,რამდენიმე წამში\Nგამოსახულება გვერდზე დიდი ხდება
Dialogue: 0,0:04:51.20,0:04:53.35,Default,,0000,0000,0000,,უკვე აღარც ჩანს.
Dialogue: 0,0:04:53.35,0:04:56.32,Default,,0000,0000,0000,,როგორ შევანელოთ ანიმაცია?
Dialogue: 0,0:04:56.32,0:04:59.31,Default,,0000,0000,0000,,რამდენიმე გზა არსებობს.\Nჩემი საყვარელი გზაა იმაზე დაკვირვება,
Dialogue: 0,0:04:59.31,0:05:04.38,Default,,0000,0000,0000,,თუ რა დრო გავიდა და ახალი\Nსიგანის ამის მიხედვით გამოთვლა.
Dialogue: 0,0:05:04.50,0:05:11.16,Default,,0000,0000,0000,,ვიწყებთ საწყისი დროის დამახსოვრებით,\Nმილიწამებში, ფუნქციის გამოძახებამდე.
Dialogue: 0,0:05:11.16,0:05:17.50,Default,,0000,0000,0000,,var startTime = new Date().getTime();
Dialogue: 0,0:05:17.50,0:05:20.99,Default,,0000,0000,0000,,makeItBigger-ში მოვათავსებთ მოცემულ დროს.
Dialogue: 0,0:05:20.99,0:05:26.95,Default,,0000,0000,0000,,var currTime = new Date().getTime();
Dialogue: 0,0:05:26.95,0:05:31.86,Default,,0000,0000,0000,,ვთქვათ, გვინდა 30\Nპიქსელი-წამში სიჩქარით ზრდა
Dialogue: 0,0:05:31.86,0:05:37.12,Default,,0000,0000,0000,,და დაწყება 50 პიქსელით.
Dialogue: 0,0:05:37.12,0:05:43.95,Default,,0000,0000,0000,,ახალი სიგანე ტოლი\Nიყოს 50-ს, საწყის სიგანეს,
Dialogue: 0,0:05:44.06,0:05:49.15,Default,,0000,0000,0000,,დამატებული მოცემული\Nდრო, მინუს საწყისი დრო,
Dialogue: 0,0:05:49.15,0:05:53.26,Default,,0000,0000,0000,,მილიწამებში ვართ, ამიტომ ვყოფთ 1000-ზე,
Dialogue: 0,0:05:53.26,0:06:00.40,Default,,0000,0000,0000,,შემდეგ კი პლუს 30,\Nრადგან წამში 30-ით გვინდა გაზრდა.
Dialogue: 0,0:06:00.40,0:06:10.12,Default,,0000,0000,0000,,ეს ახალი სიგანეა, ახლა კი\Nstyle.width გავუტოლოთ ახალ სიგანეს.
Dialogue: 0,0:06:10.12,0:06:12.63,Default,,0000,0000,0000,,გავუტოლოთ newWidth + px-ს.
Dialogue: 0,0:06:12.63,0:06:20.25,Default,,0000,0000,0000,,ესეც ასე, სუფთა, 30px/წამი ანიმაცია.
Dialogue: 0,0:06:20.25,0:06:31.21,Default,,0000,0000,0000,,შეგვიძლია ეს რიცხვი შევცვალოთ თუ\Nუფრო ნელა ან სწრაფად გვინდა ზრდა.
Dialogue: 0,0:06:31.21,0:06:34.68,Default,,0000,0000,0000,,როგორ შევაჩეროთ\Nანიმაცია თუ ის ძალიან დიდი გახდა?
Dialogue: 0,0:06:34.68,0:06:38.21,Default,,0000,0000,0000,,შეგვიძლია ეს ხაზი მოვათავსოთ if-ში
Dialogue: 0,0:06:38.21,0:06:42.82,Default,,0000,0000,0000,,და შევასრულოთ მხოლოდ\Nიმ შემთხვევაში, თუ მოცემული სიგანე
Dialogue: 0,0:06:42.82,0:06:48.25,Default,,0000,0000,0000,,გარკვეულ რიცხვზე ნაკლები\Nიქნება, მაგალითად 300.
Dialogue: 0,0:06:59.24,0:07:07.00,Default,,0000,0000,0000,,ვნახოთ, თუ გაჩერდება 300-ზე.
Dialogue: 0,0:07:07.00,0:07:09.42,Default,,0000,0000,0000,,მშვენიერია!
Dialogue: 0,0:07:09.42,0:07:13.18,Default,,0000,0000,0000,,requestAnimationFrame ტექნიკა იმუშავებს,
Dialogue: 0,0:07:13.18,0:07:18.13,Default,,0000,0000,0000,,თუ მომხმარებელი იყენებს\NChrome-ს, Firefox-ს, ან IE10+-ს.
Dialogue: 0,0:07:18.13,0:07:21.94,Default,,0000,0000,0000,,ჯავასკრიპტის მრავალგვარი\Nბიბლიოთეკა არსებობს,
Dialogue: 0,0:07:21.94,0:07:25.73,Default,,0000,0000,0000,,რომელიც მოითხოვს requestAnimationFrame-ს\Nროცა ის მიწვდომადია
Dialogue: 0,0:07:25.73,0:07:30.45,Default,,0000,0000,0000,,უფრო ძველ ბრაუზერებში\Nკი setInterval-ს დაუბრუნდება.
Dialogue: 0,0:07:30.45,0:07:34.96,Default,,0000,0000,0000,,web development ყოველთვის იცვლება,
Dialogue: 0,0:07:34.96,0:07:37.16,Default,,0000,0000,0000,,ბრაუზერები ახალ თვისებებს ამატებენ,
Dialogue: 0,0:07:37.16,0:07:40.45,Default,,0000,0000,0000,,დეველოპერები მათი\Nგამოყენების ახალ გზებს პოულობენ..
Dialogue: 0,0:07:40.45,0:07:43.89,Default,,0000,0000,0000,,ყოველთვის უნდა სწავლობდეთ რა არის ახალი
Dialogue: 0,0:07:43.89,0:07:46.65,Default,,0000,0000,0000,,და რა უკეთესი იმისთვის,\Nრაც თქვენ გინდათ გააკეთოთ.