Замислите ово: придружите се новом пројекту, зароните у базу кода и у првих неколико сати откријете нешто фрустрирајуће познато. Расути по листама стилова, наћи ћете више дефиниција @кеифрамес за исте основне анимације. Три различита ефекта затамњења, две или три варијације слајдова, прегршт анимација зумирања и најмање две различите анимације окретања, јер, па, зашто не? @кеифрамес пулс { од { скала: 1; } до { размера: 1,1; } }
@кеифрамес биггер-пулсе { 0%, 20%, 100% { скала: 1; } 10%, 40% { размера: 1,2; } }
Ако вам овај сценарио звучи познато, нисте сами. По мом искуству у различитим пројектима, једна од најдоследнијих брзих победа које могу да остварим је консолидација и стандардизација кључних кадрова. Постао је тако поуздан образац да се сада радујем овом чишћењу као једном од мојих првих задатака на било којој новој бази кода. Логика иза хаоса Овај вишак има савршеног смисла када размислите о томе. Сви користимо исте основне анимације у нашем свакодневном раду: бледи, слајдови, зумирања, окретања и други уобичајени ефекти. Ове анимације су прилично једноставне и лако је направити брзу дефиницију @кеифрамес да бисте обавили посао. Без централизованог система анимације, програмери природно пишу ове кључне кадрове од нуле, несвесни да сличне анимације већ постоје негде другде у бази кода. Ово је посебно уобичајено када се ради у архитектури заснованој на компонентама (што већина нас ради ових дана), пошто тимови често раде паралелно у различитим деловима апликације. Резултат? Анимациони хаос. Мали проблем Најочигледнији проблеми са дуплирањем кључних кадрова су изгубљено време развоја и непотребно надувавање кода. Више дефиниција кључних кадрова значе више места за ажурирање када се захтеви промене. Требате да прилагодите тајминг анимације бледења? Мораћете да уловите сваку инстанцу у вашој бази кодова. Желите да стандардизујете функције ублажавања? Срећно у проналажењу свих варијација. Ово множење поена одржавања чини чак и једноставна ажурирања анимације дуготрајним задатком. Већи проблем Ово дуплирање кључних кадрова ствара много подмуклији проблем који се крије испод површине: замку глобалног опсега. Чак и када радите са архитектурама заснованим на компонентама, ЦСС кључни кадрови су увек дефинисани у глобалном опсегу. То значи да се сви кључни кадрови примењују на све компоненте. Увек. Да, ваша анимација не користи нужно кључне кадрове које сте дефинисали у својој компоненти. Користи последње кључне кадрове који се подударају са истим именом који су учитани у глобални опсег. Све док су сви ваши кључни кадрови идентични, ово може изгледати као мањи проблем. Али у тренутку када желите да прилагодите анимацију за одређени случај употребе, у невољи сте, или још горе, ви ћете бити тај који их узрокује. Или ваша анимација неће функционисати јер се друга компонента учитава после ваше, замењујући ваше кључне кадрове, или се ваша компонента учитава последња и случајно мења понашање анимације за сваку другу компоненту користећи име тог кључног кадра, а ви то можда нисте ни свесни. Ево једноставног примера који показује проблем: .цомпонент-оне { /* стилови компоненти */ анимација: пулс 1с еасе-ин-оут бесконачно алтернативно; }
/* ова @кеифрамес дефиниција неће радити */ @кеифрамес пулс { од { скала: 1; } до { размера: 1,1; } }
/* касније у коду... */
.цомпонент-тво { /* стилови компоненти */ анимација: пулс 1с еасе-ин-оут бесконачан; }
/* ови кључни кадрови ће се применити на обе компоненте */ @кеифрамес пулс { 0%, 20%, 100% { скала: 1; } 10%, 40% { размера: 1,2; } }
Обе компоненте користе исто име анимације, али друга дефиниција @кеифрамес замењује прву. Сада ће и компонента-један и компонента-два користити друге кључне кадрове, без обзира која компонента дефинише које кључне кадрове. Погледајте токене за кључне кадрове оловке – Демо 1 [рачвано] аутора Амита Шина. Најгори део? Ово често савршено функционише у локалном развоју, али се мистериозно квари у производњи када процеси изградње промене редослед учитавања ваших таблица стилова. На крају добијате анимације које се понашају различито у зависности од тога које су компоненте учитане и којим редоследом. Решење: Обједињени кључни кадрови Одговор на овај хаос је изненађујуће једноставан: унапред дефинисани динамички кључни кадрови ускладиштени у дељеној табели стилова. Уместо да дозволимо свакој компоненти да дефинише сопствене анимације, ми креирамо централизоване кључне кадрове који су добро документовани и лаки закоришћење, одржавање и прилагођено специфичним потребама вашег пројекта. Замислите то као токене кључних кадрова. Баш као што користимо токене за боје и размаке, а многи од нас већ користе токене за својства анимације, попут функција трајања и ублажавања, зашто не бисмо користили токене и за кључне кадрове? Овај приступ може се природно интегрисати са било којим тренутним током рада токена дизајна који користите, истовремено решавајући и мали проблем (дуплицирање кода) и већи проблем (глобални сукоби опсега) у једном потезу. Идеја је једноставна: створити један извор истине за све наше заједничке анимације. Ова заједничка листа стилова садржи пажљиво израђене кључне кадрове који покривају обрасце анимације које наш пројекат заправо користи. Нема више нагађања да ли анимација бледења већ постоји негде у нашој бази кода. Нема више случајног преписивања анимација из других компоненти. Али ево кључа: ово нису само статичне анимације за копирање и лепљење. Они су дизајнирани да буду динамични и прилагодљиви кроз ЦСС прилагођена својства, што нам омогућава да одржимо доследност, а да и даље имамо флексибилност да прилагодимо анимације специфичним случајевима коришћења, на пример, ако вам је потребна мало већа „пулсна“ анимација на једном месту. Прављење првог токена кључних кадрова Једно од првих плодова са ниским ниским висинама које треба да решимо је „фаде-ин“ анимација. У једном од мојих недавних пројеката, пронашао сам преко десетина засебних дефиниција које се нестају, и да, све су једноставно анимирале непрозирност од 0 до 1. Дакле, хајде да направимо нови стилски лист, назовимо га кф-токенс.цсс, увеземо га у наш пројекат и поставимо наше кључне кадрове са одговарајућим коментарима унутар њега. /* кеифрамес-токенс.цсс */
/* * Фаде Ин - фаде улазна анимација * Употреба: анимација: кф-фаде-ин 0.3с еасе-оут; */ @кеифрамес кф-фаде-ин { од { непрозирност: 0; } до { непрозирност: 1; } }
Ова јединствена декларација @кеифрамес замењује све оне разбацане анимације затамњења у нашој бази кода. Чисто, једноставно и глобално применљиво. И сада када смо дефинисали овај токен, можемо га користити из било које компоненте током нашег пројекта: .модал { анимација: кф-фаде-ин 0.3с еасе-оут; }
.тоолтип { анимација: кф-фаде-ин 0.2с лакоћа-у-излаз; }
.нотифицатион { анимација: кф-фаде-ин 0.5с еасе-оут; }
Погледајте токене за кључне кадрове оловке - Демо 2 [форкед] аутора Амит Схеен-а. Напомена: Користимо кф- префикс у свим нашим именима @кеифрамес. Овај префикс служи као именски простор који спречава сукобе именовања са постојећим анимацијама у пројекту и одмах ставља до знања да ови кључни кадрови потичу из наше датотеке токена кључних кадрова. Прављење динамичког слајда Кф-фаде-ин кључни кадрови раде одлично јер су једноставни и има мало простора да се ствари забрљају. У другим анимацијама, међутим, морамо да будемо много динамичнији, а овде можемо да искористимо огромну моћ ЦСС прилагођених својстава. Ово је место где токени кључних кадрова заиста блистају у поређењу са разбацаним статичним анимацијама. Узмимо уобичајени сценарио: „слиде-ин“ анимације. Али уклизати одакле? 100 пиксела са десне стране? 50% са леве стране? Да ли треба да уђе са врха екрана? Или можда плутају са дна? Толико могућности, али уместо да креирамо засебне кључне кадрове за сваки правац и сваку варијацију, можемо да направимо један флексибилан токен који се прилагођава свим сценаријима: /* * Слиде Ин - усмерена анимација слајдова * Користите --кф-слиде-фром да контролишете правац * Подразумевано: клизи са леве стране (-100%) * Употреба: * анимација: кф-слиде-ин 0.3с еасе-оут; * --кф-слиде-фром: -100пк 0; // слајд с лева * --кф-слиде-фром: 100пк 0; // слајд с десна * --кф-слиде-фром: 0 -50пк; // слајд од врха */
@кеифрамес кф-слиде-ин { од { транслате: вар(--кф-слиде-фром, -100% 0); } до { превести: 0 0; } }
Сада можемо да користимо овај појединачни @кеифрамес токен за било који смер слајда једноставним променом --кф-слиде-фром прилагођеног својства: .сидебар { анимација: кф-слиде-ин 0.3с еасе-оут; /* Користи подразумевану вредност: слајдови са леве стране */ }
.нотифицатион { анимација: кф-слиде-ин 0.4с еасе-оут; --кф-слиде-фром: 0 -50пк; /* слајд од врха */ }
.модал { анимација: кф-фаде-ин 0,5 с, кф-слиде-ин 0.5с цубиц-безиер(0.34, 1.56, 0.64, 1); --кф-слиде-фром: 50пк 50пк; /* слајд доле десно */ }
Овај приступ нам даје невероватну флексибилност уз одржавање доследности. Једна декларација кључног кадра, бесконачне могућности. Погледајте токене за кључне кадрове оловке - Демо 3 [форкед] аутора Амит Схеен-а. А ако желимо да наше анимације учинимо још флексибилнијим, омогућавајући и ефекте „клизања“, можемоједноставно додајте --кф-слиде-то прилагођено својство, слично ономе што ћемо видети у следећем одељку. Двосмерни зум кључни кадрови Још једна уобичајена анимација која се дуплира у пројектима су ефекти „зумирања“. Било да се ради о суптилном увећању за поруке тоста, драматичном зумирању за модале или нежном ефекту смањења за наслове, анимације зумирања су свуда. Уместо да креирамо засебне кључне кадрове за сваку вредност размере, хајде да направимо један флексибилан скуп кф-зоом кључних кадрова:
/* * Зоом - анимација величине * Користите --кф-зоом-фром и --кф-зоом-то да контролишете вредности скале * Подразумевано: зумира од 80% до 100% (0,8 до 1) * Употреба: * анимација: кф-зоом 0.2с еасе-оут; * --кф-зоом-од: 0.5; --кф-зоом-то: 1; // зумирање од 50% до 100% * --кф-зоом-од: 1; --кф-зоом-то: 0; // зумирање од 100% до 0% * --кф-зоом-од: 1; --кф-зоом-то: 1.1; // зумирање од 100% до 110% */
@кеифрамес кф-зоом { од { скала: вар(--кф-зоом-од, 0.8); } до { скала: вар(--кф-зоом-то, 1); } }
Са једном дефиницијом можемо постићи било коју варијацију зумирања која нам је потребна: .тоаст { анимација: кф-слиде-ин 0,2 с, кф-зоом 0.4с еасе-оут; --кф-слиде-фром: 0 100%; /* слајд од врха */ /* Користи подразумевани зум: мења се од 80% до 100% */ }
.модал { анимација: кф-зоом 0.3с цубиц-безиер(0.34, 1.56, 0.64, 1); --кф-зоом-од: 0; /* драматично зумирање од 0% до 100% */ }
.хеадинг { анимација: кф-фаде-ин 2с, кф-зоом 2с еасе-ин; --кф-зоом-од: 1.2; --кф-зоом-то: 0.8; /* нежно смањивање */ }
Подразумевана вредност од 0,8 (80%) функционише савршено за већину елемената корисничког интерфејса, као што су тост поруке и картице, док се и даље лако прилагођава за посебне случајеве. Погледајте токене за кључне кадрове оловке - Демо 4 [форкед] аутора Амит Схеен-а. Можда сте приметили нешто занимљиво у недавним примерима: комбиновали смо анимације. Једна од кључних предности рада са токенима @кеифрамес је та што су дизајнирани да се међусобно интегришу. Ова глатка композиција је намерна, а не случајна. Касније ћемо детаљније разговарати о композицији анимације, укључујући где оне могу постати проблематичне, али већина комбинација је једноставна и лака за имплементацију. Напомена: Док сам писао овај чланак, а можда и због писања, затекао сам себе да преиспитујем целу идеју о улазним анимацијама. Уз све недавне напретке у ЦСС-у, да ли су нам још увек потребни? На срећу, Адам Аргиле је истражио иста питања и сјајно их изразио у свом блогу. Ово није у супротности са оним што је овде написано, али представља приступ вредан разматрања, посебно ако се ваши пројекти у великој мери ослањају на улазне анимације. Континуиране анимације Док се улазне анимације, као што су „фаде“, „слиде“ и „зум“, дешавају једном, а затим се заустављају, непрекидне анимације се врте неограничено да би привукле пажњу или указале на активност која је у току. Две најчешће континуиране анимације са којима се сусрећем су „спин“ (за индикаторе учитавања) и „пулс“ (за истицање важних елемената). Ове анимације представљају јединствене изазове када је у питању креирање токена кључних кадрова. За разлику од улазних анимација које обично прелазе из једног стања у друго, континуиране анимације морају бити веома прилагодљиве у својим обрасцима понашања. Спин Доцтор Чини се да сваки пројекат користи више спин анимација. Неки се окрећу у смеру казаљке на сату, други у супротном смеру. Неки раде једну ротацију за 360 степени, други раде више окрета за бржи ефекат. Уместо да креирамо засебне кључне кадрове за сваку варијацију, хајде да направимо један флексибилан обрт који се бави свим сценаријима:
/* * Спин - ротација анимација * Користите --кф-спин-фром и --кф-спин-то да контролишете опсег ротације * Користите --кф-спин-турнс да контролишете количину ротације * Подразумевано: ротира од 0 степени до 360 степени (1 пуна ротација) * Употреба: * анимација: кф-спин 1с линеарна бесконачна; * --кф-спин-турнс: 2; // 2 пуне ротације * --кф-спин-фром: 0дег; --кф-спин-то: 180 степени; // пола ротације * --кф-спин-фром: 0дег; --кф-спин-то: -360 степени; // супротно од казаљке на сату */
@кеифрамес кф-спин { од { ротирати: вар(--кф-спин-фром, 0дег); } до { ротирати: цалц(вар(--кф-спин-фром, 0дег) + вар(--кф-спин-то, 360дег) * вар(--кф-спин-турнс, 1)); } }
Сада можемо да креирамо било коју варијацију окретања која нам се свиђа:
.лоадинг-спиннер { анимација: кф-спин 1с линеарна бесконачна; /* Користи подразумевано: ротира од 0 степени до 360 степени */ }
.фаст-лоадер { анимација: кф-спин 1.2с бесконачно наизменична лакоћа уласка; --кф-спин-турнс: 3; /* 3 пуне ротације за сваки правац по циклусу*/ }
.степед-реверсе { анимација: кф-спин 1.5с кораци(8) бесконачно; --кф-спин-то: -360 степени; /* супротно од казаљке на сату */ }
.субтле-виггле { анимација: кф-спин 2с еасе-ин-оут бесконачна алтернатива; --кф-спин-од: -16дег; --кф-спин-то: 32дег; /* померање за 36 степени: између -18 степени и +18 степени */ }
Погледајте токене за кључне кадрове оловке - Демо 5 [форкед] аутора Амит Схеен-а. Лепота овог приступа је у томе што исти кључни кадрови раде за учитавање спинера, ротирајућих икона, ефеката померања, па чак и сложених анимација са више окрета. Парадокс пулса Пулсне анимације су сложеније јер могу да „пулсирају“ различита својства. Неки пулсирају скалу, други пулсирају непрозирност, а неки пулсирају својства боје попут осветљености или засићења. Уместо да правимо засебне кључне кадрове за свако својство, можемо да креирамо кључне кадрове који раде са било којим ЦСС својством. Ево примера пулсног кључног кадра са опцијама размере и непрозирности:
/* * Пулс - пулсирајућа анимација * Користите --кф-пулсе-сцале-фром и --кф-пулсе-сцале-до да контролишете опсег скале * Користите --кф-пулсе-опацити-фром и --кф-пулсе-опацити-то да контролишете опсег непрозирности * Подразумевано: нема пулса (све вредности 1) * Употреба: * анимација: кф-пулсе 2с еасе-ин-оут бесконачно алтернативно; * --кф-пулсе-сцале-од: 0,95; --кф-пулсе-сцале-то: 1,05; // скала пулс * --кф-пулсе-опацити-од: 0.7; --кф-пулсе-опацити-то: 1; // пулс непрозирности */
@кеифрамес кф-пулсе { од { скала: вар(--кф-пулсе-сцале-фром, 1); непрозирност: вар(--кф-пулсе-опацити-фром, 1); } до { скала: вар(--кф-пулсе-сцале-то, 1); непрозирност: вар(--кф-пулсе-опацити-то, 1); } }
Ово ствара флексибилан пулс који може да анимира више својстава: .позив на акцију { анимација: кф-пулсе 0.6с бесконачно алтернативно; --кф-пулсе-опацити-од: 0,5; /* пулс непрозирности */ }
.нотифицатион-дот { анимација: кф-пулсе 0.6с бесконачна наизменична лакоћа уласка; --кф-пулсе-сцале-од: 0,9; --кф-пулсе-сцале-то: 1.1; /* скала пулс */ }
.тект-хигхлигхт { анимација: кф-пулсе 1.5с еасе-оут бесконачно; --кф-пулсе-сцале-од: 0,8; --кф-пулсе-опацити-од: 0,2; /* скала и пулс непрозирности */ }
Погледајте токене за кључне кадрове оловке - Демо 6 [форкед] аутора Амит Схеен-а. Овај појединачни кф-пулсе кључни кадар може да поднесе све, од суптилног привлачења пажње до драматичних истакнутих тренутака, а све то лако се прилагођава. Адванцед Еасинг Једна од сјајних ствари у коришћењу токена кључних кадрова је колико је лако проширити нашу библиотеку анимација и обезбедити ефекте које се већина програмера не би трудила да напише од нуле, као што су еластични или одскочни. Ево примера једноставног токена кључних кадрова „боунце“ који користи --кф-боунце-фром прилагођено својство за контролу висине скока. /* * Боунце - анимација одскакања улаза * Користите --кф-боунце-фром да контролишете висину скока * Подразумевано: скаче са 100вх (ван екрана) * Употреба: * анимација: кф-боунце 3с еасе-ин; * --кф-боунце-фром: 200пк; // скок са висине од 200 пиксела */
@кеифрамес кф-боунце { 0% { транслате: 0 цалц(вар(--кф-боунце-фром, 100вх) * -1); }
34% { транслате: 0 цалц(вар(--кф-боунце-фром, 100вх) * -0.4); }
55% { транслате: 0 цалц(вар(--кф-боунце-фром, 100вх) * -0.2); }
72% { транслате: 0 цалц(вар(--кф-боунце-фром, 100вх) * -0.1); }
85% { транслате: 0 цалц(вар(--кф-боунце-фром, 100вх) * -0.05); }
94% { транслате: 0 цалц(вар(--кф-боунце-фром, 100вх) * -0.025); }
99% { транслате: 0 цалц(вар(--кф-боунце-фром, 100вх) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { превести: 0 0; анимација-временска-функција: еасе-оут; } }
Анимације попут „еластичне“ су мало сложеније због прорачуна унутар кључних кадрова. Морамо да дефинишемо --кф-еластиц-фром-Кс и --кф-еластиц-фром-И одвојено (оба су опциона), а заједно нам омогућавају да креирамо еластични улаз из било које тачке на екрану.
/* * Еластиц Ин - еластична улазна анимација * Користите --кф-еластиц-фром-Кс и --кф-еластиц-фром-И да контролишете почетну позицију * Подразумевано: улази од горњег центра (0, -100вх) * Употреба: * анимација: кф-еластиц-ин 2с еасе-ин-оут обоје; * --кф-еластиц-фром-Кс: -50пк; * --кф-еластиц-фром-И: -200пк; // унесите од (-50пк, -200пк) */
@кеифрамес кф-еластиц-ин { 0% { транслате: цалц(вар(--кф-еластиц-фром-Кс, -50вв) * 1) цалц(вар(--кф-еластиц-фром-И, 0пк) * 1); }
16% { транслате: цалц(вар(--кф-еластиц-фром-Кс, -50вв) * -0,3227) цалц(вар(--кф-еластиц-фром-И, 0пк) * -0,3227); }
28% { преведи: цалц(вар(--кф-еластиц-фром-Кс, -50вв) * 0,1312)цалц(вар(--кф-еластиц-фром-И, 0пк) * 0,1312); }
44% { транслате: цалц(вар(--кф-еластиц-фром-Кс, -50вв) * -0,0463) цалц(вар(--кф-еластиц-фром-И, 0пк) * -0,0463); }
59% { транслате: цалц(вар(--кф-еластиц-фром-Кс, -50вв) * 0,0164) цалц(вар(--кф-еластиц-фром-И, 0пк) * 0,0164); }
73% { транслате: цалц(вар(--кф-еластиц-фром-Кс, -50вв) * -0,0058) цалц(вар(--кф-еластиц-фром-И, 0пк) * -0,0058); }
88% { транслате: цалц(вар(--кф-еластиц-фром-Кс, -50вв) * 0,0020) цалц(вар(--кф-еластиц-фром-И, 0пк) * 0,0020); }
100% { превести: 0 0; } }
Овај приступ олакшава поновну употребу и прилагођавање напредних кључних кадрова у нашем пројекту, само променом једног прилагођеног својства.
.боунце-анд-зоом { анимација: кф-боунце 3с олакшање, кф-зоом 3с линеарни; --кф-зоом-од: 0; }
.боунце-анд-слиде { анимација-композиција: додати; /* Обе анимације користе превод */ анимација: кф-боунце 3с олакшање, кф-слиде-ин 3с еасе-оут; --кф-слиде-фром: -200пк; }
.еластиц-ин { анимација: кф-еластиц-ин 2с еасе-ин-оут обоје; }
Погледајте токене за кључне кадрове оловке - Демо 7 [рачвано] од Амита Шина. До ове тачке смо видели како можемо да консолидујемо кључне кадрове на паметан и ефикасан начин. Наравно, можда бисте желели да прилагодите ствари тако да боље одговарају потребама вашег пројекта, али ми смо покрили примере неколико уобичајених анимација и случајева свакодневне употребе. А са овим токенима кључних кадрова на месту, сада имамо моћне блокове за креирање доследних анимација које се могу одржавати у целом пројекту. Нема више дуплираних кључних кадрова, нема више сукоба глобалног опсега. Само чист, згодан начин за решавање свих наших потреба за анимацијом. Али право питање је: како да саставимо ове блокове заједно? Састављамо све заједно Видели смо да је комбиновање токена основних кључних кадрова једноставно. Не треба нам ништа посебно осим да дефинишемо прву анимацију, дефинишемо другу, подесимо променљиве по потреби и то је то. /* Фаде ин + слиде ин */ .тоаст { анимација: кф-фаде-ин 0.4с, кф-слиде-ин 0.4с цубиц-безиер(0.34, 1.56, 0.64, 1); --кф-слиде-фром: 0 40пк; }
/* Увећај + избледи */ .модал { анимација: кф-фаде-ин 0,3 с, кф-зоом 0.3с цубиц-безиер(0.34, 1.56, 0.64, 1); --кф-зоом-од: 0.7; --кф-зоом-то: 1; }
/* Увлачење + пулс */ .нотифицатион { анимација: кф-слиде-ин 0,5 с, кф-пулсе 1.2с лакоћа-у-излаз бесконачна алтернатива; --кф-слиде-фром: -100пк 0; --кф-пулсе-сцале-од: 0,95; --кф-пулсе-сцале-то: 1,05; }
Ове комбинације функционишу прелепо јер свака анимација циља на другачију особину: непрозирност, трансформацију (превођење/размера), итд. Али понекад постоје конфликти и морамо да знамо зашто и како да се носимо са њима. Када две анимације покушају да анимирају исто својство – на пример, обе анимирају скалу или обе анимирају непрозирност – резултат неће бити оно што очекујете. Подразумевано, само једна од анимација се заправо примењује на то својство, а то је последња на листи анимација. Ово је ограничење начина на који ЦСС рукује вишеструким анимацијама на истом својству. На пример, ово неће радити како је предвиђено јер ће се применити само кф-пулс анимација. .бад-цомбо { анимација: кф-зоом 0,5 с напред, кф-пулсе 1.2с бесконачно алтернативно; --кф-зоом-од: 0.5; --кф-зоом-то: 1.2; --кф-пулсе-сцале-од: 0,8; --кф-пулсе-сцале-то: 1.1; }
Аниматион Аддитион Најједноставнији и најдиректнији начин за руковање вишеструким анимацијама које утичу на исто својство је коришћење својства композиције анимације. У последњем примеру изнад, кф-пулсе анимација замењује кф-зоом анимацију, тако да нећемо видети почетни зум и нећемо добити очекивану скалу од 1,2. Постављањем композиције анимације за додавање, ми кажемо претраживачу да комбинује обе анимације. Ово нам даје резултат који желимо. .цомпонент-тво { анимација-композиција: додати; }
Погледајте токене за кључне кадрове оловке - Демо 8 [форкед] аутора Амит Схеен-а. Овај приступ добро функционише у већини случајева где желимо да комбинујемо ефекте на исту имовину. Такође је корисно када треба да комбинујемо анимације са статичким вредностима својстава. На пример, ако имамо елемент који користи својство транслате да га позиционира тачно тамо где желимо, а затим желимо да га анимирамо помоћу кф-слиде-ин кључних кадрова, добићемо гадан видљив скок без композиције анимације. Погледајте токене за кључне кадрове оловке - Демо 9 [форкед] аутора Амит Схеен-а. Уз сет анимације-композиције за додавање, анимација се глатко комбинује са постојећомтрансформисати, тако да елемент остаје на месту и анимира како се очекује. Аниматион Стаггер Други начин руковања вишеструким анимацијама је да их „затегнете“ – то јест, покрените другу анимацију мало након што се прва заврши. То није решење које функционише за сваки случај, али је корисно када имамо улазну анимацију праћену континуираном анимацијом. /* бледење + пулс непрозирности */ .нотифицатион { анимација: кф-фаде-ин 2с еасе-оут, кф-пулсе 0.5с 2с лакоћа-ин-оут бесконачна алтернатива; --кф-пулсе-опацити-то: 0,5; }
Погледајте токене за кључне кадрове оловке - Демо 10 [рачвано] од Амита Шина. Ордер Маттерс Велики део анимација са којима радимо користи својство трансформације. У већини случајева, ово је једноставно згодније. Такође има предност у перформансама јер се анимације трансформације могу убрзати ГПУ-ом. Али ако користимо трансформације, морамо прихватити да је редослед којим изводимо наше трансформације битан. много. У нашим кључним кадровима до сада смо користили појединачне трансформације. Према спецификацијама, они се увек примењују у фиксном редоследу: прво се елемент транслатира, затим ротира, а затим скалира. Ово има смисла и оно што већина нас очекује. Међутим, ако користимо својство трансформације, редослед којим су функције написане је редослед којим се примењују. У овом случају, ако нешто померимо за 100 пиксела на Кс-оси, а затим га заротимо за 45 степени, то није исто као да га прво ротирате за 45 степени, а затим померимо за 100 пиксела. /* Ружичасти квадрат: прво преведите, а затим ротирајте */ .екампле-оне { трансформ: транслатеКс(100пк) ротате(45дег); }
/* Зелени квадрат: Прво ротирајте, а затим преведите */ .екампле-тво { трансформ: ротате(45дег) транслатеКс(100пк); }
Погледајте токене за кључне кадрове оловке – Демо 11 [рачвано] аутора Амита Шина. Али према редоследу трансформације, све појединачне трансформације - све што смо користили за токене кључних кадрова - дешавају се пре функција трансформације. То значи да ће се све што поставите у својству трансформације десити након анимација. Али ако поставите, на пример, превођење заједно са кључним кадровима кф-спин, превођење ће се десити пре анимације. Још збуњен?! Ово доводи до ситуација у којима статичке вредности могу изазвати различите резултате за исту анимацију, као у следећем случају:
/* Заједничка анимација за оба спинера */ .спиннер { анимација: кф-спин 1с линеарна бесконачна; }
/* Пинк спиннер: преведите пре ротирања (појединачна трансформација) */ .спиннер-пинк { превести: 100% 50%; }
/* Зелени спинер: ротирај па преведи (редослед функција) */ .спиннер-греен { трансформ: транслате(100%, 50%); }
Погледајте токене за кључне кадрове оловке - Демо 12 [форкед] аутора Амит Схеен-а. Можете видети да први спинер (ружичасти) добија превод који се дешава пре ротације кф-спин-а, тако да се прво помера на своје место, а затим се окреће. Други спинер (зелени) добија функцију транслате() која се дешава након појединачне трансформације, тако да се елемент прво окреће, а затим се помера у односу на свој тренутни угао, и добијамо тај ефекат широке орбите. Не, ово није грешка. То је само једна од оних ствари које морамо да знамо о ЦСС-у и да имамо на уму када радимо са више анимација или вишеструких трансформација. Ако је потребно, можете креирати и додатни скуп кф-спин-алт кључних кадрова који ротирају елементе помоћу функције ротате(). Редуцед Мотион И док говоримо о алтернативним кључним кадровима, не можемо занемарити опцију „без анимације“. Једна од највећих предности коришћења токена кључних кадрова је та што се приступачност може испећи, а то је заправо прилично лако учинити. Дизајнирајући наше кључне кадрове имајући на уму приступачност, можемо да обезбедимо да корисници који преферирају смањено кретање добију углађеније искуство са мање ометања, без додатног рада или дуплирања кода. Тачно значење „Редуцед Мотион“ може се мало променити од једне анимације до друге, и од пројекта до пројекта, али ево неколико важних тачака које треба имати на уму: Искључивање кључних кадрова Док се неке анимације могу ублажити или успорити, постоје друге које би требало да потпуно нестану када се захтева смањено кретање. Пулсне анимације су добар пример. Да бисмо били сигурни да се ове анимације не покрећу у режиму смањеног покрета, можемо их једноставно умотати у одговарајући медијски упит.
@медиа (преферс-редуцед-мотион: но-преференце) { @кеифрмаес кф-пулсе { од { скала: вар(--кф-пулсе-сцале-фром, 1); непрозирност: вар(--кф-пулсе-опацити-фром, 1); } до { скала: вар(--кф-пулсе-сцале-то, 1); непрозирност:вар(--кф-пулсе-опацити-то, 1); } } }
Ово осигурава да корисници који су подесили преферс-редуцед-мотион за смањење неће видети анимацију и добиће искуство које одговара њиховим жељама. Инстант Ин Постоје неки кључни кадрови које не можемо једноставно уклонити, као што су улазне анимације. Вредност мора да се промени, мора да анимира; у супротном, елемент неће имати тачне вредности. Али у смањеном кретању, овај прелаз са почетне вредности треба да буде тренутан. Да бисмо то постигли, дефинисаћемо додатни скуп кључних кадрова где вредност одмах скаче у крајње стање. Они постају наши подразумевани кључни кадрови. Затим ћемо додати редовне кључне кадрове унутар медијског упита за преферс-редуцед-мотион постављен на не-преференце, баш као у претходном примеру. /* искочи одмах ради смањеног покрета */ @кеифрамес кф-зоом { од, до { скала: вар(--кф-зоом-то, 1); } }
@медиа (преферс-редуцед-мотион: но-преференце) { /* Оригинални кључни кадрови зумирања */ @кеифрамес кф-зоом { од { скала: вар(--кф-зоом-од, 0.8); } до { скала: вар(--кф-зоом-то, 1); } } }
На овај начин, корисници који преферирају смањено кретање видеће да се елемент тренутно појављује у свом коначном стању, док сви остали добијају анимирани прелаз. Меки приступ Постоје случајеви у којима желимо да задржимо неки покрет, али много мекши и мирнији од оригиналне анимације. На пример, можемо да заменимо одбијање улаза нежним бледењем.
@кеифрамес кф-боунце { /* Меко упадање за смањено кретање */ }
@медиа (преферс-редуцед-мотион: но-преференце) { @кеифрамес кф-боунце { /* Оригинални кључни кадрови одбијања */ } }
Сада, корисници са омогућеним смањеним покретом и даље добијају осећај изгледа, али без интензивног покрета одбијања или еластичне анимације. Са постављеним градивним блоковима, следеће питање је како их учинити делом стварног тока посла. Писање флексибилних кључних кадрова је једна ствар, али да их учините поузданим у великом пројекту захтева неколико стратегија које сам морао да научим на тежи начин. Стратегије имплементације и најбоље праксе Једном када имамо солидну библиотеку токена кључних кадрова, прави изазов је како их увести у свакодневни рад.
Искушење је да испустим све кључне кадрове одједном и прогласим проблем решеним, али у пракси сам открио да најбољи резултати долазе из постепеног усвајања. Почните са најчешћим анимацијама, као што су бледење или слајдовање. Ово су лаке победе које показују тренутну вредност без потребе за великим преписивањем. Именовање је још једна тачка која заслужује пажњу. Доследан префикс или именски простор чини очигледним које анимације су токени, а које су локалне једнократне. Такође спречава случајне сударе и помаже новим члановима тима да препознају заједнички систем на први поглед. Документација је једнако важна као и сам код. Чак и кратак коментар изнад сваког токена кључних кадрова може уштедети сате нагађања касније. Програмер би требало да буде у могућности да отвори датотеку токена, скенира ефекат који му је потребан и копира образац коришћења директно у своју компоненту. Флексибилност је оно што чини овај приступ вредним труда. Излажући разумна прилагођена својства, дајемо тимовима простор да прилагоде анимацију без нарушавања система. У исто време, покушајте да не компликујете превише. Обезбедите дугмад која су битна, а остале задржите мишљење. Коначно, запамтите приступачност. Није свакој анимацији потребна алтернатива смањеног покрета, али многима треба. Рано увођење ових прилагођавања значи да никада не морамо да их накнадно уграђујемо, а то показује ниво пажње који ће наши корисници приметити чак и ако то никада не помињу.
По мом искуству, третирање токена кључних кадрова као дела нашег токена дизајна је оно што их чини да се држе. Једном када су постављени, престају да се осећају као специјални ефекти и постају део језика дизајна, природно проширење начина на који се производ креће и реагује. Враппинг Уп Анимације могу бити један од најрадоснијих делова изградње интерфејса, али без структуре, такође могу постати један од највећих извора фрустрације. Третирајући кључне кадрове као токене, узимате нешто што је обично неуредно и тешко за управљање и претварате то у јасан, предвидљив систем. Права вредност није само у чувању неколико редова кода. У поверењу је да када користите фаде, клизање, зумирање или окретање, тачно знате како ће се понашати у целом пројекту. То је флексибилност која долази од прилагођених својстава без хаоса бескрајних варијација. И то је у приступачности уграђеној у темељ, а не додатој каонакнадна мисао. Видео сам да ове идеје раде у различитим тимовима и различитим кодним базама, а образац је увек исти. Једном када су токени на месту, кључни кадрови престају да буду расута колекција трикова и постају део језика дизајна. Они чине да се производ осећа намернијим, доследнијим и живљим. Ако узмете једну ствар из овог чланка, нека буде ово: анимације заслужују исту пажњу и структуру коју већ дајемо бојама, типографији и размацима. Мала инвестиција у токене кључних кадрова се исплати сваки пут када се ваш интерфејс помери.
