Web Animations API

Shu paytgacha CSS animatsiyalarni JS orqali ham yozsa, boshqarsa bo'lishini bilmagan ekanman!
CSS dagi animatsiyalarni JS orqali boshqarish desa faqat ular bo'glangan klasslarni elementga biriktirish/o'chirishni tushunardim.

Masalan, g'oyib bo'lish animatsiyasini solishtirsak bo'ladi:

CSS

#element {  
  animation: fade 3s ease forwards;  
}  
  
@keyframes fade {
  from { opacity: 1; }  
  to { opacity: 0; }
}  

JS

const element = document.getElementById('element');  
  
const keyframes = [  
  { opacity: 0 },
  { opacity: 1 }
];  
 
const options = {  
  duration: 3000,
  easing: 'ease',
  fill: 'forwards',
};  

const animation = new Animation(new KeyframeEffect(element, keyframes, options));

animation.play()
animation.pause()
animation.finish()
animation.cancel()

Qachon qaysi birini ishlatamiz?

Animatsiyalar uchun requestAnimationFrame() dan foydalanish ham mumkin. Faqat u CPU dan foydalanadi. CSS animatsiylar esa GPU dan.

Web Animations API

1. bizga aynan CSS dagi animatsiyalarni boshqarish imkonini KENGAYTIRADI.

2. lekin baribir aslida siz CSS animatsiyalarni ishlatayotgan bo'lasiz.

3. piksellarning hisob kitobi "main thread"dan tashqarida bo'ladi.

4. UI komponentlar yaratish uchun juda mos.

5. Deklarativ


requestAnimationFrame()

1. animatsiyani kardma-kadr yartish imkonini beradi.

2. animatsiyani boshqarish to'laqonli JS kodga bog'liq boladi.

3. shu sabab, har bir kard uchun piksellarni hisoblash "main thread" da amalga oshadi.

4. O'yinlar va o'ta murakkab, sinxron harakat qiluvchi elementlardan iborat animatsiyalar uchun mos.

5. Imperativ