If you're seeing this message, it means we're having trouble loading external resources on our website.

თუ ვებფილტრს იყენებთ, დარწმუნდით, რომ *.kastatic.org და *.kasandbox.org დომენები არ არის დაბლოკილი.

ძირითადი მასალა

DOM-ის ანიმაციის რა ტექნიკები უნდა გამოიყენოთ?

ახლა თქვენ ნანახი გაქვთ სამი ტექნიკა, რომელიც თქვენი ვებგვერდის ნაწილების ანიმაციის საშუალებას გაძლევთ: window.setInterval/setTimeout, window.requestAnimationFrame, და CSS ანიმაციები/გადასვლები.
როდესაც ფიქრობთ იმაზე, თუ რომელი ტექნოლოგია გამოიყენოთ, თქვენ ასევე უნდა განიხილოთ შემდეგი სამი შეკითხვა:
  • ნამდვილად შეუძლია იმის გაკეთება, რაც მსურს?
  • რამდენად ეფექტურად მუშაობს მოცემული ტექნიკა? (ანელებს თუ არა ის ბრაუზერს/კომპიუტერს?)
  • რამდენად ზუსტი უნდა იყოს დროის ფაქტორი?
  • მუშაობს თუ არა ის ყველა ბრაუზერში, სადაც მსურს, რომ ჩემმა ვებგვერდმა იმუშავოს?
როდესაც ვქმნით ვებგვერდს, ძალიან გვაღელვებს მისი ეფექტურობა. ამიტომ, ჩვენ ხშირად ეფექტურობას მთავარ კრიტერიუმად აღვიქვამთ. თუმცა ბრაუზერების ეფექტურობა იცვლება ახალი ბრაუზერების გამოსვლასთან ერთად და მობილურის ბრაუზერებმა შესაძლოა, დესკტოპის ბრაუზერებისგან განსხვავებულად იმოქმედონ. ამიტომ, ტექნიკა, რომელიც დღესდღეობით საუკეთესოდ მუშაობს, შესაძლოა, ხვალ ახლით ჩანაცვლდეს. დღეს CSS ანიმაციები/გადასვლები უფრო დიდი ეფექტურობით გამოირჩევიან, ვიდრე requestAnimationFrame და setInterval.
თუმცა CSS-ს ყველაფრის გაკეთება არ შეუძლია. მაგალითად, <canvas> ტეგში პიქსელებისა და ფიგურების დასახატად თქვენ უნდა გამოიძახოთ ფუნქციები, როგორიცაა fillRect(), რისთვისაც CSS-ს ვერ გამოიყენებთ. ამ ფუნქციების პერიოდულად გამოძახებისთვის თქვენ დაგჭირდებათ requestAnimationFrame ან setInterval. სწორედ ამას ვაკეთებთ აქ, ხანის აკადემიაში, ჩვენს ProcessingJS გარემოში. ProcessingJS არის JS ბიბლიოთეკა, რომელიც წერს <canvas> ტეგში და თუ განსაზღვრავთ draw() ფუნქციას თქვენს კოდში, ProcessingJS გამოიყენებს setInterval-ს frameRate-ზე დამოკიდებულიdraw() ფუნქციის განმეორებით გამოსაძახებლად.
ზოგჯერ JavaScript-ის ფუნქციები უნდა გამოიძახოთ პერიოდულად, მაგრამ იმისთვის არა, რომ გვერდზე ანიმაცია შექმნათ. შეიძლება, სერვერს ამოწმებდეთ განახლებებისათვის, როგორც Twitter-ი აკეთებს, როდესაც რეალურ დროში ანახლებს აქტივობის არხს. ამ შემთხვევაში შეგიძლიათ, გამოიყენოთ setInterval, დროის სიზუსტეს მნიშვნელობა არა აქვს, რადგან მას იძახებთ ყოველ წუთში ან მსგავსი პერიოდულობით. სწორედ ამას ვაკეთებთ ხანის აკადემიაზე დახმარების მოთხოვნების გვერდზე, რათა გამუდმებით შევამოწმოთ დახმარების ახალი მოთხოვნები ყოველ 2 წუთში.
ცხადია, უნდა გახსოვდეთ ბრაუზერის თავსებადობა. თუ წერთ კოდს, რომელმაც უნდა იმუშავოს IE9-ში, ვერ გამოიყენებთ requestAnimationFrame -ს ან CSS-ის ანიმაციებს. მოგიწევთ იმ ტექნიკის გამოყენება, რომელიც სხვადასხვა ბრაუზერზე მუშაობს, ან იმ ბიბლიოთეკის პოვნა, რომელიც თქვენ ნაცვლად გააკეთებს ამას, როგორიცაა Velocity.js.
კიდევ ბევრია სასწავლი ამ ტექნიკებთან დაკავშირებით. მიჰყევით ამ ბმულებს მეტის სასწავლად:
ბონუსი „დოქტორ ვინის" მოყვარულებისთვის: CSS3 ანიმაციის ჩვენი ერთ-ერთი საყვარელი მაგალითია ეს ანიმირებული TARDIS-ი.

გსურთ, შეუერთდეთ დისკუსიას?

პოსტები ჯერ არ არის.
გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.