Мынаны елестетіңіз: сіз жаңа жобаға қосылыңыз, кодтық базаға еніңіз және алғашқы бірнеше сағат ішінде сіз көңілсіз таныс нәрсені табасыз. Стиль кестелері бойынша шашыраңқы бір негізгі анимациялар үшін бірнеше @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; } }
/* кейінірек кодта... */
.компонент-екі { /* құрамдас стильдер */ анимация: импульс 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 жеңілдету; }
.көмекші { анимация: kf-fade-in 0,2s жеңіл-алу; }
.хабарлама { анимация: kf-fade-in 0,5s жеңілдету; }
Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған Demo 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-слайд { бастап { аудару: 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 { анимация: kf-өшіру 0,5 с, kf-slide-in 0,5s куб-безье(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* төменнен оңға қарай сырғыту */ }
Бұл тәсіл бізге тұрақтылықты сақтай отырып, керемет икемділік береді. Бір негізгі кадрлық декларация, шексіз мүмкіндіктер. Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған демонстрация 3 [айырылған]. Егер біз анимацияларымызды «жылжымалы» әсерлерге де мүмкіндік беретін икемді еткіміз келсе, бізкелесі бөлімде көретінімізге ұқсас --kf-slide-to пайдаланушы сипатын қосыңыз. Екі бағытты масштабтау негізгі кадрлары Жобалар арасында қайталанатын тағы бір кең таралған анимация – «масштабтау» әсерлері. Бұл тост хабарлары үшін нәзік масштабты үлкейту болсын, модальдар үшін керемет үлкейту немесе тақырыптар үшін жұмсақ масштабтау эффектісі болсын, масштабтау анимациялары барлық жерде бар. Әрбір масштаб мәні үшін жеке негізгі кадрларды жасаудың орнына, kf-масштабтау негізгі кадрларының бір икемді жинағын құрастырайық:
/* * Масштабтау – масштабты анимация * Масштаб мәндерін басқару үшін --kf-zoom-f және --kf-zoom-to пайдаланыңыз * Әдепкі: масштабтау 80%-дан 100%-ға дейін (0,8-ден 1-ге дейін) * Қолданылуы: * анимация: kf-масштабтау 0,2 с жеңілдету; * --kf-үлкейтуден: 0,5; --kf-үлкейту: 1; // 50%-дан 100%-ға дейін масштабтау * --kf-үлкейту: 1; --kf-zoom-to: 0; // 100%-дан 0%-ға дейін масштабтау * --kf-үлкейту: 1; --kf-zoom-to: 1,1; // 100%-дан 110%-ға дейін масштабтау */
@keyframes kf-zoom { бастап { шкала: var(--kf-zoom-from, 0,8); } { шкала: var(--kf-үлкейтуге, 1); } }
Бір анықтамамен біз кез келген масштабтау вариациясына қол жеткізе аламыз: .тост { анимация: kf-слайд 0,2 с, kf-масштабтау 0,4 с жеңілдету; --kf-slide-from: 0 100%; /* жоғарыдан сырғыту */ /* Әдепкі масштабтауды пайдаланады: 80%-дан 100%-ға дейін масштабтау */ }
.modal { анимация: kf-масштабтау 0,3с куб-безье(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-тегі барлық соңғы жетістіктермен олар бізге әлі де қажет пе? Бақытымызға орай, Адам Аргайл сол сұрақтарды зерттеп, өз блогында керемет түрде білдірді. Бұл мұнда жазылғанға қайшы келмейді, бірақ бұл, әсіресе сіздің жобаларыңыз кіру анимацияларына негізделген болса, қарастыруға тұрарлық тәсілді ұсынады. Үздіксіз анимациялар «Өшіру», «сырғыту» және «масштабтау» сияқты кіріс анимациялары бір рет орындалып, содан кейін тоқтаған кезде, үздіксіз анимациялар назар аудару немесе ағымдағы әрекетті көрсету үшін шексіз циклге айналады. Мен жиі кездесетін екі үздіксіз анимация – «айналдыру» (индикаторларды жүктеу үшін) және «импульс» (маңызды элементтерді бөлектеу үшін). Бұл анимациялар негізгі кадрлар таңбалауыштарын жасау кезінде ерекше қиындықтар тудырады. Әдетте бір күйден екінші күйге өтетін кіру анимацияларынан айырмашылығы, үздіксіз анимациялар өздерінің мінез-құлық үлгілерінде жоғары теңшелетін болуы керек. Айналдыру дәрігері Әрбір жоба бірнеше айналдыру анимацияларын пайдаланатын сияқты. Кейбіреулер сағат тіліне қарсы, басқалары сағат тіліне қарсы айналады. Кейбіреулер бір рет 360 градусқа айналдырады, басқалары жылдамырақ әсер ету үшін бірнеше айналым жасайды. Әрбір вариация үшін жеке негізгі кадрлар жасаудың орнына, барлық сценарийлерді өңдейтін бір икемді айналдыруды құрастырайық:
/* * Айналдыру - айналу анимациясы * Айналу ауқымын басқару үшін --kf-spin-f және --kf-spin-to пайдаланыңыз * Айналу мөлшерін басқару үшін --kf-spin-turns пайдаланыңыз * Әдепкі: 0 градустан 360 градусқа дейін айналады (1 толық айналым) * Қолданылуы: * анимация: kf-spin 1s сызықтық шексіз; * --kf-айналдыру: 2; // 2 толық айналым * --kf-spin-from: 0deg; --kf-spin-to: 180 градус; // жарты айналым * --kf-spin-from: 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 сызықтық шексіз; /* Әдепкі мәнді пайдаланады: 0 градустан 360 градусқа дейін бұрылады */ }
.fast-loader { анимация: kf-spin 1.2s жеңілдетілген шексіз балама; --kf-айналдыру: 3; /* Әр цикл үшін әр бағыт үшін 3 толық айналым*/ }
.қадамды кері { анимация: kf-spin 1,5с қадамдар(8) шексіз; --kf-spin-to: -360deg; /* сағат тіліне қарсы */ }
.subtle-wiggle { анимация: kf-spin 2s жеңілдетілген шексіз балама; --kf-spin-from: -16deg; --kf-spin-to: 32°; /* тербелу 36 градус: -18 градус пен +18 градус арасында */ }
Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған Demo 5 [форктелген]. Бұл тәсілдің сұлулығы сол негізгі кадрлар спиннерлерді, айналмалы белгішелерді, қозғалмалы әсерлерді және тіпті күрделі көп айналымды анимацияларды жүктеу үшін жұмыс істейді. Пульс парадоксы Импульстік анимациялар күрделірек, себебі олар әртүрлі сипаттарды «импульсті» алады. Кейбіреулер масштабты импульсті, басқалары мөлдірлікті импульсті және жарықтық немесе қанықтылық сияқты кейбір импульстік түсті сипаттарды. Әрбір сипат үшін жеке негізгі кадрларды жасаудың орнына, біз кез келген CSS сипатымен жұмыс істейтін негізгі кадрларды жасай аламыз. Масштаб және мөлдірлік опциялары бар импульстік негізгі кадрдың мысалы:
/* * Импульстік – импульстік анимация * Масштаб ауқымын басқару үшін --kf-pulse-scale-f және --kf-pulse-scale-to пайдаланыңыз. * Мөлдірлік ауқымын басқару үшін --kf-pulse-opacity-from және --kf-pulse-opacity-to пайдаланыңыз. * Әдепкі: импульс жоқ (барлық мәндер 1) * Қолданылуы: * анимация: kf-импульс 2s оңай-шығу шексіз балама; * --kf-импульстік-шкаласынан: 0,95; --kf-импульстік-шкалаға дейін: 1,05; // масштабты импульс * --kf-импульстік-мөлдірлік-кейін: 0,7; --kf-импульстік-мөлдірлік-to: 1; // мөлдірлік импульсі */
@keyframes kf-импульс { бастап { шкала: var(--kf-pulse-scale-from, 1); мөлдірлік: var(--kf-pulse-opacity-from, 1); } { шкала: var(--kf-pulse-scale-to, 1); мөлдірлік: var(--kf-pulse-opacity-to, 1); } }
Бұл бірнеше сипаттарды жандандыра алатын икемді импульсті жасайды: .әрекетке шақыру { анимация: kf-импульс 0,6с шексіз балама; --kf-импульстік-мөлдір-ден: 0,5; /* мөлдірлік импульсі */ }
.notification-нүкте { анимация: kf-импульс 0,6с оңай-шығу шексіз балама; --kf-импульстік-шкаласынан: 0,9; --kf-pulse-scale-to: 1.1; /* шкала импульсі */ }
.text-highlight { анимация: kf-импульс 1,5с жеңілдету шексіз; --kf-импульстік-шкаласынан: 0,8; --kf-импульстік-мөлдірлік-from: 0,2; /* масштаб пен мөлдірлік импульсі */ }
Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған Demo 6 [форктелген]. Бұл жалғыз kf-импульстік негізгі кадр нәзік назар аударудан бастап, маңызды сәттерге дейін бәрін реттей алады, сонымен бірге теңшеу оңай. Жетілдірілген жеңілдету Негізгі кадрлар таңбалауыштарын пайдаланудың тамаша нәрселерінің бірі - анимациялар кітапханасын кеңейту және көптеген әзірлеушілер серпімділік немесе серпіліс сияқты нөлден жазуға алаңдамайтын әсерлерді қамтамасыз ету қаншалықты оңай. Мұнда секіру биіктігін басқару үшін --kf-bounce-from теңшелетін сипатын пайдаланатын қарапайым «серпілу» негізгі кадрлар таңбалауышы мысалы берілген. /* * Bounce - серпілу кіріс анимациясы * Секіру биіктігін басқару үшін --kf-bounce-f пайдаланыңыз * Әдепкі: 100в/сағ-тан секіреді (экраннан тыс) * Қолданылуы: * анимация: 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-f-X және --kf-elastic-f-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-from: 0; }
.bounce-and-slide { анимациялық композиция: қосу; /* Екі анимация да аударманы пайдаланады */ анимация: kf-bounce 3s оңай кіру, kf-slide-in 3s жеңілдету; --kf-slide-from: -200px; }
.elastik-in { анимация: kf-elastic-in 2s екеуін де оңай енгізу; }
Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған Demo 7 [форктелген]. Осы уақытқа дейін біз негізгі кадрларды қалай ақылды және тиімді түрде біріктіруге болатынын көрдік. Әрине, сіз өз жобаңыздың қажеттіліктеріне жақсырақ сәйкес келетін нәрселерді өзгерткіңіз келуі мүмкін, бірақ біз бірнеше жалпы анимациялар мен күнделікті пайдалану жағдайларының мысалдарын қарастырдық. Осы негізгі кадрлар таңбалауыштары бар болса, бізде қазір бүкіл жоба бойынша дәйекті, қолдау көрсетілетін анимацияларды жасау үшін қуатты құрылыс блоктары бар. Қайталанатын негізгі кадрлар, жаһандық ауқымдағы қайшылықтар енді болмайды. Біздің барлық анимация қажеттіліктерімізді шешудің таза, ыңғайлы жолы. Бірақ нақты сұрақ: біз бұл құрылыс блоктарын бірге қалай жасаймыз? Барлығын біріктіру Біз негізгі кадрлық таңбалауыштарды біріктіру оңай екенін көрдік. Бізге ерекше ештеңе қажет емес, бірақ бірінші анимацияны анықтау, екіншісін анықтау, айнымалы мәндерді қажетінше орнату және бәрі де. /* Өшіру + сырғыту */ .тост { анимация: kf-өшіру 0,4 с, kf-slide-in 0,4s куб-безье(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Үлкейту + үлкейту */ .modal { анимация: kf-өшіру 0,3 с, kf-масштабтау 0,3с куб-безье(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0,7; --kf-үлкейту: 1; }
/* Сырғыту + импульс */ .хабарлама { анимация: kf-слайд 0,5 с, kf-импульс 1.2с оңай-шығу шексіз балама; --kf-slide-from: -100px 0; --kf-импульстік-шкаласынан: 0,95; --kf-импульстік-шкалаға дейін: 1,05; }
Бұл комбинациялар әдемі жұмыс істейді, себебі әрбір анимация әртүрлі сипатқа бағытталған: мөлдірлік, түрлендіру (аудару/масштабтау) және т.б. Бірақ кейде қайшылықтар болады және біз олармен неге және қалай күресу керектігін білуіміз керек. Екі анимация бірдей сипатты анимациялауға тырысқанда, мысалы, анимациялық масштабтың екеуі де немесе анимациялық мөлдірліктің екеуі де — нәтиже сіз күткендей болмайды. Әдепкі бойынша, анимациялар тізіміндегі соңғысы болып табылатын бұл сипатқа нақты анимациялардың біреуі ғана қолданылады. Бұл CSS бір сипаттағы бірнеше анимацияларды өңдеу жолының шектеуі. Мысалы, бұл мақсатқа сай жұмыс істемейді, себебі тек kf-импульстік анимация қолданылады. .bad-combo { анимация: kf-масштабтау 0,5с алға, kf-импульс 1,2с шексіз балама; --kf-zoom-from: 0,5; --kf-zoom-to: 1,2; --kf-импульстік-шкаласынан: 0,8; --kf-pulse-scale-to: 1.1; }
Анимация қосымшасы Бір сипатқа әсер ететін бірнеше анимацияларды өңдеудің ең қарапайым және тікелей жолы - анимация-композиция сипатын пайдалану. Жоғарыдағы соңғы мысалда kf-импульстік анимация kf-масштабтау анимациясын ауыстырады, сондықтан біз бастапқы масштабтауды көрмейміз және күтілетін масштабты 1,2-ге дейін ала алмаймыз. Қосылатын анимация композициясын орнату арқылы біз браузерге екі анимацияны біріктіруді айтамыз. Бұл бізге қалаған нәтижені береді. .компонент-екі { анимациялық композиция: қосу; }
Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған Demo 8 [форктелген]. Бұл әдіс әсерлерді бір сипатқа біріктіргіміз келетін көптеген жағдайларда жақсы жұмыс істейді. Бұл анимацияларды тұрақты сипат мәндерімен біріктіру қажет болғанда да пайдалы. Мысалы, егер бізде translate қасиетін қолданатын элемент болса, оны дәл өзіміз қалаған жерге орналастыру үшін, содан кейін біз оны kf-slide-in негізгі кадрларымен жандандырғымыз келсе, анимация-композициясыз жағымсыз көрінетін секіруді аламыз. Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған демонстрация 9. Анимация композициясын қосу үшін анимация бармен біркелкі біріктіріледітүрлендіреді, сондықтан элемент орнында қалады және күтілгендей жанданады. Animation Stagger Бірнеше анимацияларды өңдеудің тағы бір жолы - оларды «сүрту» — яғни біріншісі аяқталғаннан кейін екінші анимацияны аздап бастау. Бұл әр жағдайда жұмыс істейтін шешім емес, бірақ бізде үздіксіз анимациядан кейін кіріс анимациясы болғанда пайдалы. /* өшуі + мөлдірлік импульсі */ .хабарлама { анимация: kf-fade-in 2s жеңілдету, kf-импульс 0,5с 2с жеңіл-кіру шексіз балама; --kf-импульстік-мөлдірлік-қа: 0,5; }
Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған Demo 10 [форктелген]. Тапсырыс мәселелері Біз жұмыс істейтін анимациялардың үлкен бөлігі трансформация сипатын пайдаланады. Көп жағдайда бұл жай ғана ыңғайлы. Сондай-ақ оның өнімділік артықшылығы бар, өйткені түрлендіру анимациялары GPU арқылы жылдамдатылуы мүмкін. Бірақ егер біз түрлендірулерді қолданатын болсақ, біз түрлендірулерді орындау реті маңызды екенін қабылдауымыз керек. Көп. Осы уақытқа дейін негізгі кадрларымызда жеке түрлендірулерді қолдандық. Ерекшеліктерге сәйкес, олар әрқашан белгіленген тәртіпте қолданылады: алдымен элемент аударылады, содан кейін айналдырады, содан кейін масштабталады. Бұл мағынасы бар және көпшілігіміз күткен нәрсе. Дегенмен, егер трансформация қасиетін қолдансақ, функциялардың жазылу реті олардың қолданылу реті болып табылады. Бұл жағдайда бір нәрсені X осінде 100 пиксельге жылжытсақ, содан кейін оны 45 градусқа айналдырсақ, бұл алдымен оны 45 градусқа айналдырып, содан кейін 100 пиксельге жылжытумен бірдей емес. /* Қызғылт шаршы: алдымен аударыңыз, содан кейін бұрыңыз */ .мысал-бір { түрлендіру: translateX(100px) бұру(45deg); }
/* Жасыл шаршы: алдымен айналдырыңыз, содан кейін аударыңыз */ .мысал-екі { түрлендіру: айналдыру(45deg) translateX(100px); }
Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған демонстрация 11 [форктелген]. Бірақ түрлендіру тәртібіне сәйкес, барлық жеке түрлендірулер - біз негізгі кадрлар таңбалауыштары үшін пайдаланғанның бәрі - түрлендіру функцияларына дейін орындалады. Бұл трансформация сипатында орнатқанның бәрі анимациялардан кейін орындалатынын білдіреді. Бірақ, мысалы, kf-spin негізгі кадрларымен бірге аударуды орнатсаңыз, аудару анимациядан бұрын орындалады. Әлі шатасып кеттіңіз бе?! Бұл келесі жағдайдағы сияқты бір анимация үшін статикалық мәндер әртүрлі нәтижелерді тудыруы мүмкін жағдайларға әкеледі:
/* Екі спиннерге де ортақ анимация */ .spinner { анимация: kf-spin 1s сызықтық шексіз; }
/* Қызғылт айналдыру: айналдыру алдында аудару (жеке түрлендіру) */ .spinner-pink { аудару: 100% 50%; }
/* Жасыл айналдыру: бұрап, содан кейін аудару (функция реті) */ .spinner-green { түрлендіру: аудару(100%, 50%); }
Қаламның негізгі кадрларының таңбалауыштарын қараңыз - Амит Шин ұсынған Demo 12 [форктелген]. Бірінші спиннер (қызғылт) kf-спиннің айналуынан бұрын болатын аударманы алатынын көруге болады, сондықтан ол алдымен орнына қозғалады, содан кейін айналады. Екінші спиннер (жасыл) жеке түрлендіруден кейін орын алатын translate() функциясын алады, сондықтан элемент алдымен айналады, содан кейін ағымдағы бұрышына қатысты қозғалады және біз сол кең орбита әсерін аламыз. Жоқ, бұл қате емес. Бұл CSS туралы білуіміз керек және бірнеше анимациялармен немесе бірнеше түрлендірулермен жұмыс істегенде есте сақтауымыз керек нәрселердің бірі ғана. Қажет болса, rotate() функциясын пайдаланып элементтерді айналдыратын kf-spin-alt негізгі кадрлардың қосымша жинағын да жасауға болады. Қысқартылған қозғалыс Біз балама негізгі кадрлар туралы айтып жатқанда, біз «анимациясыз» опциясын елемеуге болмайды. Негізгі кадрлар таңбалауыштарын пайдаланудың ең үлкен артықшылықтарының бірі - қол жетімділікті пісіруге болады және оны орындау өте оңай. Арнайы мүмкіндіктерді ескере отырып, негізгі кадрларды жобалау арқылы біз қысқартылған қозғалысты қалайтын пайдаланушылардың қосымша жұмыссыз немесе кодты қайталаусыз тегіс, аз алаңдататын тәжірибе алуын қамтамасыз ете аламыз. «Қысқартылған қозғалыстың» нақты мағынасы бір анимациядан екіншісіне және жобадан жобаға аздап өзгеруі мүмкін, бірақ мұнда бірнеше маңызды тармақтарды есте ұстаған жөн: Негізгі кадрлардың дыбысын өшіру Кейбір анимацияларды жұмсартуға немесе баяулатуға болатынымен, қозғалысты азайту сұралғанда мүлдем жоғалып кетуі керек басқалары бар. Импульстік анимациялар жақсы мысал болып табылады. Бұл анимациялар қысқартылған қозғалыс режимінде жұмыс істемейтініне көз жеткізу үшін біз оларды сәйкес медиа сұрауына орап аламыз.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-импульс { бастап { шкала: var(--kf-pulse-scale-from, 1); мөлдірлік: var(--kf-pulse-opacity-from, 1); } { шкала: var(--kf-pulse-scale-to, 1); мөлдірлік:var(--kf-импульстік-мөлдірлік-to, 1); } } }
Бұл "presents-reduced-motion" функциясын азайту үшін орнатқан пайдаланушылардың анимацияны көрмеуін және олардың қалауына сәйкес тәжірибе алуын қамтамасыз етеді. Instant In Кіру анимациялары сияқты біз жай ғана алып тастай алмайтын кейбір негізгі кадрлар бар. Мән өзгеруі керек, жандануы керек; әйтпесе, элементте дұрыс мәндер болмайды. Бірақ қысқартылған қозғалыста бастапқы мәннен бұл ауысу лезде болуы керек. Бұған қол жеткізу үшін мән бірден соңғы күйге өтетін негізгі кадрлардың қосымша жинағын анықтаймыз. Бұлар біздің әдепкі негізгі кадрларымызға айналады. Содан кейін, алдыңғы мысалдағы сияқты артықшылықсыз параметрге теңшелген қозғалысты таңдау үшін мультимедиа сұрауына кәдімгі негізгі кадрларды қосамыз. /* қозғалысты азайту үшін бірден кіріңіз */ @keyframes kf-zoom { бастап, { шкала: var(--kf-үлкейтуге, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Бастапқы масштабтау негізгі кадрлары */ @keyframes kf-zoom { бастап { шкала: var(--kf-zoom-from, 0,8); } { шкала: var(--kf-үлкейтуге, 1); } } }
Осылайша, қысқартылған қозғалысты ұнататын пайдаланушылар элементтің соңғы күйінде бірден пайда болғанын көреді, ал қалғандары анимациялық ауысуды алады. Жұмсақ тәсіл Біз кейбір қозғалысты сақтағымыз келетін жағдайлар бар, бірақ бастапқы анимацияға қарағанда әлдеқайда жұмсақ және тыныш. Мысалы, біз серпілу кіреберісін жұмсақ өңмен ауыстыра аламыз.
@keyframes kf-bounce { /* Қозғалысты азайту үшін жұмсақ өңі */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Бастапқы серпілу негізгі кадрлар */ } }
Енді қозғалысты азайтқан пайдаланушылар әлі де сыртқы көрініс сезімін алады, бірақ серпілудің немесе серпімді анимацияның қарқынды қозғалысынсыз. Құрылыс блоктары орнында болса, келесі мәселе - оларды нақты жұмыс процесінің бір бөлігіне айналдыру жолы. Икемді негізгі кадрларды жазу бір нәрсе, бірақ оларды үлкен жобада сенімді ету үшін мен қиын жолмен үйренуім керек болатын бірнеше стратегия қажет. Іске асыру стратегиялары және үздік тәжірибелер Бізде негізгі кадрлар таңбалауыштарының сенімді кітапханасы болғаннан кейін, оларды күнделікті жұмысқа қалай енгізу керектігі нақты мәселе болып табылады.
Азғыру - барлық негізгі кадрларды бірден тастап, мәселенің шешілгенін жариялау, бірақ іс жүзінде ең жақсы нәтижелер біртіндеп қабылдаудан келетінін байқадым. Өшіру немесе слайд сияқты ең көп таралған анимациялардан бастаңыз. Бұл үлкен қайта жазуларды қажет етпей, бірден құнды көрсететін оңай жеңістер. Атау - назар аударуға тұрарлық тағы бір мәселе. Тұрақты префикс немесе аттар кеңістігі қай анимациялардың таңбалауыш және қайсысы жергілікті бір реттік екенін анық көрсетеді. Ол сондай-ақ кездейсоқ соқтығыстардың алдын алады және жаңа топ мүшелеріне ортақ жүйені бір қарағанда тануға көмектеседі. Құжаттама кодтың өзі сияқты маңызды. Тіпті әрбір негізгі кадрлар таңбалауышы үстіндегі қысқа түсініктеме кейінірек болжау сағаттарын үнемдей алады. Әзірлеуші таңбалауыштар файлын ашып, қажетті әсерді іздеп, пайдалану үлгісін тікелей өзінің құрамдас бөлігіне көшіре алуы керек. Икемділік - бұл әдісті күш салуға лайық ететін нәрсе. Ақылға қонымды теңшелетін сипаттарды көрсету арқылы біз командаларға жүйені бұзбай анимацияны бейімдеуге мүмкіндік береміз. Сонымен қатар, асқындырмауға тырысыңыз. Маңызды тұтқаларды ұсыныңыз және қалғандары туралы пікір қалдырыңыз. Соңында, қолжетімділікті есте сақтаңыз. Әрбір анимацияға қысқартылған қозғалыс баламасы қажет емес, бірақ көбісі қажет. Бұл түзетулерді ертерек пісіру оларды кейінірек қайта жөндеудің қажеті жоқ дегенді білдіреді және бұл біздің пайдаланушыларымыз бұл туралы ешқашан айтпаса да байқайтын қамқорлық деңгейін көрсетеді.
Менің тәжірибемде, негізгі кадрлар таңбалауыштарын дизайн таңбалауыштарының жұмыс процесінің бөлігі ретінде қарастыру оларды жабыстыруға мүмкіндік береді. Олар орнында болғаннан кейін, олар арнайы әсерлер сияқты сезінуді тоқтатады және дизайн тілінің бір бөлігіне айналады, бұл өнімнің қалай қозғалатыны мен жауап беретінінің табиғи кеңейтімі. Орау Анимациялар интерфейстерді құрудың ең қуанышты бөліктерінің бірі болуы мүмкін, бірақ құрылымы болмаса, олар сонымен бірге көңілсіздіктің ең үлкен көздерінің біріне айналуы мүмкін. Негізгі кадрларды таңбалауыш ретінде қарастыру арқылы сіз әдетте ретсіз және басқаруға қиын нәрсені алып, оны анық, болжамды жүйеге айналдырасыз. Нақты мән кодтың бірнеше жолын сақтау ғана емес. Өшіруді, сырғытуды, масштабтауды немесе айналдыруды пайдаланған кезде оның жоба бойынша қалай әрекет ететінін нақты білетініңізге сенімдісіз. Бұл шексіз вариациялардың хаосысыз теңшелетін сипаттардан келетін икемділікте. Және ол қосымша ретінде емес, іргетасқа енгізілген қол жетімділіктекейінгі ой. Мен бұл идеялардың әртүрлі командаларда және әртүрлі кодтық базаларда жұмыс істейтінін көрдім және үлгі әрқашан бірдей. Токендер орнатылғаннан кейін негізгі кадрлар шашыраңқы трюктердің жинағы болуды тоқтатады және дизайн тілінің бір бөлігіне айналады. Олар өнімді неғұрлым мақсатты, дәйекті және тірі сезінеді. Егер сіз осы мақаладан бір нәрсені алсаңыз, ол былай болсын: анимациялар түстерге, типографияға және интервалға біз беретін бірдей күтім мен құрылымға лайық. Негізгі кадрлар таңбалауыштарына шағын инвестиция интерфейсіңіз қозғалған сайын ақталады.
