Муну элестетиңиз: сиз жаңы долбоорго кошуласыз, код базасына сүңгүп кирип, алгачкы бир нече сааттын ичинде көңүлүңүздү чөгөрө турган тааныш нерсени таап аласыз. Стил таблицаларында чачыраган, сиз бир эле негизги анимациялар үчүн бир нече @keyframes аныктамаларын табасыз. Үч түрдүү өчүп калуу эффекттери, эки же үч слайддын вариациялары, бир нече масштабдуу анимациялар жана жок дегенде эки түрдүү айлануу анимациялары, анткени, эмне үчүн? @keyframes пульс { тартып { масштаб: 1; } үчүн { шкала: 1.1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { масштаб: 1; } 10%, 40% { шкала: 1.2; } }
Эгер бул сценарий тааныш болсо, сиз жалгыз эмессиз. Ар кандай долбоорлордогу тажрыйбам боюнча, мен жеткире алган эң ырааттуу тез утуштардын бири бул негизги кадрларды консолидациялоо жана стандартташтыруу. Бул ушунчалык ишенимдүү үлгү болуп калды, ошондуктан мен бул тазалоону каалаган жаңы код базасындагы биринчи тапшырмаларымдын бири катары күтүп жатам. Каостун артындагы логика Бул ашыкчалык сиз жөнүндө ойлонгондо толук мааниси бар. Биз баарыбыз күнүмдүк ишибизде бирдей фундаменталдык анимацияларды колдонобуз: өчүп калуу, слайддар, чоңойтуулар, айлантуулар жана башка жалпы эффекттер. Бул анимациялар абдан жөнөкөй жана жумушту бүтүрүү үчүн тез @keyframes аныктамасын камчылоо оңой. Борборлоштурулган анимация системасы жок болсо, иштеп чыгуучулар табигый түрдө бул негизги кадрларды нөлдөн баштап жазышат, мындай анимациялар код базасынын башка жеринде бар экенин билишпейт. Бул өзгөчө компоненттерге негизделген архитектурада иштегенде кеңири таралган (ушул күндөрдө көпчүлүгүбүз жасайбыз), анткени командалар көбүнчө тиркеменин ар кайсы бөлүктөрүндө параллелдүү иштешет. Натыйжа? Анимация башаламандыгы. Кичинекей көйгөй Негизги кадрларды кайталоодогу эң айкын маселелер – бул иштеп чыгуу убактысын текке кетирүү жана керексиз кодду толтуруу. Бир нече негизги кадр аныктамасы талаптар өзгөргөндө жаңыртыла турган бир нече жерди билдирет. Өчүрүүчү анимацияңыздын убакытын тууралоо керекпи? Сиз код базаңыздагы ар бир мисалды издешиңиз керек болот. Жеңилдетүүчү функцияларды стандартташтыргыңыз келеби? Бардык вариацияларды табууга ийгилик. Тейлөө пункттарынын мындай көбөйүшү жөнөкөй анимация жаңыртууларын да көп убакытты талап кылат. Чоң көйгөй Бул негизги кадрлардын кайталанышы жер астындагы бир топ тымызын көйгөйдү жаратат: глобалдык масштабдын тузагы. Компоненттерге негизделген архитектуралар менен иштегенде да, CSS ачкыч кадрлары ар дайым глобалдык масштабда аныкталат. Бул бардык негизги кадрлар бардык компоненттерге тиешелүү дегенди билдирет. Ар дайым. Ооба, анимацияңыз сөзсүз түрдө компонентиңизде аныктаган негизги кадрларды колдонбойт. Ал глобалдык масштабга жүктөлгөн ошол эле атка дал келген акыркы негизги кадрларды колдонот. Бардык ачкыч кадрларыңыз бирдей болсо, бул кичинекей маселедей сезилиши мүмкүн. Бирок сиз анимацияны белгилүү бир колдонуу учуру үчүн ыңгайлаштыргыңыз келген учурда, сиз кыйынчылыкка туш болосуз, же андан да жаманы, аларды жаратуучу сиз болосуз. Же сиздин анимацияңыз иштебейт, анткени сизден кийин жүктөлгөн башка компонент негизги кадрларыңыздын үстүнөн жазылат, же сиздин компонентиңиз акыркы жолу жүктөлөт жана ошол негизги кадрдын атын колдонуп, ар бир башка компоненттин анимация жүрүм-турумун кокустан өзгөртөт жана сиз аны байкабай калышыңыз мүмкүн. Бул жерде көйгөйдү көрсөткөн жөнөкөй мисал: .component-one { /* компонент стилдери */ анимация: импульс 1s жеңилдиктин чексиз кезектегиси; }
/* бул @keyframes аныктамасы иштебейт */ @keyframes пульс { тартып { масштаб: 1; } үчүн { шкала: 1.1; } }
/* кийинчерээк коддо... */
.component-эки { /* компонент стилдери */ анимация: импульс 1s жеңилдик-чыгуу чексиз; }
/* бул негизги кадрлар эки компонентке тең колдонулат */ @keyframes пульс { 0%, 20%, 100% { масштаб: 1; } 10%, 40% { шкала: 1.2; } }
Эки компонент тең бирдей анимация атын колдонушат, бирок экинчи @keyframes аныктамасы биринчисинин үстүнөн жазат. Эми бир компонент-экинчи компонент да, кайсы компонент кайсы негизги кадрларды аныктаганына карабастан, экинчи ачкыч кадрларды колдонушат. Калемдин негизги кадрларынын Токендерин караңыз - Амит Шин тарабынан жасалган Демо 1 [айрыктары]. Эң жаман бөлүгү? Бул көбүнчө жергиликтүү өнүгүүдө эң сонун иштейт, бирок куруу процесстери стилдер жадыбалыңыздын жүктөө тартибин өзгөрткөндө өндүрүштө сырдуу түрдө бузулат. Кайсы компоненттер жүктөлгөнүнө жана кандай ырааттуулукка жараша ар кандай кыймылдаган анимациялар менен аяктайсыз. Чечим: Бирдиктүү негизги кадрлар Бул башаламандыкка жооп таң калыштуу жөнөкөй: жалпы стилдер жадыбалында сакталган алдын ала аныкталган динамикалык негизги кадрлар. Ар бир компонентке өзүнүн анимациясын аныктоого уруксат берүүнүн ордуна, биз жакшы документтештирилген, оңой болгон борборлоштурулган негизги кадрларды түзөбүз.колдонуу, тейлөө жана долбооруңуздун өзгөчө муктаждыктарына ылайыкташтырылган. Аны негизги кадрлардын энбелгилери катары ойлоп көрүңүз. Биз токендерди түстөр жана аралыктар үчүн колдонсок, жана көбүбүз анимация касиеттери үчүн, мисалы, узактык жана жеңилдетүү функциялары үчүн токендерди колдонгон сыяктуу, эмне үчүн негизги кадрлар үчүн да токендерди колдонбойт? Бул ыкма кичинекей көйгөйдү (кодду кайталоо) жана чоңураак көйгөйдү (глобалдык масштабдагы чыр-чатактар) бир эле учурда чечип жатканда, сиз колдонуп жаткан учурдагы дизайн токенинин иштөө процесси менен табигый түрдө интеграцияланышы мүмкүн. Идея жөнөкөй: бардык жалпы анимацияларыбыз үчүн чындыктын бирдиктүү булагын түзүү. Бул жалпы стилдер жадыбалында биздин долбоор чындыгында колдонгон анимация үлгүлөрүн камтыган кылдат иштелип чыккан негизги кадрлар бар. Өчүрүлгөн анимация биздин код базасында мурунтан эле бар же жокпу, мындан ары божомолдоого болбойт. Башка компоненттерден анимацияларды кокустан кайра жазуу болбойт. Бирок бул жерде ачкыч: бул жөн гана статикалык көчүрүү жана чаптоо анимациялары эмес. Алар CSS ыңгайлаштырылган касиеттери аркылуу динамикалуу жана ыңгайлаштырылуучу болуп иштелип чыккан, бул бизге ырааттуулукту сактоого мүмкүндүк берет, ошол эле учурда анимацияларды белгилүү бир колдонуу учурларына ыңгайлаштыруу ийкемдүүлүгү бар, мисалы, бир жерде бир аз чоңураак "импульс" анимация керек болсо. Биринчи ачкыч кадрды түзүү Биз чечишибиз керек болгон биринчи аз илинип турган жемиштердин бири - бул "өчкөн" анимация. Менин акыркы долбоорлорумдун биринде мен ондон ашык өзүнчө өчүп калган аныктамаларды таптым, ооба, алардын баары жөн эле 0дөн 1ге чейин тунуктукту жандандырышкан. Келгиле, жаңы стилдер жадыбалын түзүп, аны kf-tokens.css деп атайлы, аны биздин долбоорго импорттойлу жана анын ичинде туура комментарийлер менен негизги кадрларыбызды жайгаштыралы. /* keyframes-tokens.css */
/* * Fade In - кирүү анимациясын өчүрүү * Колдонуу: анимация: kf-fade-in 0,3s жеңилдетүү; */ @keyframes kf-fade-in { тартып { тунуктук: 0; } үчүн { тунуктук: 1; } }
Бул жалгыз @keyframes декларациясы биздин код базасындагы бардык чачыранды анимацияларды алмаштырат. Таза, жөнөкөй жана дүйнөлүк масштабда колдонулушу мүмкүн. Эми биз бул белгини аныктагандан кийин, биз аны долбоордун бардык компонентинен колдоно алабыз: .modal { анимация: kf-fade-in 0,3s жеңилдетүү; }
.tooltip { анимация: kf-fade-in 0,2s жеңил-кирүү; }
.билдирүү { анимация: kf-fade-in 0,5s жеңилдетүү; }
Калемдин негизги кадрларынын Токендерин караңыз - Демо 2 [айрылуу] Амит Шин тарабынан. Эскертүү: Биз бардык @keyframes аталыштарыбызда kf- префиксин колдонуп жатабыз. Бул префикс аттар мейкиндиги катары кызмат кылат, ал долбоордогу анимациялар менен атоо конфликттерине жол бербейт жана бул негизги кадрлар биздин негизги кадрлардын энбелгилеринин файлынан келгенин дароо айкын кылат. Динамикалык слайд жасоо kf-fade-in ачкыч кадрлары сонун иштейт, анткени ал жөнөкөй жана баш аламандык кылууга орун аз. Башка анимацияларда биз бир топ динамикалуу болушубуз керек жана бул жерде биз CSS ыңгайлаштырылган касиеттеринин эбегейсиз зор күчүн колдоно алабыз. Бул жерде чачыранды статикалык анимацияларга салыштырмалуу негизги кадрлардын энбелгилери чындап жаркырап турат. Келгиле, жалпы сценарийди алалы: "слайд" анимациялары. Бирок кайдан тайып? оңдон 100px? 50% солдон? Ал экрандын өйдө жагынан кириши керекпи? Же, балким, түбүнөн калкып? Мүмкүнчүлүктөр абдан көп, бирок ар бир багыт жана ар бир вариация үчүн өзүнчө негизги кадрларды түзүүнүн ордуна, биз бардык сценарийлерге ылайыкташкан бир ийкемдүү белги кура алабыз: /* * Slide In - багыттуу слайд анимациясы * Багытын көзөмөлдөө үчүн --kf-slide-f колдонуңуз * Демейки: солдон жылыйт (-100%) * Колдонуу: * анимация: kf-slide-in 0,3s жеңил чыгуу; * --kf-slide-from: -100px 0; // солдон жылдыруу * --kf-slide-from: 100px 0; // оңдон жылдыруу * --kf-slide-from: 0 -50px; // өйдөдөн жылдыруу */
@keyframes kf-slide-in { тартып { translate: var(--kf-slide-from, -100% 0); } үчүн { которуу: 0 0; } }
Эми биз бул жалгыз @keyframes энбелгисин --kf-slide-from ыңгайлаштырылган касиетин өзгөртүү менен каалаган слайд багыты үчүн колдоно алабыз: .каптал тилкеси { анимация: kf-slide-in 0.3s жеңил-чыгуусу; /* Демейки маанини колдонот: солдон слайддар */ }
.билдирүү { анимация: kf-slide-in 0,4s жеңилдетилген; --kf-slide-from: 0 -50px; /* өйдөдөн жылдыруу */ }
.modal { анимация: 0,5 секунданын ичинде kf өчүп, kf-slide-in 0,5s куб-безиер(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* ылдыйдан оңдон жылдыруу */ }
Бул ыкма ырааттуулукту сактоо менен бизге укмуштуу ийкемдүүлүктү берет. Бир негизги кадрдык декларация, чексиз мүмкүнчүлүктөр. Калемдин негизги кадрларынын Токендерин караңыз - Демо 3 [айрылуу] Амит Шин тарабынан. Жана эгер биз анимацияларыбызды дагы ийкемдүү кылгыбыз келсе, ошондой эле "сырылып чыгуу" эффекттерине мүмкүндүк бере алабыз.жөн гана кийинки бөлүмдө көрө турган нерсеге окшош --kf-slide-to ыңгайлаштырылган касиетти кошуңуз. Эки багыттуу масштабдуу негизги кадрлар Долбоорлор боюнча кайталануучу дагы бир кеңири таралган анимация бул "кичирейтүү" эффекттери. Бул тост билдирүүлөрү үчүн тымызын масштабды чоңойтуу болобу, модальдарды чоңойтуубу же рубрикаларды жумшак масштабдоо эффектиси болобу, масштабдуу анимациялар бардык жерде. Ар бир шкала мааниси үчүн өзүнчө ачкыч кадрларды түзүүнүн ордуна, келгиле, kf-кичирейтүү негизги кадрларынын бир ийкемдүү топтомун түзөлү:
/* * Zoom - масштабдуу анимация * Масштаб маанилерин көзөмөлдөө үчүн --kf-zoom-from жана --kf-zoom-to колдонуңуз * Демейки: 80%дан 100%ке чейин чоңойт (0,8ден 1ге чейин) * Колдонуу: * анимация: kf-кичирейтүү 0,2 сек жеңилдетүү; * --kf-zoom-from: 0,5; --kf-zoom-to: 1; // 50%дан 100%ке чейин чоңойтуу * --kf-zoom-from: 1; --kf-zoom-to: 0; // 100% дан 0% чейин чоңойтуу * --kf-zoom-from: 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-кичирейтүү 0,4с жеңилдетүү; --kf-slide-from: 0 100%; /* өйдөдөн жылдыруу */ /* Демейки масштабды колдонот: 80%дан 100%га чейин масштабдуу */ }
.modal { анимация: kf-zoom 0,3s куб-безиер(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0; /* 0%дан 100%га чейин чоңойтуу */ }
.башкы { анимация: kf-2с ичинде өчүп, kf-zoom 2s оңой кирүү; --kf-zoom-from: 1.2; --kf-zoom-to: 0,8; /* акырын төмөндөтүү */ }
Демейки 0,8 (80%) тост билдирүүлөрү жана карталар сыяктуу көпчүлүк UI элементтери үчүн эң сонун иштейт, ошол эле учурда өзгөчө учурларга ыңгайлаштыруу оңой. Калемдин негизги кадрларынын Токендерин караңыз - Демо 4 [айрылуу] Амит Шин тарабынан. Акыркы мисалдардан кызыктуу нерсени байкаган чыгарсыз: биз анимацияларды бириктирип жатабыз. @keyframes энбелгилери менен иштөөнүн негизги артыкчылыктарынын бири, алар бири-бири менен кемчиликсиз интеграциялоо үчүн иштелип чыккан. Бул жылмакай курамы кокусунан эмес, атайылап жасалган. Анимация композициясын кийинчерээк кеңири талкуулайбыз, анын ичинде алар кайсы жерде көйгөйлүү болуп калышы мүмкүн, бирок көпчүлүк айкалыштар түз жана ишке ашыруу оңой. Эскертүү: Бул макаланы жазып жатып, балким, аны жазгандыктан, мен кирүү анимацияларынын идеясын кайра ойлонуп көрдүм. CSSтин бардык акыркы жетишкендиктери менен, бизге дагы эле керекпи? Бактыга жараша, Адам Аргайл ошол эле суроолорду изилдеп, аларды өзүнүн блогунда эң сонун билдирген. Бул жерде жазылгандарга карама-каршы келбейт, бирок бул, айрыкча, сиздин долбоорлоруңуз кире бериш анимацияларына таянса, эске алууга арзырлык ыкманы көрсөтөт. Үзгүлтүксүз анимациялар Кирүү анимациялары, мисалы, "өчүрүү", "слайд" жана "кичирейтүү" бир жолу болуп, анан токтоп турганда, үзгүлтүксүз анимациялар көңүл буруу же жүрүп жаткан иш-аракетти көрсөтүү үчүн чексиз циклде болот. Мен жолуккан эң кеңири тараган эки үзгүлтүксүз анимация - бул "айлануу" (индикаторлорду жүктөө үчүн) жана "импульс" (маанилүү элементтерди бөлүп көрсөтүү үчүн). Бул анимациялар негизги кадрлардын белгилерин түзүүгө келгенде уникалдуу кыйынчылыктарды жаратат. Демейде бир абалдан экинчисине өтүүчү кирүү анимацияларынан айырмаланып, үзгүлтүксүз анимациялар жүрүм-турум үлгүлөрүндө абдан ыңгайлаштырылган болушу керек. The Spin Doctor Ар бир долбоор бир нече айланма анимацияларды колдонот окшойт. Кээ бирлери саат жебеси боюнча, башкалары саат жебесине каршы. Кээ бирлери бир 360 градуска айланса, башкалары тезирээк эффект үчүн бир нече айланышат. Ар бир вариация үчүн өзүнчө ачкыч кадрларды түзүүнүн ордуна, келгиле, бардык сценарийлерди чечүүчү бир ийкемдүү спинди түзөлү:
/* * Spin - айлануу анимациясы * Айлануу диапазонун көзөмөлдөө үчүн --kf-spin-f жана --kf-spin-to колдонуңуз * Айлануу көлөмүн көзөмөлдөө үчүн --kf-spin-turns колдонуңуз * Демейки: 0 градустан 360 градуска чейин айланат (1 толук айлануу) * Колдонуу: * анимация: kf-spin 1s сызыктуу чексиз; * --kf-spin-turns: 2; // 2 толук айлануу * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // жарым айлануу * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // саат жебесине каршы */
@keyframes kf-spin { тартып { rotate: 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 сызыктуу чексиз; /* Демейки режимди колдонот: 0 градустан 360 градуска чейин айланат */ }
.fast-loader { анимация: kf-spin 1.2s жеңилдиктин чексиз кезектегиси; --kf-spin-turns: 3; /* Ар бир цикл үчүн 3 толук айлануу*/ }
.steped-reverse { анимация: kf-spin 1,5с кадамдар (8) чексиз; --kf-spin-to: -360deg; /* саат жебесине каршы */ }
.subtle-wiggle { анимация: kf-spin 2s жеңил-жылы чексиз кезектеги; --kf-spin-from: -16deg; --kf-spin-to: 32deg; /* термелүү 36 градус: -18 градустан +18 градуска чейин */ }
Калемдин негизги кадрларынын Токендерин караңыз - Амит Шин тарабынан жасалган демо 5 [айрыктары]. Бул ыкманын кооздугу ошол эле негизги кадрлар спиннерлерди жүктөө, айлануучу иконалар, кыймылдаткыч эффекттер жана ал тургай татаал көп айланма анимациялар үчүн иштейт. Pulse Paradox Импульстук анимациялар татаалыраак, анткени алар ар кандай касиеттерди "импульс" кыла алат. Кээ бирлери масштабды импульсациялайт, башкалары тунуктукту импульсациялайт, кээ бирлери жарыктык же каныккандык сыяктуу түс касиеттерин импульсациялайт. Ар бир мүлк үчүн өзүнчө ачкыч кадрларды түзүүнүн ордуна, биз каалаган CSS касиети менен иштеген негизги кадрларды түзө алабыз. Бул жерде масштаб жана тунуктук параметрлери бар импульстук негизги кадрдын мисалы келтирилген:
/* * Импульс - импульстук анимация * Масштаб диапазонун көзөмөлдөө үчүн --kf-pulse-scale-f жана --kf-pulse-scale-to колдонуңуз * Тунук эместик диапазонун көзөмөлдөө үчүн --kf-pulse-opacity-from жана --kf-pulse-opacity-to колдонуңуз * Демейки: импульс жок (бардык маанилер 1) * Колдонуу: * анимация: kf-pulse 2s жеңил-ин-чыгуучу чексиз кезектеги; * --kf-pulse-scale-from: 0,95; --kf-pulse-scale-to: 1.05; // масштабдуу импульс * --kf-pulse-opacity-from: 0,7; --kf-pulse-opacity-to: 1; // тунуктук импульс */
@keyframes kf-pulse { тартып { scale: var(--kf-pulse-scale-from, 1); бүдөмүк: var(--kf-pulse-opacity-from, 1); } үчүн { scale: var(--kf-pulse-scale-to, 1); бүдөмүк: var(--kf-pulse-opacity-to, 1); } }
Бул бир нече касиеттерди жандандыра турган ийкемдүү импульсту жаратат: .аракетке чакыруу { анимация: kf-импульс 0,6с чексиз кезектеги; --kf-pulse-opacity-from: 0,5; /* тунуктук импульс */ }
.notification-dot { анимация: kf-импульс 0,6с жеңилдиктин чексиз кезектегиси; --kf-pulse-scale-from: 0,9; --kf-pulse-scale-to: 1.1; /* масштабдуу импульс */ }
.text-highlight { анимация: kf-pulse 1.5s жеңил чыгуу чексиз; --kf-pulse-scale-from: 0,8; --kf-pulse-opacity-from: 0,2; /* масштаб жана тунуктук импульс */ }
Калемдин негизги кадрларынын Токендерин караңыз - Амит Шин тарабынан Demo 6 [айрыкча]. Бул жалгыз kf-импульс ачкыч кадры ыңгайлаштыруу оңой болсо да, кылдаттык менен көңүл буруудан тартып, укмуштуудай урунттуу учурларга чейин баарын чече алат. Advanced Easing Негизги кадрлардын энбелгилерин колдонуунун эң сонун нерселердин бири – анимация китепканасын кеңейтүү жана көпчүлүк иштеп чыгуучулар нөлдөн баштап жазууга убара болбой турган, ийкемдүү же секирүү сыяктуу эффекттерди берүү канчалык оңой. Бул жерде секирүү бийиктигин көзөмөлдөө үчүн --kf-bounce-from ыңгайлаштырылган касиетин колдонгон жөнөкөй "секирүү" негизги кадрлар белгисинин мисалы келтирилген. /* * Bounce - секирип кире турган анимация * Секирүү бийиктигин көзөмөлдөө үчүн --kf-bounce-f'ду колдонуңуз * Демейки: 100vhтан секирүү (экранды өчүрүү) * Колдонуу: * анимация: kf-bounce 3s жеңилдик; * --kf-bounce-from: 200px; // 200px бийиктиктен секирүү */
@keyframes kf-bounce { 0% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { которуу: 0 0; animation-timeing-функциясы: жеңилдетүү; } }
"Эластик" сыяктуу анимациялар негизги кадрлардын ичиндеги эсептөөлөрдөн улам бир аз татаалыраак. Биз --kf-elastic-from-X жана --kf-elastic-from-Y-ди өз-өзүнчө аныкташыбыз керек (экөө тең милдеттүү эмес) жана алар чогуу экрандын каалаган чекитинен ийкемдүү кирүүнү түзүүгө мүмкүндүк берет.
/* * Elastic In - ийкемдүү кириш анимациясы * Баштоо абалын көзөмөлдөө үчүн --kf-elastic-from-X жана --kf-elastic-from-Y колдонуңуз * Демейки: жогорку борбордон кирет (0, -100vh) * Колдонуу: * анимация: kf-elastic-in 2s оңой-in-out экөөнү тең; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // кириңиз (-50px, -200px) */
@keyframes kf-elastic-in { 0% { translate: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { translate: 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% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { translate: calc(var(--kf-elastic-from-X, -50vw) * 0.0164) calc(var(--kf-elastic-from-Y, 0px) * 0.0164); }
73% { translate: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { translate: 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-from: 0; }
.bounce-and-slide { анимация-композиция: кошуу; /* Эки анимация тең которууну колдонот */ анимация: kf-bounce 3s жеңилдик, kf-slide-in 3s жеңил чыгуу; --kf-slide-from: -200px; }
.elastic-in { анимация: kf-elastic-in 2s жеңил-кирүү экөөнү тең; }
Калемдин негизги кадрларынын Токендерин караңыз - Демо 7 [айрылуу] Амит Шин тарабынан. Ушул учурга чейин биз ачкыч кадрларды кантип акылдуу жана натыйжалуу консолидациялоого болорун көрдүк. Албетте, сиз долбоордун муктаждыктарына ылайыктуураак нерселерди өзгөрткүңүз келиши мүмкүн, бирок биз бир нече жалпы анимациялардын жана күнүмдүк колдонуу учурларынын мисалдарын карап чыктык. Жана бул негизги кадрлардын энбелгилери менен бизде азыр бүткүл долбоор боюнча ырааттуу, колдоого алынуучу анимацияларды түзүү үчүн күчтүү курулуш блоктору бар. Кайталануучу негизги кадрлар, глобалдык масштабдагы чыр-чатактар болбойт. Биздин бардык анимация муктаждыктарыбызды чечүүнүн таза, ыңгайлуу жолу. Бирок чыныгы суроо: бул курулуш блокторун кантип чогуу түзөбүз? Баарын бириктирүү Негизги негизги кадрларды айкалыштыруу жөнөкөй экенин көрдүк. Бизге өзгөчө эч нерсе керек эмес, бирок биринчи анимацияны аныктоо, экинчисин аныктоо, өзгөрмөлөрдү зарылчылыкка жараша коюу жана ушуну менен бүттү. /* Өнүгүү + жылышуу */ .тост { анимация: 0,4 сек. ичинде kf-өчүрүү, kf-slide-in 0,4s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Чоңойтуу + кичирейтүү */ .modal { анимация: 0,3 сек ичинде kf өчүп, kf-zoom 0,3s куб-безьер(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0,7; --kf-zoom-to: 1; }
/* Жылдыруу + импульс */ .билдирүү { анимация: kf-слайд 0,5сек, kf-pulse 1.2s жеңилдиктин чексиз кезектегиси; --kf-slide-from: -100px 0; --kf-pulse-scale-from: 0,95; --kf-pulse-scale-to: 1.05; }
Бул комбинациялар сонун иштейт, анткени ар бир анимация башка касиетке багытталган: тунуктук, трансформация (которуу/масштаб) ж.б. Бирок кээде чыр-чатактар болот жана биз алар менен эмне үчүн жана кантип күрөшүү керектигин билишибиз керек. Эки анимация бир эле касиетти жандантууга аракет кылганда, мисалы, экөө тең жандуу масштабда же экөө тең жандуу тунук эмес - натыйжа сиз күткөндөй болбойт. Демейки боюнча, анимациялардын бири гана анимациялар тизмесинде акыркысы болгон ошол касиетке колдонулат. Бул CSS бир эле менчикте бир нече анимацияларды иштетүүнүн чектөөсү. Мисалы, бул ойдогудай иштебейт, анткени kf-импульс анимациясы гана колдонулат. .bad-combo { анимация: kf-кичирейтүү 0,5с алдыга, kf-pulse 1.2s чексиз кезектеги; --kf-zoom-from: 0,5; --kf-zoom-to: 1.2; --kf-pulse-scale-from: 0,8; --kf-pulse-scale-to: 1.1; }
Animation кошуу Бир эле касиетке таасир этүүчү бир нече анимацияларды башкаруунун эң жөнөкөй жана түз жолу - анимация-композиция касиетин колдонуу. Жогорудагы акыркы мисалда, kf-импульс анимациясы kf-кичирейтүү анимациясын алмаштырат, ошондуктан биз баштапкы масштабды көрбөйбүз жана күтүлгөн масштабды 1,2ге чейин албайбыз. Кошуу үчүн анимация-композицияны коюу менен, биз браузерге эки анимацияны тең айкалыштырууну айтабыз. Бул биз каалаган натыйжаны берет. .component-эки { анимация-композиция: кошуу; }
Калемдин негизги кадрларынын Токендерин караңыз - Демо 8 [айрылуу] Амит Шин тарабынан. Бул ыкма биз бир эле касиетке эффекттерди бириктиргибиз келген көпчүлүк учурларда жакшы иштейт. Анимацияларды статикалык касиет баалуулуктары менен айкалыштыруу керек болгондо да пайдалуу. Мисалы, эгер бизде translate касиетин колдонгон элемент болсо, аны так биз каалаган жерге жайгаштырсак, анан биз аны kf-slide-in ачкыч кадрлары менен жандандыргыбыз келсе, анимация-композициясы жок эле жаман көрүнгөн секирик алабыз. Калемдин негизги кадрларынын Токендерин караңыз - Амит Шин тарабынан жасалган демо 9 [айрыктары]. Кошууга коюлган анимация-композиция менен анимация учурдагы менен жылмакай айкалышатөзгөртүү, ошондуктан элемент ордунда калып, күтүлгөндөй жанданат. Animation Stagger Бир нече анимацияларды иштетүүнүн дагы бир жолу - аларды "таңдоого" - башкача айтканда, биринчиси аяктагандан кийин экинчи анимацияны бир аз баштоо. Бул ар бир учурда иштей турган чечим эмес, бирок бизде кирүү анимациясынан кийин үзгүлтүксүз анимация болгондо пайдалуу. /* өчүп калуу + тунуктук импульс */ .билдирүү { анимация: kf-fade-in 2s жеңил чыгуу, kf-импульс 0,5с 2с жеңилдиктин чексиз кезектеги; --kf-pulse-opacity-to: 0,5; }
Калемдин негизги кадрларынын Токендерин караңыз - Амит Шин тарабынан жасалган демо 10 [айрыктары]. Тартип маселеси Биз иштеген анимациялардын чоң бөлүгү трансформация касиетин колдонушат. Көпчүлүк учурларда, бул жөн гана ыңгайлуу болуп саналат. Ошондой эле анын аткаруу артыкчылыгы бар, анткени трансформация анимациялары GPU тездетилиши мүмкүн. Бирок, эгерде биз трансформацияларды колдонсок, анда биз өзгөртүүлөрүбүздү кандай тартипте аткарганыбыз маанилүү экенин кабыл алышыбыз керек. көп. Буга чейин биздин негизги кадрларыбызда жеке трансформацияларды колдондук. Өзгөчөлүккө ылайык, алар ар дайым белгиленген тартипте колдонулат: биринчиден, элемент которулат, андан кийин айланат, андан кийин масштабдалат. Бул акылга сыярлык жана көбүбүз күткөн нерсе. Бирок, трансформация касиетин колдонсок, функциялардын жазылуу тартиби алардын колдонулуш тартиби болуп саналат. Мында бир нерсени X огу боюнча 100 пиксельге жылдырып, анан 45 градуска айлантсак, адегенде аны 45 градуска айлантып, андан кийин 100 пиксельге жылдырганга барабар эмес. /* Кызгылт төрт бурчтуу: адегенде котор, анан айлант */ .мисалы-бир { transform: translateX(100px) rotate(45deg); }
/* Жашыл квадрат: адегенде айлантыңыз, анан которуңуз */ .мисалы-эки { transform: rotate(45deg) translateX(100px); }
Калемдин негизги кадрларынын Токендерин караңыз - Амит Шин тарабынан жасалган демо 11 [айрыктары]. Бирок трансформация тартибине ылайык, бардык жеке трансформациялар - биз ачкыч кадрлар үчүн колдонгон бардык нерсе - трансформация функцияларына чейин болот. Бул трансформация касиетине орноткон нерсеңиз анимациялардан кийин болот дегенди билдирет. Бирок, мисалы, kf-spin ачкыч кадрлары менен бирге которууну орнотсоңуз, которуу анимациядан мурун ишке ашат. Дагы эле баш аламанбы?! Бул статикалык маанилер бир эле анимация үчүн ар кандай натыйжаларды алып келиши мүмкүн болгон жагдайларга алып келет, мисалы, төмөнкүдөй:
/* Эки спиннер үчүн жалпы анимация */ .spinner { анимация: kf-spin 1s сызыктуу чексиз; }
/* Pink spinner: айлантуудан мурун которуу (жеке трансформация) */ .spinner-pink { которуу: 100% 50%; }
/* Жашыл спиннер: айлантып анан которуу (функциянын тартиби) */ .spinner-жашыл { трансформация: которуу (100%, 50%); }
Калемдин негизги кадрларынын Токендерин караңыз - Демо 12 [айрылуу] Амит Шин тарабынан. Сиз биринчи спиннер (кызгылт) kf-спиндин айлануусунан мурун болгон котормо алаарын көрүп турасыз, ошондуктан ал алгач өз ордуна жылып, анан айланат. Экинчи спиннер (жашыл) translate() функциясын алат, ал жеке трансформациядан кийин ишке ашат, андыктан элемент адегенде айланат, андан кийин өзүнүн учурдагы бурчуна салыштырмалуу кыймылдайт жана биз ошол кең орбиталык эффектти алабыз. Жок, бул ката эмес. Бул бир нече анимациялар же бир нече трансформациялар менен иштөөдө CSS жөнүндө билишибиз керек болгон нерселердин бири гана. Керек болсо, rotate() функциясын колдонуп элементтерди айлантуучу kf-spin-alt негизги кадрлардын кошумча топтомун түзө аласыз. Кыскартылган кыймыл Биз альтернативалуу негизги кадрлар жөнүндө сөз кылып жатканыбызда, биз "анимация жок" опциясын этибарга албай коё албайбыз. Негизги кадрлардын энбелгилерин колдонуунун эң чоң артыкчылыктарынын бири - бул жеткиликтүүлүктү бышыруу мүмкүн жана аны жасоо чынында оңой. Негизги кадрларыбызды жеткиликтүүлүгүн эске алуу менен долбоорлоо менен, биз кыймылды азайткан колдонуучуларга кошумча жумушсуз же кодду кайталоосуз жылмакай, алагды кылбаган тажрыйбага ээ болушун камсыздай алабыз. "Кыскартылган кыймылдын" так мааниси бир анимациядан экинчисине жана долбоордон долбоорго бир аз өзгөрүшү мүмкүн, бирок бул жерде бир нече маанилүү ойлорду эске алуу керек: Негизги кадрлардын үнүн өчүрүү Кээ бир анимацияларды жумшартууга же жайлатууга болот, ал эми кыймылды азайтуу талап кылынганда, башкалары толугу менен жок болушу керек. Пульстук анимациялар жакшы мисал. Бул анимациялар кыскартылган кыймыл режиминде иштебей турганына ынануу үчүн, аларды жөн гана тиешелүү медиа суроосуна ороп алсак болот.
@media (prefers-reduced-motion: no-prefer) { @keyfrmaes kf-pulse { тартып { scale: var(--kf-pulse-scale-from, 1); бүдөмүк: var(--kf-pulse-opacity-from, 1); } үчүн { scale: var(--kf-pulse-scale-to, 1); тунуктук:var(--kf-pulse-opacity-to, 1); } } }
Бул төмөндөтүү үчүн преференцияларды азайткан кыймылды койгон колдонуучулар анимацияны көрбөшүн жана алардын каалоосуна дал келген тажрыйбага ээ болушун камсыздайт. Instant In Кирүү анимациялары сыяктуу биз жөн эле алып сала албай турган кээ бир негизги кадрлар бар. Маани өзгөрүшү керек, жандуу болушу керек; антпесе, элемент туура маанилерге ээ болбойт. Бирок кыскартылган кыймылда, баштапкы мааниден бул өтүү заматта болушу керек. Буга жетүү үчүн, биз мааниси дароо акыркы абалга секирип турган кошумча ачкыч кадрлардын топтомун аныктайбыз. Булар биздин демейки негизги кадрларыбыз болуп калышат. Андан кийин, мурунку мисалдагыдай, артыкчылыктуу-кичирейтүү кыймылы үчүн медиа сурамынын ичине кадимки ачкыч кадрларды кошобуз. /* кыймылды азайтуу үчүн заматта кириңиз */ @keyframes kf-zoom { баштап, { шкала: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-prefer) { /* Түпнуска масштабдагы негизги кадрлар */ @keyframes kf-zoom { тартып { шкала: var(--kf-zoom-from, 0,8); } үчүн { шкала: var(--kf-zoom-to, 1); } } }
Ошентип, кыскартылган кыймылды жактырган колдонуучулар элементтин дароо акыркы абалында пайда болушун көрүшөт, ал эми калгандары анимацияланган өтүүнү алышат. Жумшак мамиле Биз кандайдыр бир кыймылды сактап калгыбыз келген учурлар бар, бирок баштапкы анимацияга караганда бир топ жумшак жана тынчыраак. Мисалы, биз секирүү кире беришин жумшак өңү менен алмаштыра алабыз.
@keyframes kf-bounce { /* Кыймылды азайтуу үчүн жумшак өчүп калуу */ }
@media (prefers-reduced-motion: no-prefer) { @keyframes kf-bounce { /* Баштапкы секирүү негизги кадрлар */ } }
Эми кыймылды азайткан колдонуучулар дагы эле сырткы көрүнүштү сезишет, бирок секирүү же ийкемдүү анимациянын күчтүү кыймылы жок. Курулуш блоктору менен, кийинки суроо аларды кантип иш жүзүндөгү иш процессинин бир бөлүгү кылуу керек. Ийкемдүү негизги кадрларды жазуу бир нерсе, бирок аларды чоң долбоордо ишенимдүү кылуу үчүн мен кыйын жолду үйрөнүшүм керек болгон бир нече стратегияларды талап кылат. Ишке ашыруу стратегиялары жана мыкты тажрыйбалар Бизде негизги кадрлардын токендеринин бекем китепканасы болгондон кийин, аларды кантип күнүмдүк ишке киргизүү керек.
Азгырык - бардык негизги кадрларды бир эле учурда таштап, маселенин чечилгенин жарыялоо, бирок иш жүзүндө мен эң жакшы натыйжаларды акырындык менен кабыл алуу келерин байкадым. Өнүгүү же слайд сыяктуу эң кеңири таралган анимациялардан баштаңыз. Бул чоң кайра жазууларды талап кылбастан, дароо баасын көрсөткөн жеңил жеңиштер. Аталышы - көңүл бурууга арзырлык дагы бир жагдай. Ырааттуу префикс же аттар мейкиндиги кайсы анимациялар токендер жана кайсынысы жергиликтүү бир жолкулар экенин ачык көрсөтөт. Ал ошондой эле кокустан кагылышуулардын алдын алат жана команданын жаңы мүчөлөрүнө жалпы системаны бир карап таанууга жардам берет. Документтөө коддун өзү сыяктуу эле маанилүү. Ар бир ачкыч кадрдын үстүндөгү кыска комментарий да кийинчерээк болжолдоодон бир нече саат үнөмдөөгө жардам берет. Иштеп чыгуучу токендер файлын ачып, керектүү эффектти сканерлеп, колдонуу үлгүсүн түз эле алардын компонентине көчүрө алышы керек. Ийкемдүүлүк бул ыкманы аракетке татыктуу кылат. Эстүү ыңгайлаштырылган касиеттерди ачып берүү менен, биз командаларга системаны бузбастан анимацияны ыңгайлаштыруу үчүн орун беребиз. Ошол эле учурда ашыкча татаалдаштырбаганга аракет кылыңыз. Маанилүү баскычтарды бериңиз жана калганын пикириңизди сактаңыз. Акырында, жеткиликтүүлүктү унутпаңыз. Ар бир анимацияга кыскартылган кыймыл альтернатива керек эмес, бирок көбү керек. Бул тууралоолорду эртерээк бышыруу биз аларды кийинчерээк жаңыртпашыбыз керек дегенди билдирет жана бул биздин колдонуучулар эч качан эскертпесе дагы, байкай турган камкордуктун деңгээлин көрсөтөт.
Менин тажрыйбам боюнча, негизги кадр токендерин биздин дизайн токендеринин иштөө процессинин бир бөлүгү катары кароо аларды жабыштырып турат. Алар орнотулгандан кийин, алар өзгөчө эффекттерди сезүүнү токтотуп, дизайн тилинин бир бөлүгү болуп калышат, буюмдун кыймылынын жана жооп кайтаруунун табигый узартылышы. Орнотуу Анимациялар интерфейстерди куруунун эң кубанычтуу бөлүктөрүнүн бири болушу мүмкүн, бирок түзүмү жок болсо да, алар нааразычылыктын эң чоң булактарынын бири болуп калышы мүмкүн. Негизги кадрларды энбелгилер катары кароо менен сиз адатта башаламан жана башкаруу кыйын болгон нерсени алып, аны так, алдын ала айтууга боло турган системага айландырасыз. Чыныгы маани коддун бир нече саптарын сактоодо гана эмес. Өчүрүүнү, жылдырууну, чоңойтууну же айлантууну колдонгондо, сиз анын долбоор боюнча кандай иш кыларын так билесиз. Бул чексиз вариациялардын башаламандыгы жок ыңгайлаштырылган касиеттерден келген ийкемдүүлүктө. Жана ал кошумча катары эмес, пайдубалга орнотулган жеткиликтүүлүктөкийинки ой. Мен бул идеялардын ар кандай командаларда жана ар кандай коддук базаларда иштегенин көрдүм жана үлгү дайыма бирдей. Токендер орнотулгандан кийин, негизги кадрлар трюктардын чачыранды жыйнагы болууну токтотуп, дизайн тилинин бир бөлүгү болуп калат. Алар буюмду көбүрөөк максаттуу, ырааттуураак жана жандуураак сезет. Эгер сиз бул макаладан бир нерсени алсаңыз, анда ал мындай болсун: анимациялар биз түстөр, типография жана аралыктарга берген камкордукка жана түзүлүшкө татыктуу. Негизги кадрларга болгон кичинекей инвестиция сиздин интерфейсиңиз жылган сайын өзүн актайт.
