Уявіце сабе: вы далучаецеся да новага праекта, паглыбляецеся ў кодавую базу і на працягу першых некалькіх гадзін адкрываеце для сябе нешта непрыемна знаёмае. Раскіданыя па табліцах стыляў вы знойдзеце некалькі азначэнняў @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-two { /* стылі кампанентаў */ анімацыя: імпульс 1s лёгкасць у-выхад бясконцы; }
/* гэтыя ключавыя кадры будуць прымяняцца да абодвух кампанентаў */ імпульс @keyframes { 0%, 20%, 100% { маштаб: 1; } 10%, 40% { маштаб: 1,2; } }
Абодва кампаненты выкарыстоўваюць адно і тое ж імя анімацыі, але другое вызначэнне @keyframes перазапісвае першае. Цяпер і першы, і другі кампанент будуць выкарыстоўваць другія ключавыя кадры, незалежна ад таго, які кампанент вызначыў якія ключавыя кадры. Глядзіце маркеры Pen Keyframes - Demo 1 [форк] ад Аміта Шына. Горшая частка? Гэта часта выдатна працуе ў лакальнай распрацоўцы, але таямнічым чынам парушаецца ў вытворчасці, калі працэсы зборкі змяняюць парадак загрузкі вашых табліц стыляў. Вы атрымліваеце анімацыю, якая паводзіць сябе па-рознаму ў залежнасці ад таго, якія кампаненты загружаюцца і ў якой паслядоўнасці. Рашэнне: уніфікаваныя ключавыя кадры Адказ на гэты хаос надзіва просты: прадвызначаныя дынамічныя ключавыя кадры, якія захоўваюцца ў агульнай табліцы стыляў. Замест таго, каб дазваляць кожнаму кампаненту вызначаць сваю ўласную анімацыю, мы ствараем цэнтралізаваныя ключавыя кадры, якія добра дакументаваны і простыя ўвыкарыстоўваць, абслугоўваць і адаптаваць да канкрэтных патрэб вашага праекта. Думайце пра гэта як пра токены ключавых кадраў. Падобна таму, як мы выкарыстоўваем токены для колераў і інтэрвалаў, і многія з нас ужо выкарыстоўваюць токены для ўласцівасцей анімацыі, такіх як працягласць і функцыі змякчэння, чаму б не выкарыстоўваць токены і для ключавых кадраў? Гэты падыход можа натуральным чынам інтэгравацца з любым бягучым працоўным працэсам токенаў дызайну, які вы выкарыстоўваеце, адначасна вырашаючы як невялікую праблему (дубліраванне кода), так і вялікую праблему (канфлікты глабальнага аб'ёму). Ідэя простая: стварыць адзіную крыніцу праўды для ўсіх нашых агульных анімацый. Гэтая агульная табліца стыляў змяшчае старанна створаныя ключавыя кадры, якія ахопліваюць шаблоны анімацыі, якія фактычна выкарыстоўваюцца ў нашым праекце. Больш не варта здагадвацца, ці існуе ўжо недзе ў нашай кодавай базе зніклая анімацыя. Няма больш выпадковага перазапісу анімацыі з іншых кампанентаў. Але вось ключ: гэта не проста статычная анімацыя капіявання і ўстаўкі. Яны распрацаваны, каб быць дынамічнымі і наладжвальнымі з дапамогай карыстальніцкіх уласцівасцей CSS, што дазваляе нам падтрымліваць узгодненасць, захоўваючы пры гэтым магчымасць адаптаваць анімацыю да канкрэтных выпадкаў выкарыстання, напрыклад, калі вам патрэбна трохі большая «імпульсная» анімацыя ў адным месцы. Стварэнне першага маркера ключавых кадраў Адным з першых пладоў, з якімі мы павінны заняцца, з'яўляецца анімацыя з плынню. У адным з маіх нядаўніх праектаў я знайшоў больш за тузін асобных азначэнняў плыні, і так, усе яны проста аніміравалі непразрыстасць з 0 да 1. Такім чынам, давайце створым новую табліцу стыляў, назавем яе kf-tokens.css, імпартуем у наш праект і размесцім у ёй ключавыя кадры з адпаведнымі каментарамі. /* keyframes-tokens.css */
/* * Fade In - знікненне ўваходнай анімацыі * Выкарыстанне: анімацыя: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { ад { непразрыстасць: 0; } да { непразрыстасць: 1; } }
Гэта адзіная дэкларацыя @keyframes замяняе ўсе гэтыя разрозненыя плыўныя анімацыі па нашай кодавай базе. Чысты, просты і даступны ва ўсім свеце. І цяпер, калі мы вызначылі гэты токен, мы можам выкарыстоўваць яго з любога кампанента нашага праекта: .modal { анімацыя: kf-fade-in 0.3s паслабленне; }
.tooltip { анімацыя: kf-fade-in 0.2s лёгкасць у-out; }
.апавяшчэнне { анімацыя: kf-fade-in 0,5s паслабленне; }
Глядзіце маркеры Pen Keyframes - Demo 2 [forked] ад Аміта Шына. Заўвага: ва ўсіх назвах @keyframes мы выкарыстоўваем прэфікс kf-. Гэты прэфікс служыць прасторай імёнаў, якая прадухіляе канфлікты найменняў з існуючай анімацыяй у праекце і адразу дае зразумець, што гэтыя ключавыя кадры паходзяць з нашага файла токенаў ключавых кадраў. Стварэнне дынамічнага слайда Ключавыя кадры kf-fade-in працуюць выдатна, таму што яны простыя і мала месца, каб нешта сапсаваць. Аднак у іншых анімацыях нам трэба быць значна больш дынамічнымі, і тут мы можам выкарыстоўваць велізарную моц карыстальніцкіх уласцівасцей CSS. Тут токены ключавых кадраў сапраўды блішчаць у параўнанні з раскіданай статычнай анімацыяй. Давайце возьмем агульны сцэнар: «слізгальная» анімацыя. Але слізгаць адкуль? 100 пікселяў справа? 50% злева? Ён павінен уводзіцца з верхняй частцы экрана? А можа, прыплывуць са дна? Так шмат магчымасцей, але замест таго, каб ствараць асобныя ключавыя кадры для кожнага кірунку і кожнай варыяцыі, мы можам стварыць адзін гнуткі токен, які адаптуецца да ўсіх сцэнарыяў: /* * Slide In - накіраваная анімацыя слайдаў * Выкарыстоўвайце --kf-slide-from для кантролю напрамку * Па змаўчанні: слізгае злева (-100%) * Выкарыстанне: * анімацыя: kf-slide-in 0.3s ease-out; * --kf-slide-from: -100px 0; // слізгаць злева * --kf-slide-from: 100 пікселяў 0; // слізгаць справа * --kf-slide-from: 0 -50 пікселяў; // слізгаць зверху */
@keyframes kf-slide-in { ад { пераклад: var(--kf-slide-from, -100% 0); } да { пераклад: 0 0; } }
Цяпер мы можам выкарыстоўваць гэты адзіны токен @keyframes для любога кірунку слайда, проста змяніўшы карыстальніцкую ўласцівасць --kf-slide-from: .sidebar { анімацыя: kf-slide-in 0.3s ease-out; /* Выкарыстоўваецца значэнне па змаўчанні: слайды злева */ }
.апавяшчэнне { анімацыя: kf-slide-in 0.4s ease-out; --kf-слайд-ад: 0 -50 пікселяў; /* слайд зверху */ }
.modal { анімацыя: kf-зніжэнне 0,5 с, kf-slide-in 0,5s кубічны-Бэзье (0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* слайд знізу справа */ }
Такі падыход дае нам неверагодную гнуткасць, захоўваючы паслядоўнасць. Аб'ява аднаго ключавога кадра, бясконцыя магчымасці. Глядзіце маркеры Pen Keyframes - Demo 3 [forked] ад Аміта Шына. І калі мы хочам зрабіць нашу анімацыю яшчэ больш гнуткай, дазваляючы таксама эфекты «высоўвання», мы можампроста дадайце карыстацкую ўласцівасць --kf-slide-to, падобна таму, што мы ўбачым у наступным раздзеле. Двунакіраваныя ключавыя кадры маштабавання Яшчэ адна распаўсюджаная анімацыя, якая дублюецца ў розных праектах, - гэта эфекты "павелічэння". Няхай гэта будзе тонкае павелічэнне для тостаў, рэзкае павелічэнне для мадалаў або эфект мяккага памяншэння для загалоўкаў, маштабаванне анімацыі ёсць паўсюль. Замест стварэння асобных ключавых кадраў для кожнага значэння маштабу, давайце створым адзін гнуткі набор ключавых кадраў kf-zoom:
/* * Zoom - маштаб анімацыі * Для кіравання значэннямі маштабу выкарыстоўвайце --kf-zoom-from і --kf-zoom-to * Па змаўчанні: маштабаванне ад 80% да 100% (ад 0,8 да 1) * Выкарыстанне: * анімацыя: kf-zoom 0.2s паслабленне; * --kf-zoom-ад: 0,5; --kf-павялічыць-да: 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); } }
З дапамогай аднаго вызначэння мы можам дасягнуць любой варыяцыі маштабавання: .toast { анімацыя: kf-слайд-ін 0,2 с, kf-zoom 0.4s паслабленне; --kf-слайд-ад: 0 100%; /* слайд зверху */ /* Выкарыстоўваецца стандартны маштаб: маштаб ад 80% да 100% */ }
.modal { анімацыя: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-павялічыць-ад: 0; /* рэзкае павелічэнне ад 0% да 100% */ }
.heading { анімацыя: kf-зніжэнне 2с, kf-zoom 2s ease-in; --kf-zoom-ад: 1.2; --kf-павялічыць-да: 0,8; /* мяккае памяншэнне маштабу */ }
Значэнне па змаўчанні 0,8 (80%) ідэальна працуе для большасці элементаў карыстальніцкага інтэрфейсу, такіх як тост-паведамленні і карткі, і пры гэтым яго лёгка наладзіць для асаблівых выпадкаў. Глядзіце маркеры Pen Keyframes - Demo 4 [forked] ад Аміта Шына. Магчыма, вы заўважылі нешта цікавае ў апошніх прыкладах: мы камбінавалі анімацыю. Адной з ключавых пераваг працы з токенамі @keyframes з'яўляецца тое, што яны распрацаваны для бесперашкоднай інтэграцыі адзін з адным. Такая гладкая кампазіцыя наўмысная, а не выпадковая. Мы абмяркуем кампазіцыю анімацыі больш падрабязна пазней, у тым ліку тое, дзе яны могуць стаць праблематычнымі, але большасць камбінацый простыя і простыя ў рэалізацыі. Заўвага: падчас напісання гэтага артыкула, і, магчыма, з-за яго напісання, я выявіў, што пераасэнсаваў усю ідэю анімацыі ўваходу. З усімі нядаўнімі дасягненнямі ў CSS, ці патрэбныя яны нам наогул? На шчасце, Адам Аргайл даследаваў тыя ж пытанні і бліскуча выказаў іх у сваім блогу. Гэта не супярэчыць таму, што тут напісана, але гэта падыход, які варта разгледзець, асабліва калі вашы праекты ў значнай ступені залежаць ад анімацыі ўваходу. Бесперапынныя анімацыі У той час як уваходная анімацыя, напрыклад «згасанне», «слізгаценне» і «павелічэнне», адбываецца адзін раз, а потым спыняецца, бесперапынная анімацыя паўтараецца бясконца, каб прыцягнуць увагу або паказаць бягучую дзейнасць. Дзве найбольш распаўсюджаныя бесперапынныя анімацыі, з якімі я сутыкаюся, - гэта «кручэнне» (для індыкатараў загрузкі) і «пульс» (для вылучэння важных элементаў). Гэтыя анімацыі ствараюць унікальныя праблемы, калі справа даходзіць да стварэння токенаў ключавых кадраў. У адрозненне ад анімацыі ўваходу, якая звычайна пераходзіць з аднаго стану ў іншы, бесперапынная анімацыя павінна быць вельмі наладжвальнай у сваіх мадэлях паводзін. Спін-доктар Здаецца, у кожным праекце выкарыстоўваецца некалькі круцільных анімацый. Адны круцяцца па гадзіннікавай стрэлцы, іншыя - супраць. Некаторыя выконваюць адно кручэнне на 360 градусаў, іншыя робяць некалькі паваротаў для больш хуткага эфекту. Замест таго, каб ствараць асобныя ключавыя кадры для кожнай варыяцыі, давайце створым адзін гнуткі спін, які апрацоўвае ўсе сцэнары:
/* * Кручэнне - кручэнне анімацыі * Выкарыстоўвайце --kf-spin-from і --kf-spin-to для кантролю дыяпазону кручэння * Выкарыстоўвайце --kf-spin-turns для кантролю колькасці кручэння * Па змаўчанні: паварочваецца ад 0 да 360 градусаў (1 поўны абарот) * Выкарыстанне: * анімацыя: kf-spin 1s лінейная бясконцая; * --kf-spin-абароты: 2; // 2 поўныя абароты * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // паўаварот * --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 поўныя абароты для кожнага кірунку за цыкл*/ }
.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 градусаў */ }
Глядзіце маркеры Pen Keyframes - Demo 5 [forked] ад Аміта Шына. Прыгажосць гэтага падыходу ў тым, што адны і тыя ж ключавыя кадры працуюць для загрузкі круцёлак, паваротных значкоў, эфектаў варушэння і нават складанай шматпаваротнай анімацыі. Парадокс пульса Імпульсная анімацыя больш складаная, таму што яна можа «пульсаваць» розныя ўласцівасці. Некаторыя імпульсуюць маштаб, іншыя пульсуюць непразрыстасць, а некаторыя пульсуюць такія ўласцівасці колеру, як яркасць або насычанасць. Замест таго, каб ствараць асобныя ключавыя кадры для кожнай уласцівасці, мы можам стварыць ключавыя кадры, якія працуюць з любымі ўласцівасцямі CSS. Вось прыклад імпульснага ключавога кадра з параметрамі маштабу і непразрыстасці:
/* * Pulse - пульсуючая анімацыя * Выкарыстоўвайце --kf-pulse-scale-from і --kf-pulse-scale-to для кіравання дыяпазонам шкалы * Выкарыстоўвайце --kf-pulse-opacity-from і --kf-pulse-opacity-to для кантролю дыяпазону непразрыстасці * Па змаўчанні: няма пульса (усе значэнні 1) * Выкарыстанне: * анімацыя: kf-pulse 2s лёгкасць у-выхад бясконцы альтэрнатыўны; * --kf-пульс-шкала-ад: 0,95; --kf-пульс-шкала-да: 1,05; // шкала пульса * --kf-pulse-opacity-ад: 0,7; --kf-pulse-opacity-to: 1; // непразрыстасць пульса */
@keyframes kf-pulse { ад { шкала: 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-dot { анімацыя: kf-імпульс 0,6 с, бясконцае чаргаванне; --kf-пульс-шкала-ад: 0,9; --kf-пульс-шкала-да: 1,1; /* шкала імпульсу */ }
.text-highlight { анімацыя: kf-імпульс 1,5 с бясконцы паслабленне; --kf-пульс-шкала-ад: 0,8; --kf-пульс-непразрыстасць-ад: 0,2; /* маштаб і імпульс непразрыстасці */ }
Глядзіце маркеры Pen Keyframes - Demo 6 [форк] ад Аміта Шына. Гэты адзіны ключавы кадр kf-pulse можа апрацоўваць усё, ад тонкага прыцягнення ўвагі да драматычных момантаў, і пры гэтым яго лёгка наладзіць. Пашыранае змякчэнне Адна з выдатных пераваг выкарыстання токенаў ключавых кадраў - гэта тое, як лёгка можна пашырыць нашу бібліятэку анімацыі і забяспечыць эфекты, якія большасць распрацоўшчыкаў не папрацуюць напісаць з нуля, напрыклад, пругкасць або адскок. Вось прыклад простага токена ключавых кадраў "адскоку", які выкарыстоўвае карыстацкую ўласцівасць --kf-bounce-from для кіравання вышынёй скачка. /* * Bounce - анімацыя падскоку ўваходу * Выкарыстоўвайце --kf-bounce-from для кантролю вышыні скачка * Па змаўчанні: скача ад 100vh (за экранам) * Выкарыстанне: * анімацыя: kf-bounce 3s ease-in; * --kf-bounce-from: 200 пікселяў; // скачок з вышыні 200 пікселяў */
@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 ease-in-out абодва; * --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 ease-in, kf-zoom 3s лінейны; --kf-павялічыць-ад: 0; }
.bounce-and-slide { анімацыя-кампазіцыя: дап.; /* Абедзве анімацыі выкарыстоўваюць пераклад */ анімацыя: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-слайд-ад: -200 пікселяў; }
.elastic-in { анімацыя: kf-elastic-in 2s ease-in-out абодва; }
Глядзіце маркеры Pen Keyframes - Demo 7 [forked] ад Аміта Шына. Да гэтага моманту мы бачылі, як мы можам кансалідаваць ключавыя кадры разумным і эфектыўным спосабам. Вядома, вы можаце наладзіць рэчы, каб яны лепш адпавядалі патрэбам вашага праекта, але мы разгледзелі прыклады некалькіх распаўсюджаных анімацый і выпадкаў штодзённага выкарыстання. І з гэтымі маркерамі ключавых кадраў у нас цяпер ёсць магутныя будаўнічыя блокі для стварэння паслядоўнай, зручнай для абслугоўвання анімацыі ва ўсім праекце. Няма больш дубляваных ключавых кадраў, няма больш глабальных канфліктаў аб'ёму. Проста чысты, зручны спосаб задаволіць усе нашы патрэбы ў анімацыі. Але сапраўднае пытанне ў тым, як скласці гэтыя будаўнічыя блокі разам? Паклаўшы ўсё гэта разам Мы бачылі, што аб'яднаць асноўныя токены ключавых кадраў проста. Нам не трэба нічога асаблівага, акрамя як вызначыць першую анімацыю, вызначыць другую, усталяваць неабходныя зменныя, і ўсё. /* Змяншэнне + слізгаценне */ .toast { анімацыя: kf-зніжэнне 0,4 с, kf-slide-in 0,4s кубічны-Бэзье (0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40 пікселяў; }
/* Павелічэнне + знікненне */ .modal { анімацыя: kf-зніжэнне 0,3 с, kf-zoom 0.3s кубічны-Бэзье (0.34, 1.56, 0.64, 1); --kf-павелічэнне-ад: 0,7; --kf-павялічыць-да: 1; }
/* Ссуньце + пульс */ .апавяшчэнне { анімацыя: kf-слайд-ін 0,5 с, kf-імпульс 1,2 с бясконцы альтэрнатыўны паступальны выхад; --kf-slide-from: -100px 0; --kf-пульс-шкала-ад: 0,95; --kf-пульс-шкала-да: 1,05; }
Гэтыя камбінацыі працуюць выдатна, таму што кожная анімацыя накіравана на розныя ўласцівасці: непразрыстасць, трансфармацыю (пераклад/маштаб) і г.д. Але часам узнікаюць канфлікты, і нам трэба ведаць, чаму і як з імі змагацца. Калі дзве анімацыі спрабуюць аніміраваць аднолькавую ўласцівасць — напрыклад, абедзве — маштаб анімацыі або абедзве — непразрыстасць, — вынік не будзе такім, як вы чакаеце. Па змаўчанні да гэтага ўласцівасці прымяняецца толькі адна з анімацый, якая з'яўляецца апошняй у спісе анімацый. Гэта абмежаванне таго, як CSS апрацоўвае некалькі анімацый на адной уласнасці. Напрыклад, гэта не будзе працаваць належным чынам, таму што будзе прымяняцца толькі анімацыя kf-pulse. .bad-combo { анімацыя: kf-zoom 0,5 с наперад, kf-імпульс 1,2 с бясконцы альтэрнатыўны; --kf-павелічэнне-ад: 0,5; --kf-zoom-to: 1.2; --kf-пульс-шкала-ад: 0,8; --kf-пульс-шкала-да: 1,1; }
Дадатак анімацыі Самы просты і непасрэдны спосаб апрацоўкі некалькіх анімацый, якія ўплываюць на адно і тое ж уласцівасць, - гэта выкарыстанне ўласцівасці animation-composition. У апошнім прыкладзе вышэй анімацыя kf-pulse замяняе анімацыю kf-zoom, таму мы не ўбачым першапачатковага маштабу і не атрымаем чаканы маштаб 1,2. Усталёўваючы кампазіцыю анімацыі для дадання, мы загадваем браўзеру аб'яднаць абедзве анімацыі. Гэта дае нам жаданы вынік. .component-two { анімацыя-кампазіцыя: дап.; }
Глядзіце маркеры Pen Keyframes - Demo 8 [форк] ад Аміта Шына. Гэты падыход добра працуе ў большасці выпадкаў, калі мы хочам аб'яднаць эфекты для адной і той жа ўласцівасці. Гэта таксама карысна, калі нам трэба аб'яднаць анімацыю са статычнымі значэннямі ўласцівасцей. Напрыклад, калі ў нас ёсць элемент, які выкарыстоўвае ўласцівасць translate, каб размясціць яго менавіта там, дзе мы хочам, а потым мы хочам аніміраваць яго з дапамогай ключавых кадраў kf-slide-in, мы атрымаем непрыемны бачны скачок без кампазіцыі анімацыі. Глядзіце маркеры Pen Keyframes - Demo 9 [форк] ад Аміта Шына. З наборам анімацыі-кампазіцыі для дадання анімацыя плаўна спалучаецца з існуючайтрансфармаваць, так што элемент застаецца на месцы і ажыўляецца, як чакалася. Анімацыя Stagger Іншы спосаб апрацоўкі некалькіх анімацый - гэта "паставіць" іх у шахматным парадку - гэта значыць пачаць другую анімацыю крыху пасля заканчэння першай. Гэта не рашэнне, якое працуе ў кожным выпадку, але яно карысна, калі ў нас ёсць анімацыя ўваходу, за якой варта бесперапынная анімацыя. /* згасанне + імпульс непразрыстасці */ .апавяшчэнне { анімацыя: kf-fade-in 2s паслабленне, kf-імпульс 0,5 с 2 с лёгкасць у-выхад бясконцы альтэрнатыўны; --kf-pulse-opacity-to: 0,5; }
Глядзіце маркеры Pen Keyframes - Demo 10 [форк] ад Аміта Шына. Парадак мае значэнне Большая частка анімацыі, з якой мы працуем, выкарыстоўвае ўласцівасць transform. У большасці выпадкаў так проста зручней. Ён таксама мае перавагу ў прадукцыйнасці, паколькі анімацыю трансфармацыі можна паскараць з дапамогай GPU. Але калі мы выкарыстоўваем пераўтварэнні, мы павінны прызнаць, што парадак, у якім мы выконваем нашы пераўтварэнні, мае значэнне. шмат. У нашых ключавых кадрах да гэтага часу мы выкарыстоўвалі асобныя пераўтварэнні. У адпаведнасці са спецыфікацыямі, яны заўсёды прымяняюцца ў фіксаваным парадку: спачатку элемент перамяшчаецца, потым паварочваецца, потым маштабуецца. Гэта мае сэнс і чакае большасць з нас. Аднак, калі мы выкарыстоўваем уласцівасць пераўтварэння, парадак, у якім запісваюцца функцыі, з'яўляецца парадкам, у якім яны прымяняюцца. У гэтым выпадку, калі мы перамяшчаем што-небудзь на 100 пікселяў па восі Х, а потым паварочваем на 45 градусаў, гэта не тое самае, што спачатку павярнуць гэта на 45 градусаў, а потым перамясціць на 100 пікселяў. /* Ружовы квадрат: спачатку перакласці, потым павярнуць */ .example-one { трансфармацыя: translateX(100px) rotate(45deg); }
/* Зялёны квадрат: спачатку паварот, потым пераклад */ .example-two { пераўтварэнне: rotate(45deg) translateX(100px); }
Глядзіце маркеры Pen Keyframes - Demo 11 [форк] ад Аміта Шына. Але ў адпаведнасці з парадкам пераўтварэнняў усе асобныя пераўтварэнні - усё, што мы выкарыстоўвалі для токенаў ключавых кадраў - адбываюцца перад функцыямі пераўтварэння. Гэта азначае, што ўсё, што вы задалі ва ўласцівасці пераўтварэння, адбудзецца пасля анімацыі. Але калі вы ўсталюеце, напрыклад, пераклад разам з ключавымі кадрамі kf-spin, пераклад адбудзецца перад анімацыяй. Яшчэ заблыталіся?! Гэта прыводзіць да сітуацый, калі статычныя значэнні могуць выклікаць розныя вынікі для адной і той жа анімацыі, як у наступным выпадку:
/* Агульная анімацыя для абодвух круцёлак */ .spinner { анімацыя: kf-spin 1s лінейная бясконцая; }
/* Pink spinner: пераклад перад паваротам (індывідуальнае пераўтварэнне) */ .spinner-ружовы { пераклад: 100% 50%; }
/* Зялёны круцёлак: павярнуць, потым перавесці (парадак функцый) */ .spinner-green { пераўтварэнне: пераклад(100%, 50%); }
Глядзіце маркеры Pen Keyframes - Demo 12 [форк] ад Аміта Шына. Вы бачыце, што першая блешня (ружовая) атрымлівае трансляцыю, якая адбываецца перад паваротам 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-opacity-from, 1); } да { маштаб: var(--kf-pulse-scale-to, 1); непразрыстасць:var(--kf-pulse-opacity-to, 1); } } }
Гэта гарантуе, што карыстальнікі, якія задалі prefers-reduced-motion для памяншэння, не будуць бачыць анімацыю і атрымаюць вопыт, які адпавядае іх перавагам. Імгненны ўваход Ёсць некаторыя ключавыя кадры, якія мы не можам проста выдаліць, напрыклад анімацыю ўваходу. Значэнне павінна змяняцца, павінна ажыўляць; у адваротным выпадку элемент не будзе мець правільных значэнняў. Але пры паменшаным руху гэты пераход ад першапачатковага значэння павінен быць імгненным. Каб дасягнуць гэтага, мы вызначым дадатковы набор ключавых кадраў, у якіх значэнне адразу пераходзіць да канчатковага стану. Яны становяцца нашымі ключавымі кадрамі па змаўчанні. Затым мы дадамо звычайныя ключавыя кадры ў медыя-запыт для prefers-reduced-motion, усталяванага ў no-preference, як і ў папярэднім прыкладзе. /* імгненна ўсплывае для памяншэння руху */ @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 { /* Арыгінальныя ключавыя кадры адскоку */ } }
Цяпер карыстальнікі з уключаным памяншэннем руху па-ранейшаму адчуваюць знешні выгляд, але без інтэнсіўнага руху адскоку або пругкай анімацыі. З будаўнічымі блокамі на месцы наступнае пытанне - як зрабіць іх часткай фактычнага працоўнага працэсу. Напісанне гнуткіх ключавых кадраў - гэта адно, але каб зрабіць іх надзейнымі ў вялікім праекце, патрабуецца некалькі стратэгій, якія мне прыйшлося навучыцца на цяжкім шляху. Стратэгіі ўкаранення і лепшыя практыкі Калі ў нас будзе салідная бібліятэка токенаў ключавых кадраў, сапраўдная праблема заключаецца ў тым, як прыўнесці іх у паўсядзённую працу.
Спакуса ў тым, каб кінуць усе ключавыя кадры адразу і аб'явіць праблему вырашанай, але на практыцы я выявіў, што найлепшыя вынікі дае паступовае прыняцце. Пачніце з самых звычайных анімацый, такіх як знікненне або слізгаценне. Гэта лёгкія перамогі, якія паказваюць неадкладную каштоўнасць, не патрабуючы вялікіх перапісванняў. Неймінг - яшчэ адзін момант, які заслугоўвае ўвагі. Паслядоўны прэфікс або прастора імёнаў робіць відавочным, якія анімацыі з'яўляюцца токенамі, а якія лакальнымі аднаразовымі. Гэта таксама прадухіляе выпадковыя сутыкненні і дапамагае новым членам каманды з першага погляду распазнаваць агульную сістэму. Дакументацыя гэтак жа важная, як і сам код. Нават кароткі каментар над кожным маркерам ключавых кадраў можа зэканоміць гадзіны адгадвання пазней. Распрацоўшчык павінен мець магчымасць адкрываць файл токенаў, шукаць неабходны эфект і скапіяваць шаблон выкарыстання прама ў свой кампанент. Гнуткасць - гэта тое, што робіць гэты падыход вартым намаганняў. Выстаўляючы разумныя карыстальніцкія ўласцівасці, мы даем камандам магчымасць адаптаваць анімацыю, не парушаючы сістэму. У той жа час старайцеся не ўскладняць. Забяспечце важныя ручкі, а астатнім пакіньце меркаванне. Нарэшце, памятайце аб даступнасці. Не кожная анімацыя патрабуе альтэрнатывы паменшанага руху, але многім патрэбна. Ранняе ўнясенне гэтых карэкціровак азначае, што нам ніколі не давядзецца іх мадэрнізаваць пазней, і гэта паказвае ўзровень уважлівасці, які заўважаць нашы карыстальнікі, нават калі яны ніколі пра гэта не згадваюць.
З майго вопыту, разглядаючы маркеры ключавых кадраў як частку нашага працоўнага працэсу распрацоўкі маркераў, гэта тое, што прымушае іх прытрымлівацца. Як толькі яны знаходзяцца на месцы, яны перастаюць адчуваць сябе як спецэфекты і становяцца часткай мовы дызайну, натуральным працягам таго, як прадукт рухаецца і рэагуе. Падвядзенне вынікаў Анімацыя можа быць адной з самых радасных частак стварэння інтэрфейсаў, але без структуры яна таксама можа стаць адной з самых вялікіх крыніц расчаравання. Разглядаючы ключавыя кадры як токены, вы бераце тое, што звычайна бязладна і цяжка кіраваць, і ператвараеце гэта ў ясную, прадказальную сістэму. Рэальная каштоўнасць заключаецца не толькі ў захаванні некалькіх радкоў кода. Гэта ва ўпэўненасці, што калі вы выкарыстоўваеце знікненне, слайд, маштабаванне або кручэнне, вы дакладна ведаеце, як гэта будзе паводзіць сябе ў праекце. Гэта гнуткасць, якая зыходзіць ад карыстальніцкіх уласцівасцяў без хаосу бясконцых варыяцый. І гэта ў даступнасці, закладзенай у аснову, а не дададзенай якзапозненая думка. Я бачыў, як гэтыя ідэі працуюць у розных камандах і розных кодавых базах, і шаблон заўсёды аднолькавы. Пасля таго, як токены ўстаноўлены, ключавыя кадры перастаюць быць разрозненай калекцыяй прыёмаў і становяцца часткай мовы дызайну. Яны робяць прадукт больш наўмысным, больш паслядоўным і больш жывым. Калі ўзяць з гэтага артыкула адну рэч, няхай гэта будзе так: анімацыя заслугоўвае такой жа ўвагі і структуры, якую мы ўжо надаём колерам, тыпаграфіке і інтэрвалам. Невялікія інвестыцыі ў токены ключавых кадраў акупляюцца кожны раз, калі ваш інтэрфейс рухаецца.
