Тасаввур кунед: шумо ба як лоиҳаи нав ҳамроҳ мешавед, ба базаи кодҳо ворид мешавед ва дар давоми чанд соати аввал шумо чизеро, ки хеле ошно аст, кашф мекунед. Дар тамоми ҷадвалҳои услубҳо пароканда шумо барои як аниматсияҳои асосӣ таърифҳои сершумори @keyframes пайдо мекунед. Се эффектҳои гуногуни пажмурдашуда, ду ё се варианти слайд, як қатор аниматсияҳои масштаб ва ҳадди аққал ду аниматсияҳои гуногуни чархзанӣ, зеро хуб, чаро не? @keyframes набзи { аз { миқёс: 1; } ба { миқёс: 1.1; } }
@keyframes калонтар-пулс { 0%, 20%, 100% { миқёс: 1; } 10%, 40% { миқёс: 1.2; } }
Агар ин сенария шинос бошад, шумо танҳо нестед. Дар таҷрибаи ман дар лоиҳаҳои гуногун, яке аз бурдҳои зудтарини ман метавонам ин муттаҳидсозӣ ва стандартикунонии кадрҳои калидӣ мебошад. Ин як намунаи боэътимод гардид, ки ман ҳоло ин тозакуниро ҳамчун яке аз вазифаҳои аввалини худ дар ҳама гуна пойгоҳи нави код интизорам. Мантиқи паси бесарусомонӣ Вақте ки шумо дар бораи он фикр мекунед, ин зиёдатӣ комилан маъно дорад. Мо ҳама як аниматсияҳои асосиро дар кори ҳаррӯзаи худ истифода мебарем: пажмурдашавӣ, слайдҳо, масштабҳо, чархҳо ва дигар эффектҳои умумӣ. Ин аниматсияҳо хеле соддаанд ва барои анҷом додани кор таърифи фаврии @keyframesро кашидан осон аст. Бе системаи мутамаркази аниматсия, таҳиягарон табиатан ин кадрҳои калидиро аз сифр менависанд ва намедонанд, ки аниматсияҳои шабеҳ аллакай дар ҷои дигари пойгоҳи код мавҷуд аст. Ин махсусан ҳангоми кор дар меъмории ба ҷузъҳо асосёфта маъмул аст (ки аксарияти мо имрӯзҳо ин корро мекунем), зеро гурӯҳҳо аксар вақт дар қисмҳои гуногуни барнома мувозӣ кор мекунанд. Натиҷа? Бетартибиҳои аниматсия. Мушкилоти хурд Мушкилоти равшантарин бо такрори чаҳорчӯбаҳои калидӣ вақти беҳуда сарф кардани таҳия ва варами коди нолозим мебошанд. Таърифҳои сершумори чаҳорчӯбаи калидӣ маънои ҷойҳои сершуморро барои навсозӣ ҳангоми тағир додани талабот доранд. Оё лозим аст, ки вақти аниматсияи пажмурдаатонро танзим кунед? Ба шумо лозим меояд, ки ҳар як мисолро дар пойгоҳи коди худ ҷустуҷӯ кунед. Мехоҳед функсияҳои сабукгардониро стандартизатсия кунед? Муваффақият дар ёфтани ҳама вариантҳо. Ин зарбкунии нуқтаҳои нигоҳдорӣ ҳатто навсозиҳои оддии аниматсияро як вазифаи вақтталаб мекунад. Проблемаи калонтар Ин такрори кадрҳои калидӣ як мушкили хеле маккоронаеро ба вуҷуд меорад: доми миқёси глобалӣ. Ҳатто ҳангоми кор бо меъмории ба ҷузъ асосёфта, чаҳорчӯбаҳои калидӣ CSS ҳамеша дар доираи глобалӣ муайян карда мешаванд. Ин маънои онро дорад, ки ҳамаи чаҳорчӯбаҳои калидӣ ба ҳамаи ҷузъҳо дахл доранд. Ҳамеша. Бале, аниматсияи шумо ҳатман чаҳорчӯбаҳои калидиро, ки шумо дар ҷузъи худ муайян кардаед, истифода намебарад. Он чаҳорчӯбаи охирини калидиро истифода мебарад, ки ба ҳамон номе, ки ба доираи глобалӣ бор карда шудаанд, мувофиқат мекунанд. То он даме, ки ҳамаи чаҳорчӯбаҳои калидии шумо якхелаанд, ин метавонад як масъалаи ночиз ба назар расад. Аммо вақте ки шумо мехоҳед аниматсияро барои як ҳолати мушаххас танзим кунед, шумо дар душворӣ дучор мешавед, ё бадтараш, шумо боиси он мешавед. Ё аниматсияи шумо кор намекунад, зеро ҷузъҳои дигаре, ки пас аз шумо бор карда мешавад, аз нав навиштани кадрҳои калидии шумо ё ҷузъи шумо бори охир бор мекунад ва тасодуфан рафтори аниматсияро барои ҳар як ҷузъи дигар бо истифода аз номи он чаҳорчӯбаи калидӣ тағйир медиҳад ва шумо ҳатто инро дарк карда наметавонед. Ин аст як мисоли оддӣ, ки мушкилотро нишон медиҳад: .компонент-як { /* услубҳои ҷузъҳо */ аниматсия: набзи 1s осонии-дар-берун алтернативии беохир; }
/* ин таърифи @keyframes кор намекунад */ @keyframes набзи { аз { миқёс: 1; } ба { миқёс: 1.1; } }
/* дертар дар код... */
.компонент-ду { /* услубҳои ҷузъҳо */ аниматсия: набзи 1s осонии-дар-берун беохир; }
/* ин чаҳорчӯбаҳои калидӣ ба ҳарду ҷузъҳо татбиқ мешаванд */ @keyframes набзи { 0%, 20%, 100% { миқёс: 1; } 10%, 40% { миқёс: 1.2; } }
Ҳарду ҷузъҳо як номи аниматсияро истифода мебаранд, аммо таърифи дуюми @keyframes аввалро аз нав менависад. Акнун ҳам ҷузъ-як ва ҳам ҷузъ-ду-юм, новобаста аз он, ки кадом ҷузъ кадом чаҳорчӯбаи калидиро муайян кардааст, чаҳорчӯбаҳои калидиро истифода хоҳанд кард. Бингар, ки Pen Keyframes Tokens - Demo 1 [forked] аз ҷониби Амит Шин. Бадтарин қисми? Ин аксар вақт дар рушди маҳаллӣ ба таври комил кор мекунад, аммо ҳангоми тағир додани равандҳои сохтмон тартиби боркунии варақаҳои сабки шумо ба таври мармуз дар истеҳсолот вайрон мешавад. Шумо бо аниматсияҳое, ки вобаста ба он, ки кадом ҷузъҳо бор карда мешаванд ва бо кадом пайдарпаӣ гуногун рафтор мекунанд, хотима меёбед. Ҳалли: чаҳорчӯбаи ягонаи калидӣ Ҷавоб ба ин бесарусомонӣ ба таври ҳайратангез оддӣ аст: чаҳорчӯбаҳои калидӣ муайяншудаи динамикӣ, ки дар ҷадвали услубҳои муштарак нигоҳ дошта мешаванд. Ба ҷои он ки ба ҳар як ҷузъ аниматсияҳои худро муайян кунад, мо кадрҳои мутамарказеро эҷод мекунем, ки хуб ҳуҷҷатгузорӣ шудаанд ва ба осонӣ истифода мешаванд.истифода, нигоҳдорӣ ва мутобиқ ба эҳтиёҷоти мушаххаси лоиҳаи шумо. Онро ҳамчун аломатҳои кадрҳои асосӣ фикр кунед. Ҳамон тавре ки мо токенҳоро барои рангҳо ва фосила истифода мебарем ва бисёре аз мо аллакай токенҳоро барои хосиятҳои аниматсия истифода мебарем, ба монанди функсияҳои давомнокӣ ва осонкунӣ, чаро токенҳоро барои кадрҳои калидӣ низ истифода набарем? Ин равиш метавонад табиатан бо ҳама гуна ҷараёни кории тарроҳии ҷории шумо истифода бурда, ҳамзамон ҳам мушкилоти хурд (такрори код) ва ҳам мушкилоти калонтарро (низоъҳои миқёси ҷаҳонӣ) дар як вақт ҳал кунад. Идеяи оддӣ аст: барои ҳама аниматсияҳои умумии мо манбаи ягонаи ҳақиқат эҷод кунед. Ин ҷадвали услубҳои муштарак дорои чаҳорчӯбаҳои калидӣ, ки намунаҳои аниматсияро дар бар мегиранд, ки лоиҳаи мо воқеан истифода мебарад. Дигар тахмин кардан мумкин нест, ки оё аниматсияи пажмурда аллакай дар ҷое дар пойгоҳи коди мо вуҷуд дорад. Дигар ба таври тасодуфӣ сабт кардани аниматсияҳо аз ҷузъҳои дигар нест. Аммо ин аст калид: инҳо танҳо аниматсияҳои статикии нусхабардорӣ ва часбонӣ нестанд. Онҳо тарҳрезӣ шудаанд, ки тавассути хосиятҳои фармоишии CSS динамикӣ ва танзимшаванда бошанд ва ба мо имкон медиҳанд, ки мувофиқатро нигоҳ дорем, дар ҳоле ки қобилияти мутобиқ кардани аниматсияҳо ба ҳолатҳои мушаххаси истифода, масалан, агар ба шумо дар як ҷо аниматсияи каме калонтар "набз" лозим бошад. Сохтани аломати аввалин кадрҳои калидӣ Яке аз аввалин меваҳои овезон, ки мо бояд мубориза барем, ин аниматсияи "пажмурдашуда" мебошад. Дар яке аз лоиҳаҳои охирини худ, ман зиёда аз даҳҳо таърифҳои алоҳидаи пажмурдашударо ёфтам ва бале, ҳамаашон шаффофиятро аз 0 то 1 аниматсионданд. Пас, биёед ҷадвали услуби навро эҷод кунем, онро kf-tokens.css номида, онро ба лоиҳаи худ ворид кунем ва кадрҳои калидии худро бо шарҳҳои мувофиқ дар дохили он ҷойгир кунем. /* keyframes-tokens.css */
/* * Пажмурда шудан - аниматсияи даромадгоҳ пажмурда мешавад * Истифода: аниматсия: kf-fade-in 0.3s осонкунӣ; */ @keyframes kf-fade-in { аз { шаффофият: 0; } ба { шаффофият: 1; } }
Ин эъломияи ягонаи @keyframes ҳамаи он аниматсияҳои парокандаи пажмурдашударо дар пойгоҳи коди мо иваз мекунад. Тоза, оддӣ ва дар саросари ҷаҳон татбиқшаванда. Ва акнун, ки мо ин аломатро муайян кардаем, мо метавонем онро аз ҳама ҷузъҳои тамоми лоиҳаи худ истифода барем: .modal { аниматсия: kf-фад-дар 0.3s осонии берун; }
.асбоб { аниматсия: kf-фад-дар 0.2s осон-дар-берун; }
.огоҳинома { аниматсия: kf-фад-дар 0.5s осонии берун; }
Бингар, ки Pen Keyframes Tokens - Demo 2 [forked] аз ҷониби Амит Шин. Эзоҳ: Мо дар ҳама номҳои @keyframes-и худ префикси kf-ро истифода мебарем. Ин префикс ҳамчун фазои ном хизмат мекунад, ки ихтилофи номгузорӣ бо аниматсияҳои мавҷуда дар лоиҳаро пешгирӣ мекунад ва фавран равшан месозад, ки ин кадрҳои калидӣ аз файли аломатҳои кадрҳои асосии мо омадаанд. Сохтани слайди динамикӣ Чорчӯбҳои калидии kf-fade-in олиҷаноб кор мекунанд, зеро он оддӣ аст ва ҷои кам барои бесарусомонӣ вуҷуд дорад. Аммо дар дигар аниматсияҳо, мо бояд хеле динамиктар бошем ва дар ин ҷо мо метавонем қудрати бузурги хосиятҳои фармоишии CSS-ро истифода барем. Дар ин ҷо токенҳои калидӣ дар муқоиса бо аниматсияҳои парокандаи статикӣ воқеан дурахшиданд. Биёед як сенарияи умумиро гирем: аниматсияҳои "слайд-дар". Аммо аз куҷо лағжед? 100px аз рост? 50% аз чап? Оё он бояд аз болои экран ворид шавад? Ё шояд аз поён шино кунед? Имкониятҳои зиёд, аммо ба ҷои сохтани чаҳорчӯбаҳои калидӣ барои ҳар як самт ва ҳар як вариант, мо метавонем як аломати чандир созем, ки ба ҳама сенарияҳо мутобиқат кунад: /* * Слайд дар - аниматсияи слайдҳои самтбахш * Барои идора кардани самти --kf-slide-f -ро истифода баред * Пешфарз: слайдҳо аз чап (-100%) * Истифода: * аниматсия: kf-slide-in 0,3s осонкунӣ; * --kf-slide-fro: -100px 0; // аз чап лағжонед * --kf-slide-from: 100px 0; // аз рост лағжонед * --kf-slide-from: 0 -50px; // слайд аз боло */
@keyframes kf-slide-in { аз { тарҷума кунед: var(--kf-slide-from, -100% 0); } ба { тарҷума: 0 0; } }
Акнун мо метавонем ин аломати ягонаи @keyframes-ро барои ҳама гуна самти слайд танҳо бо иваз кардани амволи фармоишии --kf-slide-ро истифода барем: .панели паҳлӯ { аниматсия: kf-слайд-дар 0.3s осонии берун; /* Қимати пешфарзро истифода мебарад: слайдҳо аз чап */ }
.огоҳинома { аниматсия: kf-слайд-дар 0.4s осонии берун; --kf-slide-f: 0 -50px; /* слайд аз боло */ }
.modal { аниматсия: kf-фад-дар 0,5 сония, kf-слайд-дар 0,5с куб-безьер(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* лағжиш аз поён ба рост */ }
Ин равиш ба мо чандирии бениҳоят ҳангоми нигоҳ доштани мувофиқат медиҳад. Як эъломияи чаҳорчӯбаи калидӣ, имкониятҳои беохир. Бингар, ки Pen Keyframes Tokens - Demo 3 [forked] аз ҷониби Амит Шин. Ва агар мо хоҳем, ки аниматсияҳои худро боз ҳам чандиртар созем ва ба эффектҳои "лағжиш" имкон диҳанд, мо метавонемтанҳо як амволи фармоишии --kf-slide-to илова кунед, ки ба он чизе ки мо дар боби оянда мебинем. Чорчӯбҳои калидӣ калонкунии дуҷониба Дигар аниматсияҳои маъмул, ки дар лоиҳаҳо такрор мешаванд, эффектҳои "масштаб" мебошанд. Новобаста аз он ки он як миқёси нозук барои паёмҳои вудкоӣ, васеъкунии драмавӣ барои модальҳо ё эффекти нармӣ барои сарлавҳаҳо бошад, аниматсияҳои масштабкунӣ дар ҳама ҷо мавҷуданд. Ба ҷои сохтани кадрҳои калидӣ барои ҳар як арзиши миқёс, биёед як маҷмӯи фасеҳи кадрҳои калидӣ kf-zoom созем:
/* * Масштаб - аниматсияи миқёс * Барои идоракунии арзишҳои миқёс --kf-zoom-from ва --kf-zoom-to-ро истифода баред * Пешфарз: аз 80% то 100% калон мекунад (0,8 то 1) * Истифода: * аниматсия: kf-zoom 0.2s осонкунӣ; * --kf-zoom-аз: 0,5; --kf-zoom-to: 1; // калон кардан аз 50% то 100% * --kf-zoom-аз: 1; --kf-zoom-to: 0; // калон кардан аз 100% то 0% * --kf-zoom-аз: 1; --kf-zoom-to: 1.1; // калон кардан аз 100% то 110% */
@keyframes kf-zoom { аз { миқёс: var(--kf-zoom-from, 0,8); } ба { миқёс: var(--kf-zoom-to, 1); } }
Бо як таъриф, мо метавонем ҳама гуна тағирёбии масштабро ба даст орем, ки ба мо лозим аст: .тост { аниматсия: kf-слайд-дар 0,2с, kf-zoom 0,4 сония осоншавӣ; --kf-slide-f: 0 100%; /* слайд аз боло */ /* Масъулияти пешфарзро истифода мебарад: миқёси аз 80% то 100% */ }
.modal { аниматсия: kf-zoom 0,3s куби-безиер (0,34, 1,56, 0,64, 1); --kf-zoom-аз: 0; /* масштаби драмавӣ аз 0% то 100% */ }
.сарлавҳа { аниматсия: kf-фад-дар 2 сония, kf-zoom 2s осонкунӣ; --kf-zoom-аз: 1.2; --kf-zoom-to: 0,8; /* миқёси нарм паст */ }
Пешфарзи 0.8 (80%) барои аксари унсурҳои UI, ба монанди паёмҳои тост ва кортҳо, комилан кор мекунад, дар ҳоле ки танзим кардан барои ҳолатҳои махсус осон аст. Бингар, ки Pen Keyframes Tokens - Demo 4 [forked] аз ҷониби Амит Шин. Шумо шояд дар мисолҳои охирин чизи ҷолибро мушоҳида карда бошед: мо аниматсияҳоро муттаҳид мекардем. Яке аз бартариҳои асосии кор бо токенҳои @keyframes он аст, ки онҳо барои ҳамгироӣ бо ҳамдигар тарҳрезӣ шудаанд. Ин таркиби ҳамвор қасдан аст, на тасодуфӣ. Мо баъдтар таркиби аниматсияро муфассалтар баррасӣ хоҳем кард, аз он ҷумла дар куҷо онҳо метавонанд мушкил гардад, аммо аксари комбинатсияҳо содда ва осон амалӣ карда мешаванд. Эзоҳ: Ҳангоми навиштани ин мақола ва шояд аз сабаби навиштани он, ман худамро дидам, ки тамоми идеяи аниматсияҳои даромадгоҳро аз нав дида мебароям. Бо ҳама пешрафтҳои охирин дар CSS, оё мо ҳоло ҳам ба онҳо ниёз дорем? Хушбахтона, Адам Аргайл ҳамон саволҳоро таҳқиқ кард ва онҳоро дар блоги худ олиҷаноб баён кард. Ин ба он чизе, ки дар ин ҷо навишта шудааст, мухолиф нест, аммо он равишеро пешниҳод мекунад, ки ба назар гирифта шавад, хусусан агар лоиҳаҳои шумо ба аниматсияҳои даромадгоҳ такя кунанд. Аниматсияҳои доимӣ Ҳангоме ки аниматсияҳои воридотӣ, ба монанди "фаза", "слайд" ва "масштаб" як бор рух медиҳанд ва сипас қатъ мешаванд, аниматсияҳои доимӣ барои ҷалби таваҷҷӯҳ ё нишон додани фаъолияти ҷорӣ ба таври номуайян давр мезананд. Ду аниматсияҳои маъмултарине, ки ман дучор меоям, ин "spin" (барои боркунии нишондиҳандаҳо) ва "пулс" (барои таъкид кардани унсурҳои муҳим) мебошанд. Ин аниматсияҳо ҳангоми сохтани аломатҳои кадрҳои калидӣ мушкилоти беназирро ба бор меоранд. Баръакси аниматсияҳои даромадгоҳ, ки маъмулан аз як ҳолат ба ҳолати дигар мегузаранд, аниматсияҳои доимӣ бояд дар намунаҳои рафтори худ ба таври хеле танзимшаванда бошанд. Доктори чархзанӣ Чунин ба назар мерасад, ки ҳар як лоиҳа аниматсияҳои сершуморро истифода мебарад. Баъзеҳо ба самти ақрабаки соат чарх мезананд, дигарон ба муқобили ақрабаки соат. Баъзеҳо як гардиши 360-дараҷаро иҷро мекунанд, дигарон барои таъсири тезтар гардишҳои сершумор мекунанд. Ба ҷои сохтани чаҳорчӯбаҳои калидӣ барои ҳар як вариант, биёед як чархи тағйирёбанда созем, ки ҳамаи сенарияҳоро идора мекунад:
/* * Spin - аниматсияи гардиш * Барои идоракунии диапазони гардиш --kf-spin-f ва --kf-spin-to -ро истифода баред * Барои назорат кардани миқдори гардиш --kf-spin-turns -ро истифода баред * Пешфарз: аз 0deg то 360deg гардиш мекунад (1 гардиши пурра) * Истифода: * аниматсия: kf-spin 1s беохири хатӣ; * --kf-spin-turns: 2; // 2 гардиши пурра * --kf-spin-аз: 0deg; --kf-spin-to: 180deg; // нисфи гардиш * --kf-spin-аз: 0deg; --kf-spin-to: -360deg; // муқобили ақрабаки соат */
@keyframes kf-spin { аз { гардиш: var(--kf-spin-from, 0deg); } ба { гардиш: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Акнун мо метавонем ҳама гуна варианти чархи ба мо маъқулро эҷод кунем:
.loading-spinner { аниматсия: kf-spin 1s хатти беохир; /* Пешфарзро истифода мебарад: аз 0deg то 360deg гардиш мекунад */ }
.fast-loader { аниматсия: kf-spin 1.2s осонии-дар-берун алтернативии беохир; --kf-spin-turns: 3; /* 3 гардиши пурра барои ҳар як самт дар як давра*/ }
.қадам-барқарор { аниматсия: қадамҳои kf-spin 1.5s (8) беохир; --kf-spin-to: -360deg; /* муқобили ақрабаки соат */ }
.subtle-wiggle { аниматсия: kf-spin 2s осонии-дар-берун алтернативии беохир; --kf-spin-аз: -16deg; --kf-spin-to: 32deg; /* ҳаракат 36 дараҷа: байни -18 дараҷа ва +18 дараҷа */ }
Бингар, ки Pen Keyframes Tokens - Demo 5 [forked] аз ҷониби Амит Шин. Зебоии ин равиш дар он аст, ки ҳамон кадрҳои калидӣ барои боркунии чархҳо, нишонаҳои гардишкунанда, эффектҳои чархзананда ва ҳатто аниматсияҳои мураккаби бисёр гардиш кор мекунанд. Парадокси набз Аниматсияҳои импулс душвортаранд, зеро онҳо метавонанд хосиятҳои гуногунро "набз" кунанд. Баъзеҳо миқёсро набз мекунанд, дигарон шаффофиятро импулс медиҳанд ва баъзе хосиятҳои ранги импулсро ба монанди равшанӣ ё сершавӣ. Ба ҷои сохтани чаҳорчӯбаҳои калидӣ барои ҳар як амвол, мо метавонем чаҳорчӯбаҳои калидиро эҷод кунем, ки бо ҳама гуна моликияти CSS кор мекунанд. Ин аст як мисоли чаҳорчӯбаи калидӣ бо имконоти миқёс ва шаффофият:
/* * Набз - аниматсияи импулс * Барои назорати диапазони миқёс --kf-pulse-scale-f ва --kf-pulse-scale-to-ро истифода баред * Барои назорати диапазони шаффофият --kf-pulse-opacity-from ва --kf-pulse-opacity-to-ро истифода баред * Пешфарз: набз нест (ҳамаи арзишҳо 1) * Истифода: * аниматсия: kf-pulse 2s алтернативаи беохир; * --kf-pulse-scale-аз: 0,95; --kf-pulse-scale-to: 1,05; // набзи миқёс * --kf-pulse-nopacity-аз: 0,7; --kf-pulse-nopacity-to: 1; // набзи шаффофият */
@keyframes kf-pulse { аз { миқёс: var(--kf-pulse-scale-from, 1); шаффофият: var(--kf-pulse-nopacity-from, 1); } ба { миқёс: var(--kf-pulse-scale-to, 1); шаффофият: var(--kf-pulse-nopacity-to, 1); } }
Ин як набзи чандирро эҷод мекунад, ки метавонад хосиятҳои сершуморро ҷон диҳад: .даъват ба амал { аниматсия: kf-набзи 0.6s алтернативии беохир; --kf-pulse-шаффофият-аз: 0,5; /* набзи шаффофият */ }
.notification-нуқта { аниматсия: kf-набзи 0.6s осонии-дар-берун алтернативии беохир; --kf-pulse-scale-аз: 0,9; --kf-pulse-scale-to: 1.1; /* набзи миқёси */ }
.text-highlight { аниматсия: kf-pulse 1.5s осонии беохир; --kf-pulse-scale-аз: 0,8; --kf-pulse-nopacity-аз: 0,2; /* набзи миқёс ва шаффофият */ }
Бингар, ки Pen Keyframes Tokens - Demo 6 [forked] аз ҷониби Амит Шин. Ин чаҳорчӯбаи калидии ягонаи kf-pulse метавонад ҳама чизро аз ҷалби диққати нозук то лаҳзаҳои барҷастаи драмавӣ идора кунад, дар ҳоле ки танзим кардан осон аст. Равиши пешрафта Яке аз чизҳои олӣ дар бораи истифодаи аломатҳои кадрҳои калидӣ ин аст, ки то чӣ андоза осон кардани он аст, ки китобхонаи аниматсияҳои мо ва фароҳам овардани эффектҳое, ки аксари таҳиягарон аз сифр навиштан, ба монанди эластикӣ ё ҷаҳишро ташвиш намедиҳанд. Дар ин ҷо мисоли аломати оддии чаҳорчӯбаи калидӣ, ки барои назорати баландии ҷаҳиш моликияти фармоишии --kf-bounce-ро истифода мебарад. /* * Bounce - аниматсияи ҷаҳиши даромадгоҳ * Барои назорати баландии ҷаҳиш --kf-bounce-f -ро истифода баред * Пешфарз: ҷаҳиш аз 100vh (хомӯш экран) * Истифода: * аниматсия: kf-bounce 3s осонии; * --kf-bounce-from: 200px; // Ҷаҳиш аз баландии 200px */
@keyframes kf-bounce { 0% { тарҷума кардан: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { тарҷума: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { тарҷума: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { тарҷума: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85% { тарҷума: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { тарҷума: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { тарҷума: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { тарҷума: 0 0; аниматсия-вақт-функсия: осон-берун; } }
Аниматсияҳо ба монанди "эластикӣ" аз сабаби ҳисобҳо дар дохили кадрҳои калидӣ каме душвортаранд. Мо бояд --kf-elastic-from-X ва --kf-elastic-from-Y-ро алоҳида муайян кунем (ҳарду ихтиёрӣ мебошанд) ва онҳо якҷоя ба мо имкон медиҳанд, ки аз ҳар нуқтаи экран даромадгоҳи чандирӣ созем.
/* * Elastic In - аниматсияи чандирии даромадгоҳ * Барои назорат кардани мавқеи оғоз --kf-elastic-from-X ва --kf-elastic-from-Y -ро истифода баред * Пешфарз: аз маркази боло ворид мешавад (0, -100vh) * Истифода: * аниматсия: kf-elastic-in 2s осон-дар-берун ҳам; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // аз (-50px, -200px) ворид кунед */
@keyframes kf-elastic-in { 0% { тарҷума кунед: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { тарҷума кунед: calc(var(--kf-elastic-from-X, -50vw) * -0.3227) calc(var(--kf-elastic-from-Y, 0px) * -0.3227); }
28% { тарҷума кунед: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { тарҷума кунед: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { тарҷума кунед: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { тарҷума кунед: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { тарҷума кунед: calc(var(--kf-elastic-from-X, -50vw) * 0.0020) calc(var(--kf-elastic-from-Y, 0px) * 0.0020); }
100% { тарҷума: 0 0; } }
Ин равиш дубора истифода ва танзим кардани кадрҳои пешрафтаи калидиро дар тамоми лоиҳаи мо, танҳо бо иваз кардани як моликияти фармоишӣ осон мекунад.
.bounce-and-zoom { аниматсия: kf-bounce 3s ба осонӣ ворид шудан, kf-zoom 3s хатӣ; --kf-zoom-аз: 0; }
.bounce-and-slide { аниматсия-композитсия: илова кардан; /* Ҳарду аниматсия тарҷумаро истифода мебаранд */ аниматсия: kf-bounce 3s ба осонӣ ворид шудан, kf-slide-in 3s осонкунӣ; --kf-slide-from: -200px; }
.эластикӣ { аниматсия: kf-elastic-in 2s осон-дар-берун ҳам; }
Бингар, ки Pen Keyframes Tokens - Demo 7 [forked] аз ҷониби Амит Шин. То ин вақт, мо дидем, ки чӣ гуна мо метавонем кадрҳои калидиро бо роҳи оқилона ва муассир муттаҳид созем. Албатта, шумо метавонед чизҳоро тағир диҳед, то ба эҳтиёҷоти лоиҳаи худ беҳтар мувофиқат кунед, аммо мо мисолҳои якчанд аниматсияҳои маъмул ва ҳолатҳои истифодаи ҳамарӯзаро баррасӣ кардем. Ва бо мавҷуд будани ин аломатҳои кадрҳои калидӣ, мо ҳоло блокҳои пурқуввати сохтмонӣ барои эҷоди аниматсияҳои пайваста ва нигоҳдорӣ дар тамоми лоиҳа дорем. Не чорчӯбаи калидӣ такроршаванда, дигар ихтилофи миқёси глобалӣ. Танҳо як роҳи тоза ва қулай барои ҳалли тамоми эҳтиёҷоти аниматсияи мо. Аммо саволи аслӣ ин аст: чӣ гуна мо ин блокҳои сохтмонро якҷоя мекунем? Ҳама чизро якҷоя кардан Мо дидем, ки омезиши аломатҳои асосии кадрҳои асосӣ оддӣ аст. Мо ба чизи махсус ниёз надорем, ҷуз он ки аниматсияи аввалро муайян кунем, дуюмро муайян кунем, тағирёбандаҳоро мувофиқи зарурат таъин кунем ва ҳамин тавр. /* Пажӯҳиш + слайд дар */ .тост { аниматсия: kf-фад-дар 0,4с, kf-слайд-дар 0,4с куб-безьер(0,34, 1,56, 0,64, 1); --kf-slide-f: 0 40px; }
/* калон кардан + пажмурда кардан */ .modal { аниматсия: kf-фад-дар 0,3с, kf-zoom 0,3с куб-безьер (0,34, 1,56, 0,64, 1); --kf-zoom-аз: 0,7; --kf-zoom-to: 1; }
/* Лағжиш + набз */ .огоҳинома { аниматсия: kf-слайд-дар 0,5 сония, kf-pulse 1.2s алтернативаи беохир; --kf-slide-fro: -100px 0; --kf-pulse-scale-аз: 0,95; --kf-pulse-scale-to: 1,05; }
Ин комбинатсияҳо зебо кор мекунанд, зеро ҳар як аниматсия хосияти дигарро ҳадаф қарор медиҳад: шаффофият, табдил (тарҷума/миқёс) ва ғайра. Аммо баъзан ихтилофҳо вуҷуд доранд ва мо бояд донем, ки чаро ва чӣ тавр бо онҳо мубориза барем. Вақте ки ду аниматсия кӯшиш мекунанд, ки як моликиятро анимат кунанд - масалан, ҳам миқёси аниматсия ё ҳарду шаффофияти аниматсия - натиҷа он чизе ки шумо интизор будед, нахоҳад буд. Бо нобаёнӣ, танҳо яке аз аниматсияҳо воқеан ба он амвол татбиқ карда мешавад, ки охирин дар рӯйхати аниматсияҳо мебошад. Ин маҳдудиятест, ки чӣ тавр CSS аниматсияҳои сершуморро дар як молу мулк идора мекунад. Масалан, ин мувофиқи пешбинишуда кор намекунад, зеро танҳо аниматсияи kf-pulse татбиқ мешавад. .бад-комбо { аниматсия: kf-zoom 0,5 сония ба пеш, kf-pulse 1.2s алтернативии беохир; --kf-zoom-аз: 0,5; --kf-zoom-to: 1.2; --kf-pulse-scale-аз: 0,8; --kf-pulse-scale-to: 1.1; }
Иловаи аниматсия Роҳи соддатарин ва мустақимтарини коркарди аниматсияҳои сершумор, ки ба як моликият таъсир мерасонанд, ин истифодаи хосияти аниматсия-композитсия мебошад. Дар мисоли охирини боло, аниматсияи kf-pulse аниматсияи kf-zoomро иваз мекунад, аз ин рӯ мо масштаби ибтидоиро намебинем ва миқёси пешбинишударо то 1,2 ба даст намеорем. Бо гузоштани аниматсия-композитсия барои илова, мо ба браузер мегӯем, ки ҳарду аниматсияро муттаҳид кунад. Ин ба мо натиҷаи дилхоҳ медиҳад. .компонент-ду { аниматсия-композитсия: илова кардан; }
Бингар, ки Pen Keyframes Tokens - Demo 8 [forked] аз ҷониби Амит Шин. Ин равиш барои аксари ҳолатҳо хуб кор мекунад, ки мо мехоҳем эффектҳоро ба ҳамон амвол муттаҳид кунем. Он инчунин вақте муфид аст, ки ба мо лозим аст, ки аниматсияҳоро бо арзишҳои моликияти статикӣ якҷоя кунем. Масалан, агар мо унсуре дошта бошем, ки хосияти тарҷумаро истифода бурда, онро маҳз дар ҷое, ки мехоҳем ҷойгир кунад ва он гоҳ мо мехоҳем, ки онро бо кадрҳои калидӣ дар kf-slide-in аниматсия кунем, мо бе аниматсия-композитсия ҷаҳиши ношоиста ба даст меорем. Бингар, ки Pen Keyframes Tokens - Demo 9 [forked] аз ҷониби Амит Шин. Бо гузоштани аниматсия-композитсия барои илова, аниматсия ба осонӣ бо мавҷуда омехта карда мешавадтабдил медиҳад, бинобар ин элемент дар ҷои худ мемонад ва тавре ки интизор мерафт, аниме мекунад. Animation Stagger Роҳи дигари коркарди аниматсияҳои сершумор ин «ҳайрон кардани» онҳо мебошад, яъне аниматсияи дуюмро каме пас аз анҷоми аниматсияи аввал оғоз кунед. Ин як роҳи ҳалли барои ҳар як ҳолат кор намекунад, балки он муфид аст, вақте ки мо як аниматсия даромадгоҳ пас аз як аниматсия пайваста. /* пажмурда шудан + набзи шаффофият */ .огоҳинома { аниматсия: kf-fade-in 2s осоншавӣ, kf-набзи 0,5с 2с осон-дар-берун алтернативии беохир; --kf-pulse-шаффофият-то: 0,5; }
Бингар, ки Pen Keyframes Tokens - Demo 10 [forked] аз ҷониби Амит Шин. Масъалаҳои фармоиш Қисми зиёди аниматсияҳое, ки мо бо онҳо кор мекунем, моликияти трансформиро истифода мебаранд. Дар аксари ҳолатҳо, ин танҳо қулайтар аст. Он инчунин бартарии иҷроиш дорад, зеро аниматсияҳои табдил метавонанд бо GPU суръат бахшанд. Аммо агар мо тағиротҳоро истифода барем, мо бояд қабул кунем, ки тартиби иҷрои тағиротҳои мо муҳим аст. Бисёр. Дар чаҳорчӯбаи калидии мо то ҳол мо тағироти инфиродӣ истифода кардем. Мувофиқи нишондодҳо, онҳо ҳамеша бо тартиби муқарраршуда татбиқ карда мешаванд: аввал, элемент тарҷума мешавад, сипас гардиш мекунад, сипас миқёс мекунад. Ин маъно дорад ва он чизест, ки аксарияти мо интизоранд. Аммо, агар мо хосияти табдилро истифода барем, тартиби навиштани функсияҳо тартиби татбиқи онҳост. Дар ин ҳолат, агар мо чизеро 100 пиксел дар меҳвари X ҳаракат кунем ва баъд онро 45 дараҷа гардем, ин ба он монанд нест, ки аввал онро 45 дараҷа ва баъд 100 пиксел ҳаракат кунем. /* Майдони гулобӣ: Аввал тарҷума кунед, баъд гардиш кунед */ .мисол-як { табдил: translateX (100px) гардиш (45deg); }
/* Майдони сабз: Аввал гардиш кунед, баъд тарҷума кунед */ .мисол-ду { табдил: гардиш (45deg) translateX (100px); }
Бингар, ки Pen Keyframes Tokens - Demo 11 [forked] аз ҷониби Амит Шин. Аммо тибқи тартиби табдилдиҳӣ, ҳама тағиротҳои инфиродӣ - ҳама чизе, ки мо барои аломатҳои кадрҳои калидӣ истифода бурдаем, пеш аз функсияҳои табдил ба амал меоянд. Ин маънои онро дорад, ки ҳама чизе, ки шумо дар моликияти трансформатсия муқаррар кардаед, пас аз аниматсияҳо рӯй медиҳад. Аммо агар шумо, масалан, тарҷумаро якҷоя бо чаҳорчӯбаи калидӣ kf-spin таъин кунед, тарҷума пеш аз аниматсия сурат мегирад. Ҳанӯз ошуфтааст?! Ин ба ҳолатҳое оварда мерасонад, ки арзишҳои статикӣ метавонанд барои як аниматсия натиҷаҳои гуногун оваранд, масалан дар ҳолати зерин:
/* Аниматсияҳои умумӣ барои ҳарду spinner */ .spinner { аниматсия: kf-spin 1s хатти беохир; }
/* Спиннери гулобӣ: пеш аз гардиш тарҷума кунед (табдилдиҳии инфиродӣ) */ .spinner-pink { тарҷума: 100% 50%; }
/* Спиннери сабз: гардиш ва тарҷума кардан (тартиби функсия) */ .spinner-сабз { табдил додан: тарҷума кардан (100%, 50%); }
Бингар, ки Pen Keyframes Tokens - Demo 12 [forked] аз ҷониби Амит Шин. Шумо мебинед, ки чархзанандаи аввал (гулобӣ) тарҷумаеро ба даст меорад, ки пеш аз гардиши kf-spin рӯй медиҳад, бинобар ин вай аввал ба ҷои худ ҳаракат мекунад ва сипас чарх мезанад. Спиннери дуюм (сабз) функсияи translate()-ро мегирад, ки пас аз табдили инфиродӣ ба амал меояд, аз ин рӯ элемент аввал чарх мезанад, баъд нисбат ба кунҷи кунунии худ ҳаракат мекунад ва мо ин эффекти васеи орбитаро ба даст меорем. Не, ин хато нест. Ин танҳо яке аз он чизҳоест, ки мо бояд дар бораи CSS донем ва ҳангоми кор бо аниматсияҳои сершумор ё тағироти сершумор дар хотир нигоҳ дорем. Агар лозим бошад, шумо инчунин метавонед маҷмӯи иловагии чаҳорчӯбаҳои калидӣ kf-spin-alt эҷод кунед, ки бо истифода аз функсияи rotate() элементҳоро гардиш мекунанд. Ҳаракати камшуда Ва дар ҳоле ки мо дар бораи кадрҳои алтернативӣ гап мезанем, мо наметавонем варианти "аниматсия нест" -ро сарфи назар кунем. Яке аз бартариҳои бузургтарини истифодаи аломатҳои кадрҳои калидӣ дар он аст, ки дастрасиро дар он пухтан мумкин аст ва иҷрои он воқеан хеле осон аст. Бо тарҳрезии чаҳорчӯбаҳои калидии худ бо дарназардошти дастрасӣ, мо метавонем кафолат диҳем, ки корбароне, ки ҳаракати камро афзалтар медонанд, бидуни кори иловагӣ ё такрори код таҷрибаи ҳамвортар ва камтар парешон ба даст оранд. Маънои дақиқи "Ҳаракати камшуда" метавонад аз як аниматсия ба дигараш ва аз лоиҳа ба лоиҳа каме тағйир ёбад, аммо дар ин ҷо чанд нуктаи муҳимро бояд дар хотир дошт: Хомӯш кардани кадрҳои калидӣ Гарчанде ки баъзе аниматсияҳоро нарм кардан ё суст кардан мумкин аст, баъзеи дигар, ки ҳангоми дархости кам кардани ҳаракат бояд комилан нопадид шаванд. Аниматсияҳои пулсӣ намунаи хубанд. Барои боварӣ ҳосил кардани он, ки ин аниматсияҳо дар ҳолати камшудаи ҳаракат кор намекунанд, мо метавонем онҳоро танҳо дар дархости мувофиқи медиа печонем.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { аз { миқёс: var(--kf-pulse-scale-from, 1); шаффофият: var(--kf-pulse-nopacity-from, 1); } ба { миқёс: var(--kf-pulse-scale-to, 1); шаффофият:var(--kf-pulse-nopacity-to, 1); } } }
Ин кафолат медиҳад, ки корбароне, ки афзалиятҳои кам кардани ҳаракатро муқаррар кардаанд, аниматсияро нахоҳанд дид ва таҷрибаи мувофиқи афзалияти онҳоро пайдо кунанд. Дарҳол Баъзе чаҳорчӯбаҳои калидӣ мавҷуданд, ки мо онҳоро танҳо нест карда наметавонем, ба монанди аниматсияҳои даромад. Арзиш бояд тағир ёбад, бояд зинда шавад; дар акси ҳол, элемент арзишҳои дуруст нахоҳад дошт. Аммо ҳангоми ҳаракати камшуда, ин гузариш аз арзиши ибтидоӣ бояд фаврӣ бошад. Барои ноил шудан ба ин, мо маҷмӯи иловагии чаҳорчӯбаи калидиро муайян хоҳем кард, ки арзиш фавран ба ҳолати ниҳоӣ мегузарад. Инҳо чаҳорчӯбаи калидии мо мешаванд. Сипас, мо чаҳорчӯбаҳои муқаррарии калидиро дар дохили як дархости медиа барои танзими афзалият-камкардашуда-ҳаракат ба бе афзалият илова мекунем, ба мисли мисоли қаблӣ. /* барои кам кардани ҳаракат фавран ворид шавед */ @keyframes kf-zoom { аз, ба { миқёс: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* кадрҳои калидӣ масштабкунии аслӣ */ @keyframes kf-zoom { аз { миқёс: var(--kf-zoom-from, 0,8); } ба { миқёс: var(--kf-zoom-to, 1); } } }
Ҳамин тавр, корбароне, ки ҳаракати камро афзалтар медонанд, мебинанд, ки элемент фавран дар ҳолати ниҳоии худ пайдо мешавад, дар ҳоле ки ҳама гузариши аниматсионӣ мегиранд. Равиши нарм Ҳолатҳое ҳастанд, ки мо мехоҳем каме ҳаракатро нигоҳ дорем, аммо нисбат ба аниматсияи аслӣ хеле нармтар ва оромтар аст. Масалан, мо метавонем даромадгоҳи ҷаҳишро бо пажмурдашавии мулоим иваз кунем.
@keyframes kf-bounce { /* Пажмурдани нарм барои кам кардани ҳаракат */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* чаҳорчӯбаҳои аслии ҷаззоб */ } }
Ҳоло корбароне, ки ҳаракати кам доранд, ҳанӯз ҳам ҳисси намуди зоҳириро ба даст меоранд, аммо бидуни ҳаракати шадиди ҷаҳиш ё аниматсияи чандирӣ. Ҳангоми ҷойгир кардани блокҳои сохтмонӣ, саволи навбатӣ ин аст, ки чӣ гуна онҳоро ба як қисми ҷараёни кор табдил додан мумкин аст. Навиштани чаҳорчӯбаҳои калидӣ як чиз аст, аммо эътимоднок кардани онҳо дар як лоиҳаи калон чанд стратегияеро талаб мекунад, ки ман бояд роҳи душворро омӯзам. Стратегияҳои татбиқ ва таҷрибаҳои беҳтарин Вақте ки мо як китобхонаи мустаҳками аломатҳои кадрҳои калидӣ дорем, мушкилоти аслӣ ин аст, ки чӣ гуна онҳоро ба кори ҳаррӯза ворид кунем.
Васвасаи он аст, ки ҳама кадрҳои калидӣ якбора партофта шаванд ва мушкилоти ҳалшуда эълон карда шаванд, аммо дар амал ман фаҳмидам, ки натиҷаҳои беҳтарин аз қабули тадриҷан ба даст меоянд. Бо аниматсияҳои маъмултарин, ба монанди пажмурда ё слайд оғоз кунед. Инҳо бурдҳои осон мебошанд, ки арзиши фаврӣ нишон медиҳанд, бе талаб кардани навиштаҷоти калон. Номгузорї нуктаи дигаре аст, ки шоёни таваљљўњ аст. Префикси доимӣ ё фазои номҳо равшан месозад, ки кадом аниматсияҳо аломатҳо ва кадоме аз онҳо якдафъаинаи маҳаллӣ мебошанд. Он инчунин бархӯрди тасодуфиро пешгирӣ мекунад ва ба аъзоёни нави даста дар як нигоҳ системаи муштаракро эътироф мекунад. Ҳуҷҷатгузорӣ ба мисли худи код муҳим аст. Ҳатто як шарҳи кӯтоҳ дар болои ҳар як аломати чаҳорчӯбаи калидӣ метавонад соатҳои тахминиро дертар сарфа кунад. Таҳиягар бояд қодир бошад, ки файли токенҳоро кушояд, эффекти заруриро скан кунад ва намунаи истифодаро мустақиман ба ҷузъи худ нусхабардорӣ кунад. Фасеҳӣ он чизест, ки ин равишро ба саъю кӯшиш меарзад. Бо фош кардани хосиятҳои оддии фармоишӣ, мо ба дастаҳо ҷой медиҳем, ки аниматсияро бидуни вайрон кардани система мутобиқ созанд. Дар баробари ин кӯшиш кунед, ки аз ҳад зиёд мураккаб нашавед. Тугмаҳои муҳимро таъмин кунед ва боқимондаро бо ақида нигоҳ доред. Ниҳоят, дастрасиро дар хотир доред. На ҳар як аниматсия ба алтернативаи камшудаи ҳаракат ниёз дорад, аммо бисёриҳо ин корро мекунанд. Пухтупази барвақт дар ин ислоҳот маънои онро дорад, ки мо ҳеҷ гоҳ онҳоро дертар такмил надиҳем ва ин сатҳи ғамхорӣ нишон медиҳад, ки корбарони мо ҳатто агар онҳо ҳеҷ гоҳ дар ин бора ёдовар нашаванд, мушоҳида хоҳанд кард.
Дар таҷрибаи ман, баррасии аломатҳои кадрҳои калидӣ ҳамчун як қисми ҷараёни кории токенҳои тарроҳии мо он чизест, ки онҳоро часпидааст. Пас аз он ки онҳо ҷой доранд, онҳо эҳсоси эффектҳои махсусро қатъ мекунанд ва як қисми забони тарроҳӣ мешаванд, як тавсеаи табиии ҳаракат ва посухи маҳсулот. Пахш кардан Аниматсияҳо метавонанд яке аз қисматҳои хурсандибахши сохтани интерфейсҳо бошанд, аммо бидуни сохтор онҳо инчунин метавонанд яке аз бузургтарин сарчашмаҳои ноумедӣ шаванд. Бо баррасии кадрҳои калидӣ ҳамчун нишонаҳо, шумо чизеро мегиред, ки одатан бесарусомон ва идора кардан душвор аст ва онро ба системаи равшан ва пешгӯинашаванда табдил медиҳед. Арзиши ҳақиқӣ на танҳо дар захира кардани чанд сатри код аст. Ин боварӣ аст, ки вақте ки шумо пажмурда, слайд, масштаб ё чархро истифода мебаред, шумо аниқ медонед, ки он дар тамоми лоиҳа чӣ гуна рафтор хоҳад кард. Маҳз дар чандирӣ, ки аз хосиятҳои фармоишӣ бидуни бесарусомонии вариантҳои беохир бармеояд. Ва он дар дастрасии дар таҳкурсӣ сохташуда аст, на ҳамчун иловаандешаи баъдӣ. Ман дидам, ки ин ғояҳо дар дастаҳои гуногун ва пойгоҳҳои кодҳои гуногун кор мекунанд ва намуна ҳамеша як хел аст. Пас аз ҷойгир кардани аломатҳо, кадрҳои калидӣ маҷмӯаи парокандаи ҳилаҳоро қатъ мекунанд ва як қисми забони тарроҳӣ мешаванд. Онҳо маҳсулотро бештар мақсаднок, мувофиқтар ва зиндатар ҳис мекунанд. Агар шумо аз ин мақола як чизро гиред, бигзор он чунин бошад: аниматсияҳо сазовори ҳамон ғамхорӣ ва сохторе мебошанд, ки мо аллакай ба рангҳо, типография ва фосила медиҳем. Сармоягузории хурд ба аломатҳои кадрҳои асосӣ ҳар боре, ки интерфейси шумо ҳаракат мекунад, фоида меорад.
