Telegram Group & Telegram Channel
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



tg-me.com/brogrammist/184
Create:
Last Update:

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

BY Brogrammist


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/brogrammist/184

View MORE
Open in Telegram


Brogrammist Telegram | DID YOU KNOW?

Date: |

Launched in 2013, Telegram allows users to broadcast messages to a following via “channels”, or create public and private groups that are simple for others to access. Users can also send and receive large data files, including text and zip files, directly via the app.The platform said it has more than 500m active users, and topped 1bn downloads in August, according to data from SensorTower.

How Does Bitcoin Mining Work?

Bitcoin mining is the process of adding new transactions to the Bitcoin blockchain. It’s a tough job. People who choose to mine Bitcoin use a process called proof of work, deploying computers in a race to solve mathematical puzzles that verify transactions.To entice miners to keep racing to solve the puzzles and support the overall system, the Bitcoin code rewards miners with new Bitcoins. “This is how new coins are created” and new transactions are added to the blockchain, says Okoro.

Brogrammist from us


Telegram Brogrammist
FROM USA