Tasavvur qiling: siz yangi loyihaga qo'shilasiz, kodlar bazasiga sho'ng'iysiz va dastlabki bir necha soat ichida sizni g'azablantiradigan darajada tanish narsani topasiz. Uslublar jadvallari bo'ylab tarqalgan, siz bir xil asosiy animatsiyalar uchun bir nechta @keyframes ta'riflarini topasiz. Uch xil pasayish effektlari, ikki yoki uchta slaydni o'zgartirish, bir nechta kattalashtirish animatsiyalari va kamida ikkita turli aylanish animatsiyalari, chunki nega bunday bo'lmasin? @keyframes puls { dan { masshtab: 1; } uchun { masshtab: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { masshtab: 1; } 10%, 40% { masshtab: 1,2; } }
Agar bu stsenariy tanish bo'lib tuyulsa, siz yolg'iz emassiz. Turli loyihalar bo‘yicha o‘z tajribamga ko‘ra, men taqdim eta oladigan eng izchil tezkor g‘alabalardan biri bu kalit kadrlarni birlashtirish va standartlashtirishdir. Bu shunchalik ishonchli namunaga aylandiki, endi men ushbu tozalashni har qanday yangi kod bazasidagi birinchi vazifalarimdan biri sifatida kutyapman. Xaos ortidagi mantiq Bu ortiqchalik bu haqda o'ylaganingizda to'liq ma'noga ega bo'ladi. Biz hammamiz kundalik ishimizda bir xil asosiy animatsiyalardan foydalanamiz: o'chirish, slaydlar, kattalashtirish, aylantirish va boshqa keng tarqalgan effektlar. Ushbu animatsiyalar juda oddiy va ishni bajarish uchun tezkor @keyframes ta'rifini yaratish oson. Markazlashtirilgan animatsiya tizimisiz, ishlab chiquvchilar tabiiy ravishda bu kalit kadrlarni noldan yozadilar, shunga o'xshash animatsiyalar kodlar bazasining boshqa joylarida allaqachon mavjudligini bilmaydilar. Bu, ayniqsa, komponentlarga asoslangan arxitekturada ishlaganda keng tarqalgan (buni ko'pchiligimiz bugungi kunda qilamiz), chunki jamoalar ko'pincha dasturning turli qismlarida parallel ravishda ishlaydi. Natija? Animatsiya xaos. Kichik muammo Asosiy kadrlarni takrorlash bilan bog'liq eng aniq muammolar ishlab chiqish vaqtini behuda sarflash va keraksiz kod shishishidir. Bir nechta asosiy kadrlar ta'riflari talablar o'zgarganda yangilanadigan bir nechta joyni anglatadi. O'zgaruvchan animatsiya vaqtini sozlashingiz kerakmi? Kod bazasi bo'ylab har bir misolni qidirishingiz kerak bo'ladi. Yengillashtirish funktsiyalarini standartlashtirishni xohlaysizmi? Barcha o'zgarishlarni topishda omad tilaymiz. Xizmat ko'rsatish nuqtalarining bunday ko'payishi hatto oddiy animatsiya yangilanishlarini ham vaqt talab qiladigan vazifaga aylantiradi. Kattaroq muammo Ushbu asosiy kadrlarning takrorlanishi sirt ostida yashiringan ancha hiyla-nayrang muammoni keltirib chiqaradi: global qamrov tuzog'i. Komponentlarga asoslangan arxitekturalar bilan ishlashda ham CSS kalit kadrlari har doim global miqyosda aniqlanadi. Bu shuni anglatadiki, barcha asosiy kadrlar barcha komponentlarga tegishli. Har doim. Ha, sizning animatsiyangiz komponentingizda belgilangan kalit kadrlardan foydalanishi shart emas. U global miqyosga yuklangan bir xil nomga mos keladigan oxirgi kalit kadrlardan foydalanadi. Barcha kalit kadrlaringiz bir xil bo'lsa, bu kichik muammodek tuyulishi mumkin. Ammo animatsiyani ma'lum bir foydalanish holatiga moslashtirmoqchi bo'lgan paytda siz muammoga duch kelasiz yoki undan ham yomoni, siz ularni keltirib chiqaradigan bo'lasiz. Yoki sizning animatsiyangiz ishlamaydi, chunki sizdan keyin yuklangan boshqa komponent kalit kadrlaringizni qayta yozadi yoki komponentingiz oxirgi marta yuklanadi va oʻsha asosiy kadr nomidan foydalangan holda har bir boshqa komponent uchun animatsiya harakatini tasodifan oʻzgartiradi va siz buni sezmasligingiz ham mumkin. Muammoni ko'rsatadigan oddiy misol: .komponent-bir { /* komponent uslublari */ animatsiya: puls 1s oson-in-out cheksiz muqobil; }
/* bu @keyframes ta'rifi ishlamaydi */ @keyframes puls { dan { masshtab: 1; } uchun { masshtab: 1.1; } }
/* kodda keyinroq... */
.komponent-ikki { /* komponent uslublari */ animatsiya: puls 1s oson-in-out cheksiz; }
/* bu kalit kadrlar ikkala komponentga ham tegishli */ @keyframes puls { 0%, 20%, 100% { masshtab: 1; } 10%, 40% { masshtab: 1,2; } }
Ikkala komponent ham bir xil animatsiya nomidan foydalanadi, lekin ikkinchi @keyframes ta'rifi birinchisining ustiga yoziladi. Endi komponent-bir va komponent-ikkinchi komponent qaysi asosiy kadrlarni belgilaganidan qat'i nazar, ikkinchi kalit kadrlardan foydalanadi. Pen Keyframes tokenlarini ko'ring - Amit Sheen tomonidan demo 1 [forked]. Eng yomoni? Bu ko'pincha mahalliy rivojlanishda mukammal ishlaydi, lekin qurish jarayonlari uslublar jadvallarini yuklash tartibini o'zgartirganda ishlab chiqarishda sirli ravishda buziladi. Qaysi komponentlar yuklanganligi va qanday ketma-ketlikda ekanligiga qarab, siz boshqacha harakat qiladigan animatsiyalar bilan yakunlanasiz. Yechim: Birlashtirilgan kalit kadrlar Bu tartibsizlikka javob hayratlanarli darajada oddiy: umumiy uslublar jadvalida saqlangan oldindan belgilangan dinamik kalit kadrlar. Har bir komponentga o'z animatsiyalarini belgilashga ruxsat berish o'rniga, biz yaxshi hujjatlashtirilgan, oson bajariladigan markazlashtirilgan kalit kadrlarni yaratamiz.foydalanish, texnik xizmat ko'rsatish va loyihangizning o'ziga xos ehtiyojlariga moslashtirilgan. Buni asosiy kadrlar tokenlari sifatida tasavvur qiling. Biz ranglar va intervallar uchun tokenlardan foydalanganimizdek va ko'pchiligimiz animatsiya xususiyatlari uchun tokenlardan foydalanamiz, masalan, davomiylik va yengillashtirish funksiyalari, nega asosiy kadrlar uchun tokenlardan foydalanmasligimiz kerak? Ushbu yondashuv kichik muammoni (kodni takrorlash) va kattaroq muammolarni (global miqyosdagi ziddiyatlarni) bir vaqtning o'zida hal qilishda siz foydalanayotgan har qanday joriy dizayn ish oqimi bilan tabiiy ravishda birlashishi mumkin. Fikr oddiy: barcha umumiy animatsiyalarimiz uchun yagona haqiqat manbasini yarating. Ushbu umumiy uslublar jadvalida loyihamiz amalda foydalanadigan animatsiya naqshlarini qamrab oluvchi puxta ishlab chiqilgan kalit kadrlar mavjud. Endi bizning kodlar bazamizda xiralashgan animatsiya allaqachon mavjud yoki yo'qligini taxmin qilishning hojati yo'q. Boshqa komponentlardan animatsiyalarni tasodifan ustiga yozish endi yo'q. Lekin bu erda kalit: bu shunchaki statik nusxa ko'chirish-joylashtirish animatsiyalari emas. Ular CSS-ning maxsus xususiyatlari orqali dinamik va sozlanishi uchun mo'ljallangan bo'lib, bizga animatsiyalarni muayyan foydalanish holatlariga moslashtirish moslashuvchanligiga ega bo'lgan holda izchillikni saqlashga imkon beradi, masalan, bir joyda biroz kattaroq "puls" animatsiyasi kerak bo'lsa. Birinchi kalit kadrlar tokenini yaratish Biz hal qilishimiz kerak bo'lgan birinchi past osilgan mevalardan biri bu "o'chadigan" animatsiyadir. Oxirgi loyihalarimdan birida men o'ndan ortiq alohida so'ndiruvchi ta'riflarni topdim va ha, ularning barchasi shunchaki shaffoflikni 0 dan 1 gacha jonlantirdi. Shunday qilib, keling, yangi uslublar jadvalini yaratamiz, uni kf-tokens.css deb nomlaymiz, uni loyihamizga import qilamiz va uning ichida tegishli izohlar bilan kalit kadrlarimizni joylashtiramiz. /* keyframes-tokens.css */
/* * Fade In - kirish animatsiyasini o'chirish * Foydalanish: animatsiya: kf-fade-in 0,3s oson-out; */ @keyframes kf-fade-in { dan { shaffoflik: 0; } uchun { shaffoflik: 1; } }
Ushbu yagona @keyframes deklaratsiyasi bizning kod bazamizdagi barcha tarqoq animatsiyalarni almashtiradi. Toza, sodda va global miqyosda qo'llanilishi mumkin. Va endi bizda ushbu token aniqlangan bo'lsa, biz uni loyihamiz davomida istalgan komponentdan foydalanishimiz mumkin: .modal { animatsiya: kf-fade-in 0,3s oson-chiqish; }
.maslahat { animatsiya: kf-fade-in 0,2s oson-in-out; }
.xabarnoma { animatsiya: kf-fade-in 0,5s oson-out; }
Qalam kalit kadrlari tokenlariga qarang - Amit Sheen tomonidan taqdim etilgan 2 [forked]. Eslatma: Biz barcha @keyframes nomlarida kf- prefiksidan foydalanmoqdamiz. Ushbu prefiks nom maydoni bo'lib xizmat qiladi, bu loyihadagi mavjud animatsiyalar bilan nomlash ziddiyatlarini oldini oladi va bu kalit kadrlar bizning kalit kadrlar tokenlari faylimizdan kelganligini darhol aniqlaydi. Dinamik slaydni yaratish Kf-fade-in kalit kadrlari juda yaxshi ishlaydi, chunki bu oddiy va narsalarni chalkashtirib yuborish uchun joy kam. Biroq, boshqa animatsiyalarda biz ancha dinamik bo'lishimiz kerak va bu erda biz CSS maxsus xususiyatlarining ulkan kuchidan foydalanishimiz mumkin. Bu tarqoq statik animatsiyalarga nisbatan asosiy kadrlar tokenlari haqiqatan ham porlaydi. Keling, umumiy stsenariyni olaylik: "slide-in" animatsiyalari. Lekin qayerdan sirpanib kiring? o'ngdan 100px? 50% chapdan? U ekranning yuqori qismidan kirishi kerakmi? Yoki pastdan suzadimi? Imkoniyatlar juda ko'p, lekin har bir yo'nalish va har bir variatsiya uchun alohida kalit kadrlar yaratish o'rniga, biz barcha stsenariylarga mos keladigan bitta moslashuvchan tokenni yaratishimiz mumkin: /* * Slide In - yo'nalishli slayd animatsiyasi * Yo'nalishni boshqarish uchun --kf-slide-f dan foydalaning * Standart: chapdan siljiydi (-100%) * Foydalanish: * animatsiya: kf-slide-in 0,3s oson-chiqish; * --kf-slide-from: -100px 0; // chapdan siljitish * --kf-slide-from: 100px 0; // o'ngdan siljiting * --kf-slide-from: 0 -50px; // tepadan siljitish */
@keyframes kf-slide-in { dan { translate: var(--kf-slide-from, -100% 0); } uchun { tarjima qilish: 0 0; } }
Endi biz --kf-slide-from maxsus xususiyatini o'zgartirish orqali har qanday slayd yo'nalishi uchun ushbu yagona @keyframes tokenidan foydalanishimiz mumkin: yon panel { animatsiya: kf-slide-in 0,3 s qulaylik; /* Standart qiymatdan foydalanadi: chapdan slaydlar */ }
.xabarnoma { animatsiya: kf-slide-in 0,4s oson-chiqish; --kf-slide-from: 0 -50px; /* tepadan siljitish */ }
.modal { animatsiya: kf-fade-da 0,5s, kf-slide-in 0,5s kub-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* pastdan o‘ngdan siljitish */ }
Ushbu yondashuv izchillikni saqlagan holda bizga ajoyib moslashuvchanlikni beradi. Bitta asosiy kadr deklaratsiyasi, cheksiz imkoniyatlar. Amit Sheen tomonidan yaratilgan Pen Keyframes tokens - demo 3 [forked] ga qarang. Va agar biz o'z animatsiyalarimizni yanada moslashuvchan qilishni istasak, shuningdek, "slayd-out" effektlariga ham imkon berishimiz mumkin.Keyingi bo'limda ko'rib chiqadigan narsaga o'xshash --kf-slide-to maxsus xususiyatni qo'shing. Ikki tomonlama masshtabli kalit kadrlar Loyihalar bo'ylab takrorlanadigan yana bir keng tarqalgan animatsiya bu "kattalashtirish" effektlari. Bu tushdi xabarlari uchun nozik masshtabni kattalashtirish, modallarni dramatik kattalashtirish yoki sarlavhalar uchun yumshoq kichraytirish effekti bo'ladimi, kattalashtirish animatsiyalari hamma joyda mavjud. Har bir masshtab qiymati uchun alohida kalit kadrlar yaratish o‘rniga, keling, bitta moslashuvchan kf-zoom kalit kadrlar to‘plamini yarataylik:
/* * Kattalashtirish - masshtabli animatsiya * Masshtab qiymatlarini boshqarish uchun --kf-zoom-from va --kf-zoom-to dan foydalaning * Standart: 80% dan 100% gacha (0,8 dan 1 gacha) kattalashtiradi * Foydalanish: * animatsiya: kf-zoom 0,2s osonlashtirish; * --kf-zoom-dan: 0,5; --kf-zoom-to: 1; // 50% dan 100% gacha kattalashtirish * --kf-zoom-dan: 1; --kf-zoom-to: 0; // 100% dan 0% gacha kattalashtirish * --kf-zoom-dan: 1; --kf-zoom-to: 1,1; // 100% dan 110% gacha kattalashtirish */
@keyframes kf-zoom { dan { masshtab: var(--kf-zoom-from, 0,8); } uchun { masshtab: var(--kf-zoom-to, 1); } }
Bitta ta'rif bilan biz kerakli kattalashtirish o'zgarishiga erishishimiz mumkin: .tost { animatsiya: kf-slide-in 0,2s, kf-zoom 0,4 s qulaylik; --kf-slide-from: 0 100%; /* tepadan siljitish */ /* Standart masshtabdan foydalanadi: 80% dan 100% gacha */ }
.modal { animatsiya: kf-zoom 0,3s kubik-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-dan: 0; /* 0% dan 100% gacha dramatik kattalashtirish */ }
.sarlavhasi { animatsiya: kf-fade-in 2s, kf-zoom 2s qulaylik; --kf-zoom-dan: 1,2; --kf-zoom-to: 0,8; /* sekin o'lchovni pasaytiring */ }
Standart 0,8 (80%) UI elementlarining aksariyati, masalan, tushdi xabarlari va kartalar uchun mukammal ishlaydi, shu bilan birga maxsus holatlar uchun sozlash oson. Amit Sheen tomonidan ishlab chiqilgan Pen Keyframes tokenlarini ko'ring - demo 4 [forked]. Siz so'nggi misollarda qiziqarli narsani payqagan bo'lishingiz mumkin: biz animatsiyalarni birlashtirdik. @keyframes tokenlari bilan ishlashning asosiy afzalliklaridan biri shundaki, ular bir-biri bilan muammosiz integratsiya qilish uchun yaratilgan. Ushbu silliq kompozitsiya tasodifiy emas, balki qasddan qilingan. Biz animatsiya kompozitsiyasini keyinroq batafsil muhokama qilamiz, jumladan ular qayerda muammoli bo'lishi mumkin, lekin ko'pchilik kombinatsiyalar sodda va amalga oshirish oson. Eslatma: Ushbu maqolani yozish paytida va ehtimol uni yozganim sababli, men kirish animatsiyalarining butun g'oyasini qayta ko'rib chiqdim. CSS-dagi barcha so'nggi yutuqlar bilan biz hali ham ularga kerakmi? Yaxshiyamki, Adam Argyle xuddi shu savollarni o'rganib chiqdi va ularni o'z blogida ajoyib tarzda ifoda etdi. Bu bu erda yozilganlarga zid emas, lekin u ko'rib chiqishga arziydigan yondashuvni taqdim etadi, ayniqsa sizning loyihalaringiz kirish animatsiyalariga tayansa. Uzluksiz animatsiyalar Kirish animatsiyalari, masalan, “so‘ndirish”, “slayd” va “kattalashtirish” bir marta sodir bo‘lib, keyin to‘xtab qolsa, diqqatni jalb qilish yoki davom etayotgan faoliyatni ko‘rsatish uchun doimiy animatsiyalar cheksiz ravishda aylanadi. Men duch keladigan eng keng tarqalgan ikkita doimiy animatsiya - bu "aylantirish" (ko'rsatkichlarni yuklash uchun) va "zarba" (muhim elementlarni ta'kidlash uchun). Bu animatsiyalar asosiy kadrlar tokenlarini yaratishda noyob qiyinchiliklarni keltirib chiqaradi. Odatda bir holatdan ikkinchisiga o'tadigan kirish animatsiyalaridan farqli o'laroq, doimiy animatsiyalar o'zlarining xatti-harakatlarida juda moslashtirilgan bo'lishi kerak. Spin doktori Har bir loyiha bir nechta spin animatsiyalaridan foydalanadi. Ba'zilar soat yo'nalishi bo'yicha, boshqalari esa soat sohasi farqli ravishda aylanadi. Ba'zilar bitta 360 graduslik aylanishni amalga oshiradilar, boshqalari tezroq ta'sir qilish uchun bir nechta burilishlarni bajaradilar. Har bir variatsiya uchun alohida kalit kadrlar yaratish o‘rniga, keling, barcha stsenariylarni boshqaradigan bitta moslashuvchan aylanishni yarataylik:
/* * Spin - aylanish animatsiyasi * Aylanish diapazonini boshqarish uchun --kf-spin-f va --kf-spin-to dan foydalaning * Aylanish miqdorini boshqarish uchun --kf-spin-turns dan foydalaning * Standart: 0deg dan 360deg gacha aylanadi (1 toʻliq aylanish) * Foydalanish: * animatsiya: kf-spin 1s chiziqli cheksiz; * --kf-spin-burilishlar: 2; // 2 ta to'liq aylanish * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // yarim aylanish * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // soat miliga teskari */
@keyframes kf-spin { dan { aylantirish: var(--kf-spin-from, 0deg); } uchun { aylantirish: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Endi biz o'zimizga yoqqan har qanday aylanish variantini yaratishimiz mumkin:
.loading-spinner { animatsiya: kf-spin 1s chiziqli cheksiz; /* Standartdan foydalanadi: 0deg dan 360deg gacha aylanadi */ }
.fast-loader { animatsiya: kf-spin 1.2s oson-in-out cheksiz muqobil; --kf-spin-burilishlar: 3; /* Har bir tsikl uchun har bir yo'nalish uchun 3 ta to'liq aylanish*/ }
.qadamli-teskari { animatsiya: kf-spin 1,5s qadamlar (8) cheksiz; --kf-spin-to: -360deg; /* soat miliga teskari */ }
.subtle-wiggle { animatsiya: kf-spin 2s oson-in-out cheksiz muqobil; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* 36 daraja tebranish: -18 dan +18 daraja orasida */ }
Amit Sheen tomonidan yaratilgan Pen Keyframes tokens - demo 5 [forked] ga qarang. Ushbu yondashuvning go'zalligi shundaki, bir xil kalit kadrlar spinnerlarni yuklash, piktogrammalarni aylantirish, tebranish effektlari va hatto murakkab ko'p burilishli animatsiyalar uchun ishlaydi. Puls paradoksi Pulse animatsiyalari murakkabroq, chunki ular turli xususiyatlarni "zarba" qila oladi. Ba'zilar masshtabni pulslaydi, boshqalari shaffoflikni, ba'zilari esa yorqinlik yoki to'yinganlik kabi rang xususiyatlarini puls qiladi. Har bir xususiyat uchun alohida kalit kadrlarni yaratish o'rniga, biz istalgan CSS xususiyati bilan ishlaydigan kalit kadrlarni yaratishimiz mumkin. Masshtab va shaffoflik opsiyalari bilan impuls kalit kadriga misol:
/* * Pulse - impulsli animatsiya * O'lchov oralig'ini boshqarish uchun --kf-pulse-scale-f va --kf-pulse-scale-to dan foydalaning * Shaffoflik diapazonini boshqarish uchun --kf-pulse-opacity-from va --kf-pulse-opacity-to-dan foydalaning * Standart: puls yo'q (barcha qiymatlar 1) * Foydalanish: * animatsiya: kf-pulse 2s oson-in-out cheksiz muqobil; * --kf-pulse-scale-dan: 0,95; --kf-pulse-scale-to: 1,05; // masshtabli puls * --kf-pulse-shaffoflik-dan: 0,7; --kf-pulse-opacity-to: 1; // shaffoflik pulsi */
@keyframes kf-pulse { dan { shkala: var(--kf-pulse-scale-from, 1); shaffoflik: var(--kf-pulse-opacity-from, 1); } uchun { shkala: var(--kf-pulse-scale-to, 1); shaffoflik: var(--kf-pulse-opacity-to, 1); } }
Bu bir nechta xususiyatlarni jonlantirishi mumkin bo'lgan moslashuvchan impuls yaratadi: .harakatga chaqirish { animatsiya: kf-pulse 0,6s cheksiz muqobil; --kf-pulse-shaffoflik-dan: 0,5; /* shaffoflik pulsi */ }
.notification-nuqta { animatsiya: kf-pulse 0,6s osonlik bilan cheksiz muqobil; --kf-pulse-scale-from: 0,9; --kf-pulse-scale-to: 1.1; /* puls shkalasi */ }
.text-highlight { animatsiya: kf-pulse 1,5s oson-chiqish cheksiz; --kf-pulse-scale-from: 0,8; --kf-pulse-shaffoflik-dan: 0,2; /* masshtab va shaffoflik pulsi */ }
Qalam kalit kadrlari tokenlariga qarang - Amit Sheen tomonidan taqdim etilgan 6 [forked]. Bu yagona kf-pulse kalit kadri sozlanishi oson bo‘lgan holda, diqqatni nozik tortishdan tortib dramatik diqqatga sazovor joylargacha bo‘lgan hamma narsani boshqarishi mumkin. Kengaytirilgan yengillashtirish Asosiy kadrlar tokenlaridan foydalanishning ajoyib jihatlaridan biri shundaki, bizning animatsiya kutubxonamizni kengaytirish va koʻpchilik ishlab chiquvchilar noldan yozishni qiyinlashtirmaydigan, elastik yoki sakrash kabi effektlarni taqdim etish qanchalik oson. Bu yerda sakrash balandligini boshqarish uchun --kf-bounce-from maxsus xususiyatidan foydalanadigan oddiy “sakrash” kalit kadrlar tokeniga misol keltirilgan. /* * Bounce - sakrab kirish animatsiyasi * Sakrash balandligini boshqarish uchun --kf-bounce-f dan foydalaning * Standart: 100vh dan sakrash (ekrandan tashqari) * Foydalanish: * animatsiya: kf-bounce 3s oson kirish; * --kf-bounce-from: 200px; // 200px balandlikdan sakrash */
@keyframes kf-bounce { 0% { tarjima qilish: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { tarjima qilish: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { tarjima qilish: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { tarjima qilish: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85% { tarjima qilish: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { tarjima qilish: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { tarjima qilish: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { tarjima qilish: 0 0; animatsiya-vaqt-funktsiyasi: osonlik bilan chiqish; } }
"Elastik" kabi animatsiyalar asosiy kadrlar ichidagi hisob-kitoblar tufayli biroz qiyinroq. Biz --kf-elastic-from-X va --kf-elastic-from-Y-ni alohida belgilashimiz kerak (ikkalasi ham ixtiyoriy) va ular birgalikda ekranning istalgan nuqtasidan elastik kirishni yaratishga imkon beradi.
/* * Elastik kirish - elastik kirish animatsiyasi * Boshlanish holatini boshqarish uchun --kf-elastic-from-X va --kf-elastic-from-Y dan foydalaning * Standart: yuqori markazdan kiradi (0, -100vh) * Foydalanish: * animatsiya: kf-elastic-in 2s oson-in-out ikkala; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // (-50px, -200px) dan kiriting */
@keyframes kf-elastic-in { 0% { tarjima qiling: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { tarjima qiling: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28% { tarjima qiling: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { tarjima qiling: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { tarjima qiling: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { tarjima qiling: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88% { tarjima qiling: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { tarjima qilish: 0 0; } }
Ushbu yondashuv loyihamiz bo'ylab kengaytirilgan kalit kadrlarni qayta ishlatish va moslashtirishni faqat bitta maxsus xususiyatni o'zgartirish orqali osonlashtiradi.
.bounce-and-zoom { animatsiya: kf-bounce 3s oson kirish, kf-zoom 3s chiziqli; --kf-zoom-dan: 0; }
.bounce-and-slide { animatsiya-kompozitsiya: qo'shish; /* Ikkala animatsiya ham tarjimadan foydalanadi */ animatsiya: kf-bounce 3s oson kirish, kf-slide-in 3s oson chiqish; --kf-slide-from: -200px; }
.elastik-in { animatsiya: kf-elastic-in 2s oson-in-out ikkala; }
Qalam kalit kadrlari tokenlarini ko'ring - Amit Sheen tomonidan taqdim etilgan 7 [forked]. Shu paytgacha biz kalit kadrlarni qanday qilib aqlli va samarali tarzda birlashtirishimiz mumkinligini ko'rdik. Albatta, siz loyihangiz ehtiyojlariga yaxshiroq moslash uchun narsalarni sozlashni xohlashingiz mumkin, ammo biz bir nechta keng tarqalgan animatsiya va kundalik foydalanish misollarini ko'rib chiqdik. Va bu asosiy kadrlar tokenlari bilan bizda endi butun loyiha bo‘ylab izchil va barqaror animatsiyalarni yaratish uchun kuchli qurilish bloklari mavjud. Endi takrorlanuvchi kalit kadrlar, global miqyosdagi ziddiyatlar yo‘q. Bizning barcha animatsiya ehtiyojlarimizni hal qilishning toza va qulay usuli. Lekin asl savol: biz bu qurilish bloklarini qanday qilib birga tuzamiz? Hammasini birlashtirish Biz asosiy kadrlar tokenlarini birlashtirish oddiy ekanligini ko'rdik. Bizga hech qanday maxsus narsa kerak emas, lekin birinchi animatsiyani aniqlash, ikkinchisini aniqlash, kerak bo'lganda o'zgaruvchilarni o'rnatish va tamom. /* Oʻchirish + ichkariga siljitish */ .tost { animatsiya: kf-fade-da 0,4s, kf-slide-in 0,4s kub-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Kattalashtirish + o‘chirish */ .modal { animatsiya: kf-fade-da 0,3s, kf-zoom 0,3s kub-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-dan: 0,7; --kf-zoom-to: 1; }
/* Slayd + puls */ .xabarnoma { animatsiya: kf-slide-in 0,5s, kf-pulse 1.2s oson-in-out cheksiz muqobil; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0,95; --kf-pulse-scale-to: 1,05; }
Bu kombinatsiyalar chiroyli ishlaydi, chunki har bir animatsiya boshqa xususiyatni maqsad qilib oladi: shaffoflik, o'zgartirish (tarjima/miqyos) va h.k. Lekin ba'zida ziddiyatlar yuzaga keladi va biz ularni nima uchun va qanday hal qilishni bilishimiz kerak. Ikkita animatsiya bir xil xususiyatni jonlantirishga harakat qilganda, masalan, ikkala animatsiya shkalasi yoki ikkalasi ham jonlantiruvchi shaffoflik — natija siz kutgandek bo'lmaydi. Odatiy bo'lib, ushbu xususiyatga animatsiyalardan faqat bittasi qo'llaniladi, bu animatsiya ro'yxatidagi oxirgi hisoblanadi. Bu CSS-ning bir xil xususiyatdagi bir nechta animatsiyalarni qanday ishlashini cheklash. Masalan, bu mo'ljallangan tarzda ishlamaydi, chunki faqat kf-pulse animatsiyasi qo'llaniladi. .bad-combo { animatsiya: kf-zoom 0,5s oldinga, kf-pulse 1.2s cheksiz muqobil; --kf-zoom-dan: 0,5; --kf-zoom-to: 1,2; --kf-pulse-scale-from: 0,8; --kf-pulse-scale-to: 1.1; }
Animatsiya qo'shimchasi Xuddi shu xususiyatga ta'sir qiluvchi bir nechta animatsiyalarni boshqarishning eng oddiy va eng to'g'ridan-to'g'ri usuli bu animatsiya-kompozitsiya xususiyatidan foydalanishdir. Yuqoridagi oxirgi misolda kf-pulse animatsiyasi kf-zoom animatsiyasi o‘rnini bosadi, shuning uchun biz boshlang‘ich masshtabni ko‘rmaymiz va kutilgan masshtabni 1,2 ga olmaymiz. Animatsiya kompozitsiyasini qo'shish uchun sozlash orqali biz brauzerga ikkala animatsiyani birlashtirishni aytamiz. Bu bizga kerakli natijani beradi. .komponent-ikki { animatsiya-kompozitsiya: qo'shish; }
Amit Sheen tomonidan yaratilgan qalam kalit kadrlari tokenlari - demo 8 [forked] ga qarang. Ushbu yondashuv biz bir xil xususiyatga ta'sirlarni birlashtirmoqchi bo'lgan aksariyat hollarda yaxshi ishlaydi. Animatsiyalarni statik xususiyat qiymatlari bilan birlashtirish kerak bo'lganda ham foydalidir. Misol uchun, agar bizda translate xususiyatidan foydalanadigan element bo‘lsa, uni aynan o‘zimiz xohlagan joyga qo‘yamiz va keyin uni kf-slide-in kalit kadrlari bilan jonlantirmoqchi bo‘lsak, biz animatsiya-kompozitsiyasiz yomon ko‘rinadigan sakrashga ega bo‘lamiz. Qalam kalit kadrlari tokenlariga qarang - Amit Sheen tomonidan taqdim etilgan 9 [forked]. Animatsiya-kompozitsiya qo'shilishi bilan animatsiya mavjud bilan muammosiz birlashtiriladitransform, shuning uchun element joyida qoladi va kutilganidek jonlantiradi. Animatsiya stagger Bir nechta animatsiyalarni qayta ishlashning yana bir usuli - ularni "chayqash" - ya'ni birinchisi tugaganidan keyin ikkinchi animatsiyani biroz boshlang. Bu har bir holat uchun ishlaydigan yechim emas, lekin bizda doimiy animatsiyadan keyin kirish animatsiyasi mavjud bo'lganda foydalidir. /* pasayish + shaffoflik pulsi */ .xabarnoma { animatsiya: kf-fade-in 2s oson chiqish, kf-pulse 0,5s 2s oson-in-out cheksiz muqobil; --kf-pulse-opacity-to: 0,5; }
Pen Keyframes tokenlarini ko'ring - Amit Sheen tomonidan taqdim etilgan 10 [forked]. Buyurtma masalalari Biz ishlayotgan animatsiyalarning katta qismi transform xususiyatidan foydalanadi. Aksariyat hollarda bu shunchaki qulayroq. Transformatsiya animatsiyalari GPU tomonidan tezlashtirilgan bo'lishi mumkinligi sababli, u ishlash afzalligiga ega. Ammo agar biz transformatsiyalardan foydalansak, biz o'zgarishlarni amalga oshirish tartibi muhimligini qabul qilishimiz kerak. Ko'p. Hozirgacha kalit kadrlarimizda biz individual transformlardan foydalanganmiz. Xususiyatlarga ko'ra, ular har doim belgilangan tartibda qo'llaniladi: birinchi navbatda, element tarjima qilinadi, keyin aylantiriladi, keyin esa masshtablanadi. Bu mantiqiy va ko'pchiligimiz kutgan narsadir. Biroq, agar transform xususiyatidan foydalansak, funksiyalarning yozilish tartibi ularni qo'llash tartibidir. Bunday holda, agar biror narsani X o'qi bo'yicha 100 pikselga siljitsak va keyin uni 45 gradusga aylantirsak, bu avval uni 45 gradusga aylantirib, keyin uni 100 pikselga siljitish bilan bir xil emas. /* Pushti kvadrat: avval tarjima qiling, keyin aylantiring */ .misol-bir { aylantirish: translateX (100px) aylantirish (45deg); }
/* Yashil kvadrat: avval aylantiring, keyin tarjima qiling */ .misol-ikki { aylantirish: aylantirish (45deg) translateX (100px); }
Qalam kalit kadrlari tokenlariga qarang - Amit Sheen tomonidan taqdim etilgan 11 [forked]. Ammo transformatsiya tartibiga ko'ra, barcha individual transformatsiyalar - biz kalit kadrlar tokenlari uchun ishlatgan hamma narsa - transformatsiya funktsiyalaridan oldin sodir bo'ladi. Bu shuni anglatadiki, siz transform xususiyatiga o'rnatgan hamma narsa animatsiyalardan keyin sodir bo'ladi. Ammo, masalan, kf-spin kalit kadrlari bilan birga tarjima qilishni o'rnatsangiz, tarjima animatsiyadan oldin sodir bo'ladi. Hali chalkashmisiz?! Bu statik qiymatlar bir xil animatsiya uchun turli natijalarga olib kelishi mumkin bo'lgan holatlarga olib keladi, masalan, quyidagi holatda:
/* Ikkala spinner uchun ham umumiy animatsiya */ .spinner { animatsiya: kf-spin 1s chiziqli cheksiz; }
/* Pushti spinner: aylantirishdan oldin tarjima qiling (individual konvertatsiya) */ .spinner-pink { tarjima qilish: 100% 50%; }
/* Yashil spinner: aylantiring, keyin tarjima qiling (funktsiya tartibi) */ .spinner-yashil { o'zgartirish: tarjima qilish (100%, 50%); }
Qalam kalit kadrlari tokenlariga qarang - Amit Sheen tomonidan taqdim etilgan 12 [forked]. Ko'rishingiz mumkinki, birinchi spinner (pushti) kf-spinning aylanishidan oldin sodir bo'ladigan tarjimani oladi, shuning uchun u avval o'z joyiga o'tadi va keyin aylanadi. Ikkinchi spinner (yashil) individual transformatsiyadan so'ng amalga oshiriladigan translate() funksiyasini oladi, shuning uchun element avval aylanadi, so'ngra hozirgi burchagiga nisbatan harakatlanadi va biz keng orbita effektini olamiz. Yo'q, bu xato emas. Bu biz CSS haqida bilishimiz va bir nechta animatsiyalar yoki bir nechta transformatsiyalar bilan ishlashda yodda tutishimiz kerak bo'lgan narsalardan biridir. Agar kerak bo'lsa, rotate() funksiyasidan foydalanib elementlarni aylantiruvchi qo'shimcha kf-spin-alt kalit kadrlar to'plamini ham yaratishingiz mumkin. Qisqartirilgan harakat Va biz muqobil kalit kadrlar haqida gapirganda, biz "animatsiya yo'q" variantini e'tiborsiz qoldira olmaymiz. Asosiy kadrlar tokenlaridan foydalanishning eng katta afzalliklaridan biri shundaki, kirish imkoniyatini pishirish mumkin va buni amalga oshirish juda oson. Asosiy kadrlarimizni kirish imkoniyatini hisobga olgan holda loyihalash orqali biz harakatni qisqartirishni afzal ko‘rgan foydalanuvchilar qo‘shimcha ish yoki kod takrorlanmasdan, yanada silliqroq, kamroq chalg‘ituvchi tajribaga ega bo‘lishini ta’minlay olamiz. "Kichik harakat" ning aniq ma'nosi bir animatsiyadan ikkinchisiga va loyihadan loyihaga biroz o'zgarishi mumkin, ammo bu erda bir nechta muhim fikrlarni yodda tutish kerak: Kalit kadrlar ovozini oʻchirish Ba'zi animatsiyalarni yumshatish yoki sekinlashtirish mumkin bo'lsa-da, harakatni kamaytirish so'ralganda butunlay yo'qolishi kerak bo'lgan boshqalar ham bor. Pulse animatsiyalari yaxshi misoldir. Ushbu animatsiyalar qisqartirilgan harakat rejimida ishlamasligiga ishonch hosil qilish uchun ularni tegishli media so'roviga o'rashimiz mumkin.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { dan { shkala: var(--kf-pulse-scale-from, 1); shaffoflik: var(--kf-pulse-opacity-from, 1); } uchun { shkala: var(--kf-pulse-scale-to, 1); shaffoflik:var(--kf-pulse-opacity-to, 1); } } }
Bu afzal ko'rishni qisqartirishni o'rnatgan foydalanuvchilar animatsiyani ko'rmasliklarini va ularning afzalliklariga mos keladigan tajribaga ega bo'lishlarini ta'minlaydi. Darhol kirish Kirish animatsiyalari kabi oddiygina olib tashlab bo'lmaydigan ba'zi kalit kadrlar mavjud. Qiymat o'zgarishi, jonlantirishi kerak; aks holda, element to'g'ri qiymatlarga ega bo'lmaydi. Ammo kamaytirilgan harakatda, bu boshlang'ich qiymatdan o'tish bir zumda bo'lishi kerak. Bunga erishish uchun biz qiymat darhol oxirgi holatga o'tadigan qo'shimcha kalit kadrlar to'plamini aniqlaymiz. Bular bizning birlamchi kalit kadrlarimizga aylanadi. Keyin, avvalgi misolda bo'lgani kabi, afzal ko'rilgan-qisqartirilgan-harakatni afzal ko'rmaslik uchun o'rnatilgan oddiy kalit kadrlarni media so'roviga qo'shamiz. /* harakatni kamaytirish uchun darhol kiring */ @keyframes kf-zoom { dan, {gacha masshtab: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Asl kattalashtirish kalit kadrlari */ @keyframes kf-zoom { dan { masshtab: var(--kf-zoom-from, 0,8); } uchun { masshtab: var(--kf-zoom-to, 1); } } }
Shunday qilib, qisqartirilgan harakatni afzal ko'rgan foydalanuvchilar elementning bir zumda oxirgi holatida paydo bo'lishini ko'radilar, qolganlari esa jonlantirilgan o'tishni oladi. Yumshoq yondashuv Ba'zi holatlar mavjudki, biz harakatni saqlab qolishni xohlaymiz, lekin asl animatsiyaga qaraganda ancha yumshoq va xotirjamroq. Misol uchun, biz teskari kirishni yumshoq pasayish bilan almashtirishimiz mumkin.
@keyframes kf-bounce { /* Harakatni kamaytirish uchun yumshoq pasayish */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Asl qaytish kalit kadrlari */ } }
Endi harakatni qisqartirgan foydalanuvchilar hali ham tashqi ko'rinish hissini olishadi, lekin sakrash yoki elastik animatsiyaning qizg'in harakatisiz. Qurilish bloklari joyida bo'lsa, keyingi savol ularni qanday qilib haqiqiy ish jarayonining bir qismiga aylantirishdir. Moslashuvchan kalit kadrlarni yozish bir narsa, lekin ularni katta loyihada ishonchli qilish uchun men qiyin yo'lni o'rganishim kerak bo'lgan bir nechta strategiyalarni talab qiladi. Amalga oshirish strategiyalari va eng yaxshi amaliyotlar Bizda kalit kadrlar tokenlarining mustahkam kutubxonasiga ega bo‘lganimizdan so‘ng, ularni qanday qilib kundalik ishga jalb qilish kerakligi haqiqiy muammodir.
Vasvasa barcha asosiy kadrlarni bir vaqtning o'zida tashlab, muammoni hal qilingan deb e'lon qilishdir, lekin amalda men eng yaxshi natijalarni bosqichma-bosqich qabul qilish orqali ekanligini aniqladim. Fade yoki slide kabi eng keng tarqalgan animatsiyalardan boshlang. Bu katta qayta yozishni talab qilmasdan darhol qiymatni ko'rsatadigan oson g'alabalardir. Nom berish - e'tiborga loyiq yana bir nuqta. Mos keladigan prefiks yoki nomlar maydoni qaysi animatsiyalar tokenlar va qaysilari mahalliy bir martalik ekanligini aniq ko'rsatadi. Shuningdek, u tasodifiy to'qnashuvlarning oldini oladi va yangi jamoa a'zolariga umumiy tizimni bir qarashda tanib olishga yordam beradi. Hujjatlar xuddi kodning o'zi kabi muhimdir. Hatto har bir kalit kadrlar tokeni ustidagi qisqa sharh ham keyinroq taxmin qilishdan bir necha soat tejash imkonini beradi. Ishlab chiquvchi tokenlar faylini ochishi, kerakli effektni skanerlashi va foydalanish namunasini to'g'ridan-to'g'ri o'z komponentiga nusxalashi kerak. Moslashuvchanlik bu yondashuvni harakatga arziydi. Aniq moslashtirilgan xususiyatlarni ochib, biz jamoalarga tizimni buzmasdan animatsiyani moslashtirish uchun joy beramiz. Shu bilan birga, ortiqcha murakkablashmaslikka harakat qiling. Muhim bo'lgan tugmalarni taqdim eting va qolganlari haqida fikr yuriting. Nihoyat, kirish imkoniyatini unutmang. Har bir animatsiya qisqartirilgan harakat muqobiliga muhtoj emas, lekin ko'pchilik kerak. Ushbu tuzatishlarni erta pishirish biz ularni keyinroq qayta jihozlamasligimizni anglatadi va bu bizning foydalanuvchilarimiz hech qachon eslatmasa ham, e'tiborga olish darajasini ko'rsatadi.
Mening tajribamga ko'ra, asosiy kadrlar tokenlarini bizning dizayn tokenlarimiz ish jarayonining bir qismi sifatida ko'rib chiqish ularni yopishtiruvchi narsadir. Ular o'rnatilgandan so'ng, ular maxsus effektlarni his qilishni to'xtatadilar va dizayn tilining bir qismiga aylanadilar, bu mahsulot qanday harakatlanishi va javob berishining tabiiy kengayishi. Oʻrash Animatsiyalar interfeyslarni qurishning eng quvonchli qismlaridan biri bo'lishi mumkin, ammo tuzilmasiz ular umidsizlikning eng katta manbalaridan biriga aylanishi mumkin. Asosiy kadrlarni token sifatida ko'rib, siz odatda tartibsiz va boshqarish qiyin bo'lgan narsani olasiz va uni aniq, bashorat qilinadigan tizimga aylantirasiz. Haqiqiy qiymat faqat bir necha qator kodlarni saqlashda emas. Ishonchim komilki, siz o'chirish, siljitish, kattalashtirish yoki aylantirishdan foydalansangiz, u loyiha bo'ylab qanday harakat qilishini aniq bilasiz. Bu cheksiz o'zgarishlarning tartibsizligisiz maxsus xususiyatlardan kelib chiqadigan moslashuvchanlikda. Va u sifatida qo'shilgandan ko'ra poydevorga o'rnatilgan qulaylikdakeyingi fikr. Men bu g'oyalar turli jamoalarda va turli kod bazalarida ishlayotganini ko'rdim va naqsh har doim bir xil. Tokenlar o'rnatilgandan so'ng, kalit kadrlar tarqoq fokuslar to'plami bo'lishni to'xtatadi va dizayn tilining bir qismiga aylanadi. Ular mahsulotni yanada qasddan, izchil va jonliroq his qiladi. Agar siz ushbu maqoladan bitta narsani olsangiz, u shunday bo'lsin: animatsiyalar biz ranglar, tipografiya va intervalgacha bo'lgan bir xil g'amxo'rlik va tuzilishga loyiqdir. Asosiy kadrlar tokenlariga kichik sarmoya, interfeysingiz har safar harakat qilganda to'lanadi.
