Замислете го ова: се придружувате на нов проект, се нурнувате во базата на кодови и во првите неколку часа откривате нешто фрустрирачки познато. Расфрлани низ листовите со стилови, наоѓате повеќе @keyframes дефиниции за истите основни анимации. Три различни ефекти за избледување, две или три варијации на слајдови, неколку анимации за зумирање и најмалку две различни анимации за вртење затоа што, добро, зошто да не? @keyframes пулс { од { скала: 1; } до { размер: 1,1; } }
@keyframes поголем-пулс { 0%, 20%, 100% { скала: 1; } 10%, 40% { размер: 1,2; } }
Ако ова сценарио ви звучи познато, не сте сами. Според моето искуство во различни проекти, една од најконзистентните брзи добивки што можам да ја испорачам е консолидирање и стандардизирање на клучните рамки. Стана толку сигурен модел што сега со нетрпение го очекувам ова чистење како една од моите први задачи на која било нова база на кодови. Логиката зад хаосот Овој вишок има совршена смисла кога ќе размислите за тоа. Сите ние ги користиме истите основни анимации во нашата секојдневна работа: бледнее, слајдови, зумирање, вртења и други вообичаени ефекти. Овие анимации се прилично јасни и лесно е да се подготви брза дефиниција @keyframes за да се заврши работата. Без централизиран систем за анимација, програмерите природно ги пишуваат овие клучни рамки од нула, несвесни дека слични анимации веќе постојат на друго место во базата на кодови. Ова е особено вообичаено кога работите во архитектури базирани на компоненти (што повеќето од нас го прават овие денови), бидејќи тимовите често работат паралелно низ различни делови од апликацијата. Резултатот? Анимациски хаос. Малиот проблем Најочигледните проблеми со дуплирањето на клучните кадри се залудно потрошено време за развој и непотребното надуеност на кодот. Повеќекратните дефиниции за клучни кадри значат повеќе места за ажурирање кога се менуваат барањата. Дали треба да го прилагодите времето на вашата избледена анимација? Ќе треба да го пронајдете секој примерок низ вашата база на кодови. Сакате да ги стандардизирате функциите за олеснување? Среќно да ги пронајдете сите варијации. Ова множење на точките за одржување ги прави дури и едноставните ажурирања на анимацијата задача која одзема многу време. Поголемиот проблем Ова дуплирање на клучните кадри создава многу поподмолен проблем што се крие под површината: стапицата на глобалниот опсег. Дури и кога се работи со архитектури базирани на компоненти, клучните рамки CSS секогаш се дефинирани во глобалниот опсег. Ова значи дека сите клучни рамки се применуваат на сите компоненти. Секогаш. Да, вашата анимација не мора да ги користи клучните рамки што сте ги дефинирале во вашата компонента. Ги користи последните клучни рамки што одговараат на истото име што беа вчитани во глобалниот опсег. Сè додека сите ваши клучни рамки се идентични, ова може да изгледа како помал проблем. Но, во моментот кога сакате да приспособите анимација за одреден случај на употреба, вие сте во неволја или уште полошо, вие ќе ги предизвикате. Или вашата анимација нема да работи затоа што друга компонента е вчитана по вашата, препишувајќи ги клучните кадри или вашата компонента се вчитува и случајно го менува однесувањето на анимацијата за секоја друга компонента што го користи името на таа клучна рамка, а вие можеби нема ни да го сфатите. Еве едноставен пример кој го покажува проблемот: .компонента-еден { /* стилови на компоненти */ анимација: пулс 1s ease-in-out бесконечна алтернативна; }
/* оваа дефиниција @keyframes нема да работи */ @keyframes пулс { од { скала: 1; } до { размер: 1,1; } }
/* подоцна во кодот... */
.компонента-втора { /* стилови на компоненти */ анимација: пулс 1s ease-in-out infinite; }
/* овие клучни рамки ќе се применуваат на двете компоненти */ @keyframes пулс { 0%, 20%, 100% { скала: 1; } 10%, 40% { размер: 1,2; } }
Двете компоненти го користат истото име на анимација, но втората дефиниција @keyframes ја препишува првата. Сега и компонента-еден и компонента-два ќе ги користат вторите клучни рамки, без оглед на тоа која компонента ги дефинирала клучните рамки. Видете ги токените за клучни рамки за пенкало - Демо 1 [заглавена] од Амит Шин. Најлошиот дел? Ова често функционира совршено во локалниот развој, но мистериозно се распаѓа во производството кога процесите на градење го менуваат редоследот на вчитување на вашите листови со стилови. Завршувате со анимации кои се однесуваат поинаку во зависност од тоа кои компоненти се вчитани и во која секвенца. Решението: унифицирани клучни рамки Одговорот на овој хаос е изненадувачки едноставен: предефинирани динамични клучни кадри складирани во заеднички лист со стилови. Наместо да дозволиме секоја компонента да ги дефинира своите анимации, ние создаваме централизирани клучни рамки кои се добро документирани, лесни заупотреба, одржување и приспособена на специфичните потреби на вашиот проект. Сфатете го тоа како токени за клучни рамки. Исто како што користиме токени за бои и растојание, а многумина од нас веќе користат токени за својства на анимација, како што се функциите за времетраење и олеснување, зошто да не користиме токени и за клучни кадри? Овој пристап може природно да се интегрира со секој тековен работен тек на дизајнерски токени што го користите, а истовремено да ги решавате и малиот проблем (дуплирање на кодови) и поголемиот проблем (конфликти на глобален опсег). Идејата е јасна: создадете единствен извор на вистина за сите наши заеднички анимации. Овој споделен лист со стилови содржи внимателно изработени клучни кадри кои ги покриваат шемите на анимација што всушност ги користи нашиот проект. Нема повеќе да погодувате дали бледнее анимација веќе постои некаде во нашата база на кодови. Нема повеќе случајно препишување анимации од други компоненти. Но, тука е клучот: ова не се само статични анимации со copy-paste. Дизајнирани се да бидат динамични и приспособливи преку сопствените својства на 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 ги заменува сите оние расфрлани бледнеат анимации низ нашата база на кодови. Чисто, едноставно и глобално применливо. И сега кога го имаме дефинирано овој токен, можеме да го користиме од која било компонента во текот на нашиот проект: .модал { анимација: kf-fade-in 0,3s ease-out; }
.tooltip { анимација: kf-fade-in 0,2s ease-in-out; }
.известување { анимација: kf-fade-in 0,5s ease-out; }
Видете ги токените за клучни рамки за пенкало - Демо 2 [заглавена] од Амит Шин. Забелешка: ние користиме префикс kf- во сите наши имиња @keyframes. Овој префикс служи како именски простор кој спречува конфликти на именување со постојните анимации во проектот и веднаш дава до знаење дека овие клучни рамки доаѓаат од нашата датотека со токени за клучни рамки. Изработка на динамичен слајд Клучните рамки со kf-fade-in функционираат одлично бидејќи се едноставни и има малку простор да се збркаат работите. Во другите анимации, сепак, треба да бидеме многу подинамични и тука можеме да ја искористиме огромната моќ на сопствените својства на CSS. Ова е местото каде што токените на клучните кадри навистина сјаат во споредба со расфрланите статични анимации. Ајде да земеме заедничко сценарио: анимации со „slide-in“. Но, лизнете од каде? 100 пиксели оддесно? 50% од лево? Дали треба да влезе од горниот дел на екранот? Или можеби лебди од дното? Толку многу можности, но наместо да создаваме посебни клучни рамки за секоја насока и секоја варијација, можеме да изградиме еден флексибилен токен кој се прилагодува на сите сценарија: /* * Slide In - насочена анимација на слајд * Користете --kf-slide-f за да ја контролирате насоката * Стандардно: се лизга од лево (-100%) * Употреба: * анимација: kf-slide-in 0,3s ease-out; * --kf-слајд-од: -100px 0; // лизгај од лево * --kf-слајд-од: 100px 0; // лизгај од десно * --kf-слајд-од: 0 -50px; // лизгајте од врвот */
@keyframes kf-slide-in { од { преведи: var(--kf-слајд-од, -100% 0); } до { преведи: 0 0; } }
Сега можеме да го користиме овој единечен @keyframes токен за која било насока на слајдот едноставно со менување на приспособеното својство --kf-slide-from: .странична лента { анимација: kf-slide-in 0,3s ease-out; /* Користи стандардна вредност: лизга од лево */ }
.известување { анимација: kf-slide-in 0,4s ease-out; --kf-слајд-од: 0 -50px; /* слајд од врвот */ }
.модал { анимација: kf-бледнее во 0,5 секунди, kf-slide-in 0,5s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-слајд-од: 50px 50px; /* слајд од долу-десно */ }
Овој пристап ни дава неверојатна флексибилност додека ја одржуваме конзистентноста. Една декларација на клучна рамка, бесконечни можности. Видете ги токените за клучни рамки за пенкало - Демо 3 [заглавена] од Амит Шин. И ако сакаме да ги направиме нашите анимации уште пофлексибилни, овозможувајќи и ефекти на „лизгање“, можемеедноставно додадете --kf-slide-во приспособено својство, слично на она што ќе го видиме во следниот дел. Клучни рамки со двонасочно зумирање Друга вообичаена анимација што се дуплира низ проектите се ефектите на „зумирање“. Без разлика дали станува збор за суптилно зголемување на тост пораките, драматично зумирање за модали или нежен ефект на намалување за наслови, анимациите за зумирање се насекаде. Наместо да создаваме посебни клучни рамки за секоја вредност на скалата, ајде да изградиме еден флексибилен сет на клучни кадри со kf-zoom:
/* * Зум - скала анимација * Користете --kf-zoom-from и --kf-zoom-to за да ги контролирате вредностите на скалата * Стандардно: зумира од 80% до 100% (0,8 до 1) * Употреба: * анимација: kf-zoom 0,2s ease-out; * --kf-зум-од: 0,5; --kf-зум-до: 1; // зум од 50% до 100% * --kf-зум-од: 1; --kf-зум-до: 0; // зум од 100% до 0% * --kf-зум-од: 1; --kf-зум-до: 1,1; // зум од 100% до 110% */
@keyframes kf-zoom { од { скала: var(--kf-зум-од, 0,8); } до { скала: var(--kf-зум-до, 1); } }
Со една дефиниција, можеме да постигнеме каква било варијација на зумирање што ни треба: .тост { анимација: kf-slide-in 0,2s, kf-зум 0,4s олеснување; --kf-слајд-од: 0 100%; /* слајд од врвот */ /* Користи стандардно зумирање: скали од 80% до 100% */ }
.модал { анимација: kf-zoom 0,3s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-зум-од: 0; /* драматично зумирање од 0% до 100% */ }
.наслов { анимација: kf-fade-in 2s, kf-zoom 2s ease-in; --kf-зум-од: 1,2; --kf-зум-до: 0,8; /* нежно намалување */ }
Стандардно од 0,8 (80%) функционира совршено за повеќето елементи на корисничкиот интерфејс, како што се пораките за тост и картичките, а сепак лесно се прилагодува за посебни случаи. Видете ги токените за клучни рамки за пенкало - Демо 4 [заглавена] од Амит Шин. Можеби сте забележале нешто интересно во неодамнешните примери: комбиниравме анимации. Една од клучните предности на работата со @keyframes токените е тоа што тие се дизајнирани да се интегрираат беспрекорно еден со друг. Оваа мазна композиција е намерна, не случајна. Подоцна ќе разговараме подетално за составот на анимацијата, вклучително и каде тие можат да станат проблематични, но повеќето комбинации се едноставни и лесни за имплементација. Забелешка: Додека ја пишував оваа статија, а можеби и поради тоа што ја пишував, се најдов себеси како ја преиспитувам целата идеја за влезните анимации. Со сите неодамнешни достигнувања во CSS, дали сè уште ни се потребни? За среќа, Адам Аргил ги истражуваше истите прашања и брилијантно ги изрази во својот блог. Ова не е во спротивност со она што е напишано овде, но претставува пристап што вреди да се размисли, особено ако вашите проекти во голема мера се потпираат на влезните анимации. Континуирани анимации Додека влезните анимации, како „избледи“, „слајд“ и „зумирање“ се случуваат еднаш, а потоа запираат, континуираните анимации се вртат неодредено за да привлечат внимание или да укажат на тековната активност. Двете најчести континуирани анимации што ги среќавам се „спин“ (за вчитување индикатори) и „пулс“ (за истакнување важни елементи). Овие анимации претставуваат уникатни предизвици кога станува збор за создавање токени за клучни рамки. За разлика од влезните анимации кои обично одат од една состојба во друга, континуираните анимации треба да бидат високо приспособливи во нивните модели на однесување. Спин докторот Се чини дека секој проект користи повеќе спин анимации. Некои се вртат во насока на стрелките на часовникот, други спротивно. Некои прават една ротација од 360 степени, други прават повеќекратни вртења за побрз ефект. Наместо да создаваме посебни клучни рамки за секоја варијација, ајде да изградиме едно флексибилно вртење што се справува со сите сценарија:
/* * Спин - анимација со ротација * Користете --kf-spin-from и --kf-spin-to за да го контролирате опсегот на ротација * Користете --kf-spin-turns за да ја контролирате количината на ротација * Стандардно: ротира од 0 до 360 степени (1 целосна ротација) * Употреба: * анимација: kf-spin 1s линеарна бесконечна; * --kf-врти-врти: 2; // 2 целосни ротации * --kf-спин-од: 0 степени; --kf-спин-до: 180 степени; // половина ротација * --kf-спин-од: 0 степени; --kf-спин-до: -360 степени; // спротивно од стрелките на часовникот */
@keyframes kf-spin { од { ротирање: var(--kf-спин-од, 0 степени); } до { ротирање: калц(var(--kf-врти-од, 0 степени) + var(--kf-врти-до, 360 степени) * var(--kf-врти-врти, 1)); } }
Сега можеме да создадеме која било варијација на вртење што ни се допаѓа:
.loading-spinner { анимација: kf-spin 1s линеарна бесконечна; /* Користи стандардно: ротира од 0 до 360 степени */ }
.fast-loader { анимација: kf-spin 1.2s ease-in-out бесконечна алтернативна; --kf-врти-врти: 3; /* 3 целосни ротации за секоја насока по циклус*/ }
.steped-reverse { анимација: kf-spin 1,5s step(8) infinite; --kf-спин-до: -360 степени; /* спротивно од стрелките на часовникот */ }
.суптилно-wiggle { анимација: kf-spin 2s ease-in-out бесконечна алтернативна; --kf-спин-од: -16степени; --kf-спин-до: 32 степени; /* мрдање 36 степени: помеѓу -18 степени и +18 степени */ }
Видете ги токените за клучни рамки за пенкало - Демо 5 [закопчана] од Амит Шин. Убавината на овој пристап е во тоа што истите клучни кадри работат за вчитување на вртежи, ротирачки икони, ефекти на движење, па дури и сложени анимации со повеќе вртења. Парадоксот на пулсот Пулсовите анимации се покомплицирани бидејќи можат да „пулсираат“ различни својства. Некои ја пулсираат скалата, други ја пулсираат непроѕирноста, а некои својства на бојата на пулсот како осветленост или заситеност. Наместо да создаваме посебни клучни рамки за секое својство, можеме да креираме клучни рамки кои работат со кое било својство на CSS. Еве пример за пулсна клучна рамка со опции за размер и непроѕирност:
/* * Пулс - пулсирачка анимација * Користете --kf-pulse-scale-from и --kf-pulse-scale-to за да го контролирате опсегот на скалата * Користете --kf-pulse-opacity-from и --kf-pulse-opacity-to за да го контролирате опсегот на непроѕирност * Стандардно: без пулс (сите вредности 1) * Употреба: * анимација: kf-pulse 2s ease-in-out бесконечна алтернативна; * --kf-пулсна скала-од: 0,95; --kf-пулс-скала-до: 1,05; // скала пулс * --kf-пулс-непроѕирност-од: 0,7; --kf-пулс-непроѕирност-до: 1; // пулс на непроѕирност */
@keyframes kf-pulse { од { скала: var(--kf-пулсна скала-од, 1); непроѕирност: var(--kf-пулс-непроѕирност-од, 1); } до { скала: var(--kf-пулс-скала-до, 1); непроѕирност: var(--kf-пулс-непроѕирност-до, 1); } }
Ова создава флексибилен пулс кој може да анимира повеќе својства: .повик за акција { анимација: kf-пулс 0,6s бесконечна алтернативна; --kf-пулс-непроѕирност-од: 0,5; /* пулс на непроѕирност */ }
.notification-dot { анимација: kf-pulse 0,6s ease-in-out бесконечна алтернативна; --kf-пулсна скала-од: 0,9; --kf-пулс-скала-до: 1,1; /* скала пулс */ }
.text-highlight { анимација: kf-pulse 1,5s ease-out infinite; --kf-пулсна скала-од: 0,8; --kf-пулс-непроѕирност-од: 0,2; /* скала и пулс на непроѕирност */ }
Видете ги токените за клучни рамки за пенкало - Демо 6 [заглавена] од Амит Шин. Оваа единечна kf-пулсна клучна рамка може да се справи со сè, од суптилно привлекување внимание до драматични моменти, а сето тоа е лесно да се приспособи. Напредно олеснување Една од одличните работи за користење на токени за клучни кадри е колку е лесно да се прошири нашата библиотека за анимација и да се обезбедат ефекти што повеќето програмери не би се мачат да ги напишат од почеток, како што се еластични или отскокнувачки. Еве пример за едноставен токен за клучни рамки „отскокнување“ кој користи својство --kf-bounce-from прилагодено за да ја контролира висината на скокот. /* * Отскокнување - скокачка влезна анимација * Користете --kf-bounce-from за да ја контролирате висината на скокот * Стандардно: скока од 100 Vh (исклучен екран) * Употреба: * анимација: kf-bounce 3s ease-in; * --kf-отскокнување-од: 200px; // скок од висина од 200 пиксели */
@keyframes kf-bounce { 0% { преведи: 0 калц(var(--kf-отскокнување-од, 100vh) * -1); }
34% { преведи: 0 калц(var(--kf-отскокнување-од, 100vh) * -0,4); }
55% { преведи: 0 калц(var(--kf-отскокнување-од, 100vh) * -0,2); }
72% { преведи: 0 калц(var(--kf-отскокнување-од, 100vh) * -0,1); }
85% { преведи: 0 калц(var(--kf-отскокнување-од, 100vh) * -0,05); }
94% { преведи: 0 калц(var(--kf-отскокнување-од, 100vh) * -0,025); }
99% { преведи: 0 калц(var(--kf-отскокнување-од, 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-еластик-од-X: -50px; * --kf-еластик-од-Y: -200px; // внесете од (-50px, -200px) */
@keyframes kf-elastic-in { 0% { преведи: калц(var(--kf-еластична-од-X, -50vw) * 1) калц(var(--kf-еластична-од-Y, 0px) * 1); }
16% { преведи: калц(var(--kf-еластик-од-X, -50vw) * -0,3227) калц(var(--kf-еластик-од-Y, 0px) * -0,3227); }
28% { преведи: калц(var(--kf-еластик-од-X, -50vw) * 0,1312)калц(var(--kf-еластик-од-Y, 0px) * 0,1312); }
44% { преведи: калц(var(--kf-еластик-од-X, -50vw) * -0,0463) калц(var(--kf-еластик-од-Y, 0px) * -0,0463); }
59% { преведи: калц(var(--kf-еластична-од-X, -50vw) * 0,0164) калц(var(--kf-еластична-од-Y, 0px) * 0,0164); }
73% { преведи: калц(var(--kf-еластична-од-X, -50vw) * -0,0058) калц(var(--kf-еластична-од-Y, 0px) * -0,0058); }
88% { преведи: калц(var(--kf-еластична-од-X, -50vw) * 0,0020) калц(var(--kf-еластична-од-Y, 0px) * 0,0020); }
100% { преведи: 0 0; } }
Овој пристап го олеснува повторното користење и приспособувањето на напредните клучни рамки низ нашиот проект, само со промена на една приспособена карактеристика.
.отскокнување и зумирање { анимација: kf-bounce 3s ease-in, kf-zoom 3s линеарен; --kf-зум-од: 0; }
.отскокнување и лизгање { анимација-композиција: додадете; /* И двете анимации користат превод */ анимација: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-слајд-од: -200px; }
.elastic-in { анимација: kf-elastic-in 2s ease-in-out и двете; }
Видете ги токените за клучни рамки за пенкало - Демо 7 [закопчана] од Амит Шин. До овој момент, видовме како можеме да ги консолидираме клучните кадри на паметен и ефикасен начин. Се разбира, можеби ќе сакате да ги измените работите за подобро да одговараат на потребите на вашиот проект, но опфативме примери на неколку вообичаени анимации и случаи за секојдневна употреба. И со овие токени за клучни рамки, сега имаме моќни градежни блокови за создавање конзистентни, одржувани анимации низ целиот проект. Нема повеќе дупликати клучни рамки, нема повеќе конфликти со глобален опсег. Само чист, удобен начин да се справиме со сите наши потреби за анимација. Но, вистинското прашање е: Како да ги составиме овие градежни блокови заедно? Составување на сето тоа заедно Видовме дека комбинирањето на основни токени за клучни рамки е едноставно. Не ни треба ништо посебно освен да ја дефинираме првата анимација, да ја дефинираме втората, да ги поставиме променливите по потреба и тоа е тоа. /* Fade in + slide in */ .тост { анимација: kf-fade-in 0,4s, kf-slide-in 0,4s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-слајд-од: 0 40px; }
/* Зумирајте + избледи */ .модал { анимација: kf-fade-in 0,3s, kf-зум 0,3s кубни-безиер(0,34, 1,56, 0,64, 1); --kf-зум-од: 0,7; --kf-зум-до: 1; }
/* Слајд во + пулс */ .известување { анимација: kf-slide-in 0,5s, kf-pulse 1.2s ease-in-out бесконечна алтернативна; --kf-слајд-од: -100px 0; --kf-пулсна скала-од: 0,95; --kf-пулс-скала-до: 1,05; }
Овие комбинации функционираат прекрасно затоа што секоја анимација цели на различно својство: непроѕирност, трансформација (преведи/скала) итн. Но понекогаш има конфликти и треба да знаеме зошто и како да се справиме со нив. Кога две анимации се обидуваат да го анимираат истото својство - на пример, обете размери за анимирање или обете анимирање непроѕирност - резултатот нема да биде онаков каков што очекувате. Стандардно, само една од анимациите всушност се применува на тоа својство, кое е последно во списокот со анимации. Ова е ограничување за тоа како CSS се справува со повеќе анимации на исто својство. На пример, ова нема да работи како што е замислено затоа што ќе се применува само анимацијата на kf-пулсот. .лошо-комбо { анимација: kf-зум 0,5 секунди напред, kf-пулс 1,2s бесконечна алтернативна; --kf-зум-од: 0,5; --kf-зум-до: 1,2; --kf-пулсна скала-од: 0,8; --kf-пулс-скала-до: 1,1; }
Додаток за анимација Наједноставниот и најдиректен начин за ракување со повеќе анимации кои влијаат на исто својство е да се користи својството анимација-композиција. Во последниот пример погоре, kf-pulse анимацијата ја заменува анимацијата kf-zoom, така што нема да го видиме почетниот зум и нема да ја добиеме очекуваната скала до 1,2. Со поставување на композицијата-анимација за додавање, му кажуваме на прелистувачот да ги комбинира двете анимации. Ова ни го дава резултатот што го сакаме. .компонента-втора { анимација-композиција: додадете; }
Видете ги токените за клучни рамки за пенкало - Демо 8 [закопчана] од Амит Шин. Овој пристап добро функционира за повеќето случаи кога сакаме да комбинираме ефекти на истото својство. Исто така е корисно кога треба да комбинираме анимации со статични вредности на својствата. На пример, ако имаме елемент што го користи својството translate за да го позиционира точно каде што сакаме, а потоа сакаме да го анимираме со клучните кадри од kf-slide-in, добиваме непријатен видлив скок без анимација-композиција. Видете ги токените за клучни рамки за пенкало - Демо 9 [закопчана] од Амит Шин. Со поставеноста на анимација-композиција за додавање, анимацијата непречено се комбинира со постоечкататрансформира, па елементот останува на своето место и анимира како што се очекуваше. Анимација тетерави Друг начин на ракување со повеќе анимации е да ги „затетерате“ - односно, да ја започнете втората анимација малку откако ќе заврши првата. Тоа не е решение кое функционира за секој случај, но е корисно кога имаме влезна анимација проследена со континуирана анимација. /* бледнее во + пулсот на непроѕирност */ .известување { анимација: kf-fade-in 2s ease-out, kf-пулс 0,5s 2s ease-in-out бесконечна алтернативна; --kf-пулс-непроѕирност-до: 0,5; }
Видете ги токените за клучни рамки за пенкало - демо 10 [закопчана] од Амит Шин. Редот е важен Голем дел од анимациите со кои работиме го користат својството transform. Во повеќето случаи, ова е едноставно поудобно. Исто така, има предност во изведбата бидејќи анимациите за трансформација можат да се забрзаат со графички процесор. Но, ако користиме трансформации, треба да прифатиме дека е важен редоследот по кој ги извршуваме нашите трансформации. Многу. Во нашите клучни рамки досега, користевме индивидуални трансформации. Според спецификациите, тие секогаш се применуваат во фиксен редослед: прво, елементот добива превод, потоа ротира, па скала. Ова има смисла и е она што повеќето од нас го очекуваат. Меѓутоа, ако го користиме својството за трансформација, редоследот по кој се запишуваат функциите е редоследот по кој тие се применуваат. Во овој случај, ако поместиме нешто за 100 пиксели на X-оската и потоа го ротираме за 45 степени, тоа не е исто како прво да го ротираме за 45 степени, а потоа да го преместиме за 100 пиксели. /* Розов квадрат: прво преведете, а потоа ротирајте */ .пример-еден { transform: translateX(100px) rotate(45deg); }
/* Зелен квадрат: Прво ротирајте, потоа преведете */ .пример-два { transform: rotate(45deg) translateX(100px); }
Видете ги токените за клучни рамки за пенкало - Демо 11 [заглавена] од Амит Шин. Но, според редоследот на трансформациите, сите индивидуални трансформации - сè што користевме за токените на клучните рамки - се случуваат пред функциите на трансформацијата. Тоа значи дека сè што ќе поставите во својството за трансформација ќе се случи по анимациите. Но, ако поставите, на пример, преведување заедно со клучните кадри од kf-spin, преводот ќе се случи пред анимацијата. Уште збунети?! Ова доведува до ситуации каде што статичките вредности може да предизвикаат различни резултати за иста анимација, како во следниот случај:
/* Заедничка анимација за двата спинери */ .спинер { анимација: kf-spin 1s линеарна бесконечна; }
/* Пинк спиннер: преведи пред ротирање (индивидуална трансформација) */ .спинер-розова { преведи: 100% 50%; }
/* Зелено вртење: ротирајте, па преведете (редослед на функции) */ .спинер-зелена { transform: translate(100%, 50%); }
Видете ги токените за клучни рамки за пенкало - Демо 12 [заглавена] од Амит Шин. Може да се види дека првиот спиннер (розов) добива превод што се случува пред ротирањето на kf-спин, па прво се движи на своето место, а потоа се врти. Вториот спиннер (зелен) добива функција translate() која се случува по индивидуалната трансформација, па елементот прво се врти, потоа се движи во однос на неговиот моментален агол и го добиваме ефектот на широка орбита. Не, ова не е грешка. Тоа е само една од оние работи што треба да ги знаеме за CSS и да ги имаме на ум кога работиме со повеќе анимации или повеќе трансформации. Доколку е потребно, можете исто така да креирате дополнителен сет на клучни рамки kf-spin-alt кои ротираат елементи користејќи ја функцијата rotate(). Намалено движење И додека зборуваме за алтернативни клучни рамки, не можеме да ја игнорираме опцијата „без анимација“. Една од најголемите предности на користењето токени за клучни рамки е тоа што може да се испече пристапноста, а всушност е прилично лесно да се направи. Со дизајнирање на нашите клучни кадри имајќи ја предвид пристапноста, можеме да обезбедиме корисниците кои претпочитаат намалено движење да добијат помазно, помалку оттргнувачко искуство, без дополнителна работа или дуплирање на кодови. Точното значење на „Reduced Motion“ може малку да се промени од една анимација во друга и од проект до проект, но еве неколку важни точки што треба да ги имате на ум: Исклучување на клучни рамки Додека некои анимации може да се ублажат или успорат, има и други што треба целосно да исчезнат кога се бара намалено движење. Импулсните анимации се добар пример. За да се осигураме дека овие анимации не работат во режим на намалено движење, можеме едноставно да ги завиткаме во соодветното барање за медиум.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { од { скала: var(--kf-пулсна скала-од, 1); непроѕирност: var(--kf-пулс-непроѕирност-од, 1); } до { скала: var(--kf-пулс-скала-до, 1); непроѕирност:var (--kf-пулс-непроѕирност-до, 1); } } }
Ова осигурува дека корисниците кои поставиле претпочитано-намалено-движење за намалување, нема да ја видат анимацијата и ќе добијат искуство што одговара на нивните преференции. Инстант Влез Има некои клучни рамки што не можеме едноставно да ги отстраниме, како што се анимациите на влезот. Вредноста мора да се промени, мора да анимира; во спротивно, елементот нема да ги има точните вредности. Но, при намалено движење, овој премин од почетната вредност треба да биде моментален. За да го постигнеме ова, ќе дефинираме дополнителен сет на клучни рамки каде што вредноста скока веднаш до крајната состојба. Тие стануваат наши стандардни клучни рамки. Потоа, ќе ги додадеме редовните клучни рамки во барањето за медиум за претпочитано-намалено движење поставено на без претпочитање, исто како во претходниот пример. /* се појавува веднаш за намалено движење */ @keyframes kf-zoom { од, до { скала: var(--kf-зум-до, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Оригинални клучни рамки за зумирање */ @keyframes kf-zoom { од { скала: var(--kf-зум-од, 0,8); } до { скала: var(--kf-зум-до, 1); } } }
На овој начин, корисниците кои претпочитаат намалено движење ќе видат дека елементот се појавува веднаш во неговата конечна состојба, додека сите останати ја добиваат анимираната транзиција. Мекиот пристап Има случаи каде што сакаме да задржиме некое движење, но многу помеко и помирно од оригиналната анимација. На пример, можеме да го замениме влезот за отскокнување со нежно избледување.
@keyframes kf-bounce { /* Меко бледнее за намалено движење */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Оригинални клучни рамки за отскокнување */ } }
Сега, корисниците со овозможено намалено движење сè уште добиваат чувство за изглед, но без интензивно движење на отскокнување или еластична анимација. Со воспоставување на градежни блокови, следното прашање е како да се направат дел од вистинскиот работен тек. Пишувањето флексибилни клучни рамки е една работа, но нивното правење доверливи во голем проект бара неколку стратегии кои морав да ги научам на потешкиот начин. Стратегии за имплементација и најдобри практики Откако ќе имаме солидна библиотека со токени за клучни рамки, вистинскиот предизвик е како да ги внесеме во секојдневната работа.
Искушението е да се исфрлат сите клучни кадри одеднаш и да се прогласи за решен проблемот, но во пракса открив дека најдобрите резултати доаѓаат од постепеното усвојување. Започнете со најчестите анимации, како што се избледување или слајд. Ова се лесни победи кои покажуваат непосредна вредност без да бараат големи препишувања. Именувањето е уште една точка што заслужува внимание. Конзистентен префикс или именски простор прави очигледно кои анимации се токени, а кои локални еднократни. Исто така, спречува случајни судири и им помага на новите членови на тимот да го препознаат споделениот систем на прв поглед. Документацијата е исто толку важна како и самиот код. Дури и краток коментар над секој токен за клучни кадри може да заштеди часови на погодување подоцна. Програмерот треба да може да ја отвори датотеката со токени, да го скенира ефектот што му е потребен и да ја копира шемата за користење директно во нивната компонента. Флексибилноста е она што го прави овој пристап вреден напорот. Со изложување на разумни сопствени својства, им даваме простор на тимовите да ја приспособат анимацијата без да го нарушат системот. Во исто време, обидете се да не се комплицирате премногу. Обезбедете ги копчињата што се важни и држете ги останатите со мислење. Конечно, запомнете ја пристапноста. На секоја анимација не и е потребна алтернатива со намалено движење, но на многумина им треба. Раното печење во овие прилагодувања значи дека никогаш нема да мораме да ги реконструираме подоцна и покажува ниво на грижа што нашите корисници ќе го забележат дури и ако никогаш не го спомнат.
Според моето искуство, третирањето на токените на клучни рамки како дел од нашиот работен тек на токени за дизајн е она што ги прави да се држат. Откако ќе се постават, тие престануваат да се чувствуваат како специјални ефекти и стануваат дел од дизајнерскиот јазик, природно продолжение на тоа како производот се движи и реагира. Завиткување Анимациите можат да бидат еден од најрадосните делови на градењето интерфејси, но без структура, тие исто така можат да станат еден од најголемите извори на фрустрација. Со третирање на клучните кадри како токени, вие земате нешто што е обично неуредно и тешко за управување и го претворате во јасен, предвидлив систем. Вистинската вредност не е само во зачувувањето на неколку линии код. Довербата е дека кога користите бледнее, лизгање, зумирање или центрифугирање, точно знаете како ќе се однесува во целиот проект. Тоа е во флексибилноста што доаѓа од сопствените својства без хаосот на бескрајните варијации. И тоа е во пристапноста вградена во основата наместо додадена какопоследователна мисла. Сум видел дека овие идеи функционираат во различни тимови и различни бази на кодови, а шемата е секогаш иста. Штом токените ќе бидат поставени, клучните кадри престануваат да бидат расфрлана збирка на трикови и стануваат дел од дизајнерскиот јазик. Тие прават производот да се чувствува понамерен, поконзистентен и пожив. Ако земете една работа од оваа статија, нека биде ова: анимациите ја заслужуваат истата грижа и структура што веќе им ја даваме на боите, типографијата и растојанието. Мала инвестиција во токени за клучни рамки се исплати секогаш кога вашиот интерфејс се движи.
