ანიმაცია RAF-ის გამოყენებით (ვიდეო ვერსია)

დავუბრუნდეთ Oh noes-ის დროის ათვლას.

როგორ მოვიქცეთ თუ გვინდა
Oh noes გამოსახულება გაიზარდოს,

როცა დროის ათვლა ნულს მიუახლოვდება?

-- გარდაუვალ უბედურებას
რომ მოასწავებდეს --

ამისი გაკეთების ერთი გზა
არის CSS-ის სტილის ანიმირება

Window.setInterval-ის გამოყენებით.

პირველი ნაბიჯისთვის,
სურათს ცვლადში მოვათავსებთ,

შემდეგ, დავწერთ საწყის სტილს,

ეს იმისთვის, რომ რამით დავიწყოთ.

შემდეგ კი დავწერთ makeItBigger ფუნქციას.

აქ საჭირო იქნება style.width-ის შეცვლა,

ავიღებთ წინა style.width-ს
და დავუმატებთ ერთს.

საბოლოოდ, ამ ფუნქციით
გამოვიძახებთ setInterval-ს,

-- რამდენად ხშირად გვინდა იზრებოდეს?

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

მოდით იყოს 30 კადრი წამში.

არ მუშაობს. ხედავთ რატომ? ცოტა ეშმაკურია.

რა არის ohnoes.style.width-ის
მნიშვნელობა ამ ხაზის შემდეგ?

შეიძლება იფიქროთ,
რომ 50px გადადის 51px-ში,

მაგრამ მოდით ვნახოთ
რა იქნება ohnoes.style.width

50px-ს ვუმატებთ ერთს.

რას უდრის 50px პლუს ერთი?

შეიძლება იფიქროთ რომ ეს 51px იქნება,

მაგრამ ჯავასკრიპტი
50px-ს აღიქვამს string-ად,

ამიტომ პასუხი გამოვა
50px1, რაც უშინაარსოა.

ესეიგი, ბრაუზერი უბრალოდ
არ აქცევს ყურადღებას ამ უშინაარსობას.

საჭიროა ეს სიდიდე რიცხვად გადავიყვანოთ,

შემდეგ, რიცხვს დავუმატოთ ერთი,

შემდეგ კი ისევ გადავაქციოთ px-ად.

ამისთვის ეს სიდიდე თავიდან
მოვათავსოთ parseFloat-ში,

რაც მას რიცხვად გადააქცევს,

შემდეგ ვუმატებთ ერთს და
ბოლოს ისევ ვუმატებთ px-ს.

ძალიან კარგი, იზრდება!

როგორც ხედავთ, CSS-ის ანიმაციებში
ზოგჯერ საქმე გვაქვს ერთეულებთან,

რომლებიც უნდა მოვაშოროთ სიდედეებს,

შემდეგ კი ისევ დავაბრუნოთ.

CSS-ის ანიმაციების
თვისებებთან setInterval-ის გამოყენებისას

არის გარკვეული სირთულეები.

პირველი, ბრაუზერი
არ იძლევა იმის გარანტიას,

რომ ზუსტად ისე შეასრულებს
პაუზას როგორც მივუთითებთ.

თუ სხვა რაღაცები ჩაერია,
მაგალითად ბეჭდვა მომხმარებლისგან,

შესაძლოა callback უფრო
გვიან იქნეს გამოძახებული.

მაშინ სუფთა ანიმაციას ვერ მივიღებთ.

მეორე - ბრაუზერი იმ
შემთხვევაშიც გამოიძახებს ფუნქციას,

როცა ეს tab დახურულია.

ეს არაა საჭირო მაგრამ
კომპიუტერის მეხსიერებას მაინც იკავებს.

ამიტომ თანამედროვე
ბრაუზერებში სხვა ფუნქცია არსებობს,

სპეციალურად ასეთი ანიმაციებისთვის

და ეწოდება
window.requestAnimationFrame

მის გამოსაყენებლად
მოვიშოროთ setInterval ხაზი.

გამოვიძახოთ requestAnimationFrame
ფუნქციის შიგნიდან

და მივუთითოთ makeItBigger ფუნქციაზე,

შემდეგ კი makeItBigger-ს გამოვიძახებთ.

ამჯერად გაცილებით სწრაფია!

ბრაუზერი ახლა
makeItBigger-ს დახატვამდე იძახებს,

რაც დაახლოებით 60 კადრია წამში,

წინანდელზე ორჯერ სწრაფი.

სიგანეს ყოველ ჯერზე ერთ პიქსელს ვუმატებთ.

ესეიგი წამში ვუმატებთ 60 პიქსელს.

რამდენიმე წამში
გამოსახულება გვერდზე დიდი ხდება

უკვე აღარც ჩანს.

როგორ შევანელოთ ანიმაცია?

რამდენიმე გზა არსებობს.
ჩემი საყვარელი გზაა იმაზე დაკვირვება,

თუ რა დრო გავიდა და ახალი
სიგანის ამის მიხედვით გამოთვლა.

ვიწყებთ საწყისი დროის დამახსოვრებით,
მილიწამებში, ფუნქციის გამოძახებამდე.

var startTime = new Date().getTime();

makeItBigger-ში მოვათავსებთ მოცემულ დროს.

var currTime = new Date().getTime();

ვთქვათ, გვინდა 30
პიქსელი-წამში სიჩქარით ზრდა

და დაწყება 50 პიქსელით.

ახალი სიგანე ტოლი
იყოს 50-ს, საწყის სიგანეს,

დამატებული მოცემული
დრო, მინუს საწყისი დრო,

მილიწამებში ვართ, ამიტომ ვყოფთ 1000-ზე,

შემდეგ კი პლუს 30,
რადგან წამში 30-ით გვინდა გაზრდა.

ეს ახალი სიგანეა, ახლა კი
style.width გავუტოლოთ ახალ სიგანეს.

გავუტოლოთ newWidth + px-ს.

ესეც ასე, სუფთა, 30px/წამი ანიმაცია.

შეგვიძლია ეს რიცხვი შევცვალოთ თუ
უფრო ნელა ან სწრაფად გვინდა ზრდა.

როგორ შევაჩეროთ
ანიმაცია თუ ის ძალიან დიდი გახდა?

შეგვიძლია ეს ხაზი მოვათავსოთ if-ში

და შევასრულოთ მხოლოდ
იმ შემთხვევაში, თუ მოცემული სიგანე

გარკვეულ რიცხვზე ნაკლები
იქნება, მაგალითად 300.

ვნახოთ, თუ გაჩერდება 300-ზე.

მშვენიერია!

requestAnimationFrame ტექნიკა იმუშავებს,

თუ მომხმარებელი იყენებს
Chrome-ს, Firefox-ს, ან IE10+-ს.

ჯავასკრიპტის მრავალგვარი
ბიბლიოთეკა არსებობს,

რომელიც მოითხოვს requestAnimationFrame-ს
როცა ის მიწვდომადია

უფრო ძველ ბრაუზერებში
კი setInterval-ს დაუბრუნდება.

web development ყოველთვის იცვლება,

ბრაუზერები ახალ თვისებებს ამატებენ,

დეველოპერები მათი
გამოყენების ახალ გზებს პოულობენ..

ყოველთვის უნდა სწავლობდეთ რა არის ახალი

და რა უკეთესი იმისთვის,
რაც თქვენ გინდათ გააკეთოთ.