Моны күз алдыгызга китерегез: сез яңа проектка кушыласыз, код базасына чумасыз, һәм беренче берничә сәгать эчендә сез күңелсез нәрсә таныш. Стиль таблицаларында таралган, бер үк төп анимацияләр өчен берничә @keyframes билгеләмәсен табасыз. Өч төрле сүнгән эффект, ике-өч слайд вариациясе, берничә зум анимация, һәм ким дигәндә ике төрле спин анимация, чөнки, нигә алай түгел? @keyframes pulse { { масштаб: 1; } { масштаб: 1.1; } }
@keyframes зуррак импульс { 0%, 20%, 100% { масштаб: 1; } 10%, 40% { масштаб: 1,2; } }
Бу сценарий таныш булса, сез ялгыз түгел. Төрле проектлар буенча тәҗрибәмдә, мин китерә алган иң эзлекле җиңүләрнең берсе - клавиатураларны консолидацияләү һәм стандартлаштыру. Бу шундый ышанычлы үрнәккә әйләнде, мин хәзер бу чистартуны түземсезлек белән көтәм, яңа код базасында беренче бурычларымның берсе. Хаос артындагы логика Бу артыклык бу турыда уйлаганда бик яхшы мәгънәгә ия. Көндәлек эшебездә без барыбыз да бер үк фундаменталь анимацияләрне кулланабыз: сүнә, слайдлар, зумнар, әйләнәләр һәм башка киң таралган эффектлар. Бу анимацияләр бик гади, һәм эшне башкарыр өчен тиз @keyframes билгеләмәсен камчылау җиңел. Centralзәкләштерелгән анимация системасы булмаса, уйлап табучылар табигый рәвештә бу ачкычларны нөлдән язалар, охшаш анимацияләр код базасында бүтән урында булганын белмиләр. Бу аеруча компонентлы архитектурада эшләгәндә еш очрый (күпчелек бу көннәрдә эшли), чөнки командалар еш кына кушымтаның төрле өлешләре буенча параллель рәвештә эшлиләр. Нәтиҗә? Анимация хаосы. Кечкенә проблема Клавиатураларны кабатлау белән иң ачык проблемалар - үсеш вакытын әрәм итү һәм кирәксез кодлар. Берничә ачкыч төшенчәсе таләпләр үзгәргәндә яңарту өчен берничә урынны аңлата. Сүнгән анимация вакытын көйләргә кирәк? Сезгә код базасы аша һәр инстанцияне эзләргә кирәк булачак. Eиңелләштерү функцияләрен стандартлаштырырга телисезме? Барлык үзгәрешләрне табуда уңышлар. Техник пунктларның бу тапкырлануы хәтта гади анимация яңартуларын да күп вакыт таләп итә. Зур проблема Бу ачкычларның кабатлануы җир өстендә яшеренгән бик мәкерле проблема тудыра: глобаль масштаб тозагы. Компонентка нигезләнгән архитектура белән эшләгәндә дә, CSS ачкычлары гел глобаль масштабта билгеләнә. Димәк, барлык ачкычлар барлык компонентларга кагыла. Waysәрвакыт. Әйе, сезнең анимация сезнең компонентта билгеләгән ачкычларны кулланмый. Бу глобаль масштабка салынган шул ук исемгә туры килгән соңгы ачкычларны куллана. Сезнең барлык ачкычлар бер үк булса, бу кечкенә проблема кебек тоелырга мөмкин. Ләкин билгеле бер куллану өчен анимацияне көйләргә теләгән мизгелдә сез проблемага эләкәсез, яисә начаррак, сез аларга сәбәпче булырсыз. Яисә анимация эшләмәячәк, чөнки бүтән компонент сезнекеннән соң йөкләнгән, ачкыч рамкаларны яңадан яза, яки сезнең компонент соңгы тапкыр йөкләнә һәм очраклы рәвештә анимация тәртибен шул ачкыч исеме кулланып үзгәртә, һәм сез моны сизми дә калырга мөмкин. Менә проблеманы күрсәтүче гади мисал: .компонент-бер { / * компонент стильләре * / анимация: импульс 1с җиңел булмаган чиксез альтернатива; }
/ * бу @keyframes билгеләмәсе эшләмәячәк * / @keyframes pulse { { масштаб: 1; } { масштаб: 1.1; } }
/ * соңрак кодта ... * /
компонент-ике { / * компонент стильләре * / анимация: импульс 1с җиңеллек чиксез; }
/ * бу ачкыч рамкалар ике компонентка да кагылачак * / @keyframes pulse { 0%, 20%, 100% { масштаб: 1; } 10%, 40% { масштаб: 1,2; } }
Ике компонент та бер үк анимация исемен кулланалар, ләкин икенче @keyframes билгеләмәсе беренчесен яза. Хәзер компонент-бер дә, компонент-икесе дә икенче ачкыч рамкаларын кулланачаклар, кайсы компонентның нинди клавиатураны билгеләгәненә карамастан. Каләм ачкычлары токеннарын карагыз - Демо 1 [Амит Шин. Иң начар өлеше? Бу еш җирле үсештә бик яхшы эшли, ләкин төзелеш процесслары сезнең стиль таблицаларының йөкләү тәртибен үзгәрткәндә серле рәвештә өзелә. Сез нинди компонентларның йөкләнгәненә һәм нинди эзлеклелектә булуына карап төрлечә эш итүче анимацияләр белән тәмамланасыз. Чишелеш: Бердәм ачкычлар Бу хаоска җавап гаҗәп гади: уртак стиль таблицасында сакланган алдан билгеләнгән динамик ачкычлар. Everyәрбер компонентның үз анимацияләрен билгеләве урынына, без яхшы документлаштырылган, җиңел булган үзәкләштерелгән ачкычлар ясыйбызсезнең проектның конкрет ихтыяҗларына туры китереп кулланыгыз. Аны клавиатура билгеләре дип уйлагыз. Токеннарны төсләр һәм аралар өчен кулланган кебек, һәм безнең күбебез анимация үзлекләре өчен токеннарны кулланган кебек, озынлыгы һәм җиңеләйтү функцияләре кебек, нигә шулай ук клавиатура өчен токеннарны кулланмаска? Бу ысул сез кулланган теләсә нинди агымдагы дизайн токены белән табигый рәвештә берләшә ала, шул ук вакытта кечкенә проблеманы (кодны кабатлау) һәм зуррак проблеманы (глобаль масштаб конфликтларын) берьюлы чишә. Идея туры: безнең гомуми анимацияләр өчен бердәм хакыйкать чыганагын булдырыгыз. Бу уртак стиль таблицасында безнең проект кулланган анимация үрнәкләрен үз эченә алган җентекләп эшләнгән ачкычлар бар. Сүнгән анимация безнең код базасында каядыр бармы-юкмы дип уйламыйсыз. Башка компонентлардан анимацияләрне очраклы рәвештә язып булмый. Ләкин монда ачкыч: бу статик күчермә-анимация түгел. Алар CSS махсус характеристикалары аша динамик һәм көйләнә торган итеп эшләнгән, безгә эзлеклелекне сакларга мөмкинлек бирә, шул ук вакытта анимацияләрне махсус куллану очракларына яраклаштыру мөмкинлеге бар, бер урында бераз зуррак "импульс" анимациясе кирәк кебек. Токенның беренче ачкычларын төзү Беренче түбән асылынган җимешләрнең берсе - "сүнгән" анимация. Соңгы проектларымның берсендә мин дистәдән артык аерым төшенчәләрне таптым, һәм әйе, алар барысы да 0 дән 1гә кадәр караңгылыкны анимацияләделәр. Шулай итеп, әйдәгез, яңа стиль таблицасын булдырыйк, аны kf-tokens.css дип атыйк, аны безнең проектка кертик, һәм ачкыч ачкычларыбызны тиешле аңлатмалар белән урнаштырыйк. / * keyframes-tokens.css * /
/ * * Fade In - сүнгән керү анимациясе * Куллану: анимация: kf-fade-in 0.3s җиңел; * / @keyframes kf-fade-in { { караңгылык: 0; } { караңгылык: 1; } }
Бу бердәнбер @keyframes декларациясе безнең код базасы аша таралган анимацияләрне алыштыра. Чиста, гади һәм глобаль кулланыла. Nowәм хәзер бу билге билгеләнгәч, без аны проект кысаларында теләсә нинди компоненттан куллана алабыз: .modal { анимация: kf-fade-in 0.3s җиңел; }
.tooltip { анимация: kf-fade-in 0.2s җиңеллек; }
.notification { анимация: kf-fade-in 0.5s җиңел; }
Каләм ачкычлары Токеннарын карагыз - Демо 2 [Амит Шин. Искәрмә: без барлык @keyframes исемнәрендә kf-префикс кулланабыз. Бу префикс исем киңлеге булып хезмәт итә, бу проекттагы анимацияләр белән конфликтларны атарга комачаулый һәм бу ачкычларның безнең клавиатура токеннар файлыннан килеп чыкканын шунда ук ачыклый. Динамик слайд ясау Kf-fade-in ачкычлары бик яхшы эшли, чөнки гади һәм әйберләрне тәртипкә китерергә урын аз. Башка анимацияләрдә без тагын да динамик булырга тиеш, һәм монда без CSS махсус үзлекләренең гаять зур көчен куллана алабыз. Чәчелгән статик анимацияләр белән чагыштырганда, клавиатура билгеләре чыннан да балкый. Уртак сценарий алыйк: "слайд-анимация". Ләкин кая керергә? Уңнан 100px? Сулдан 50%? Ул экран өслегеннән керергә тиешме? Яки, бәлки, төбеннән йөзеп йөрер? Бик күп мөмкинлекләр, ләкин һәр юнәлеш һәм һәр вариация өчен аерым ачкычлар булдыру урынына, без барлык сценарийларга яраклашкан бер сыгылмалы билге төзи алабыз: / * * Слайд эчендә - юнәлешле слайд анимациясе * Контроль юнәлештә --kf-слайд-кулланыгыз * Килешү буенча: сулдан слайдлар (-100%) * Куллану: * анимация: kf-слайд-0,3с җиңел; * --kf-слайд-дан: -100px 0; // сулдан слайд * --kf-слайд-дан: 100px 0; // уңнан слайд * --kf-слайд-дан: 0 -50px; // өстән слайд * /
@keyframes kf-слайд-in { { тәрҗемә итү: var (- kf-слайд-дан, -100% 0); } { тәрҗемә итү: 0 0; } }
Хәзер без бу @keyframes токенын теләсә нинди слайд юнәлеше өчен --kf-слайд-таможня милеген үзгәртеп куллана алабыз: .sidebar { анимация: kf-слайд-0,3-җиңеллек; / * Килешенгән кыйммәтне куллана: сулдан слайдлар * / }
.notification { анимация: kf-слайд-0,4с җиңел; --kf-слайд-дан: 0 -50px; / * өстән слайд * / }
.modal { анимация: kf-fade-in 0.5s, kf-слайд-0,5 куб-безиер (0,34, 1.56, 0.64, 1); --kf-слайд-дан: 50px 50px; / * аскы-уңнан слайд * / }
Бу алым безгә эзлеклелекне саклап калганда искиткеч сыгылучылык бирә. Бер төп декларация, чиксез мөмкинлекләр. Каләм ачкычлары токеннарын карагыз - Демо 3 [Амит Шин. Әгәр дә без анимацияләрне тагын да сыгылмалы итергә телибез икән, "слайд" эффектларын рөхсәт итсәк, без булдыра алабызкиләсе бүлектә күргәннәргә охшаган, махсус милеккә --kf-слайд өстәгез. Ике яклы зурлау ачкычлары Проектларда кабатланган тагын бер киң таралган анимация - "зурайту" эффектлары. Тост хәбәрләре өчен нечкә масштабмы, модальләр өчен драматик зурайту, яисә башламнар өчен йомшак масштаблы эффект, зурайту анимацияләре бөтен җирдә. Scaleәр масштаб бәясе өчен аерым ачкычлар ясау урынына, әйдәгез kf-zoom ачкычларының бер сыгылмалы җыелмасын төзик:
/ * * Зурлау - масштаблы анимация * Масштаб кыйммәтләрен контрольдә тоту өчен --kf-zoom-from һәм --kf-zoom-кулланыгыз * Килешү буенча: 80% - 100% зурайта (0,8 дән 1) * Куллану: * анимация: kf-zoom 0.2s җиңел; * --kf-zoom-from: 0,5; --kf-zoom-to: 1; // 50% тан 100% ка зурайтыгыз * --kf-zoom-from: 1; --kf-zoom-to: 0; // 100% тан 0% ка кадәр зурайту * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // 100% тан 110% ка зурайту * /
@keyframes kf-zoom { { масштаб: var (- kf-zoom-from, 0.8); } { масштаб: var (- kf-zoom-to, 1); } }
Бер билгеләмә белән без кирәк булган теләсә нинди зум вариациясенә ирешә алабыз: .toast { анимация: kf-слайд-0,2, kf-zoom 0.4s җиңел; --kf-слайд-дан: 0 100%; / * өстән слайд * / / * Килешү зум куллана: тараза 80% - 100% * / }
.modal { анимация: kf-zoom 0.3s куб-безиер (0,34, 1.56, 0.64, 1); --kf-zoom-from: 0; / * драматик зум 0% - 100% * / }
.heading { анимация: kf-fade-in 2s, kf-zoom 2s җиңел; --kf-zoom-from: 1.2; --kf-zoom-to: 0.8; / * йомшак масштаб * / }
Килешү 0.8 (80%) күпчелек UI элементлары өчен бик яхшы эшли, тост хәбәрләре һәм карточкалар кебек, шул ук вакытта махсус очракларны көйләү җиңел. Каләм ачкычлары токеннарын карагыз - Демо 4 [Амит Шин. Соңгы мисалларда сез кызык нәрсәне күргәнсездер: без анимацияләрне берләштердек. @ Keyframes билгеләре белән эшләүнең төп өстенлекләренең берсе - алар бер-берсе белән бербөтен интеграцияләнү өчен эшләнгән. Бу шома композиция очраклы түгел. Без анимация композициясен соңрак җентекләп тикшерәчәкбез, алар кайда проблемалы булырга мөмкин, ләкин күпчелек комбинацияләр туры һәм тормышка ашыру җиңел. Искәрмә: Бу мәкаләне язганда, һәм, бәлки, аны язганга күрә, мин анимациянең бөтен идеясын яңадан карап чыктым. CSS-ның соңгы казанышлары белән, без аларга бөтенләй кирәкме? Бәхеткә, Адам Аргайл шул ук сорауларны барлады һәм аларны үз блогында матур итеп күрсәтте. Бу монда язылганнарга каршы килми, ләкин ул карарга кирәк булган ысул тәкъдим итә, аеруча сезнең проектлар керү анимацияләренә таянса. Даими анимацияләр Керү анимацияләре, "сүнгән", "слайд", "зурайту" кебек бер тапкыр була, аннары туктый, өзлексез анимацияләр игътибарны җәлеп итү яки дәвамлы эшчәнлекне күрсәтү өчен чиксез әйләнәләр. Иң еш очрый торган өзлексез анимация - “әйләнү” (индикаторларны йөкләү өчен) һәм “импульс” (мөһим элементларны яктырту өчен). Бу анимацияләр клавиатура билгеләрен ясауга килгәндә уникаль проблемалар тудыралар. Гадәттә бер штаттан икенчесенә керә торган керү анимацияләреннән аермалы буларак, өзлексез анимацияләр үз-үзләрен тотыш үрнәкләрендә бик үзенчәлекле булырга тиеш. Спин табибы Everyәр проект берничә спин анимация кулланган кебек. Кайберәүләр сәгать юлы белән әйләнәләр, икенчеләре сәгатенә каршы. Кемдер 360 градус бер әйләнеш ясый, икенчеләре тизрәк эффект өчен берничә борылыш ясый. Variәр вариация өчен аерым ачкычлар ясау урынына, әйдәгез, барлык сценарийларны эшкәртүче бер сыгылучан спин төзик:
/ * * Әйләнү - әйләнү анимациясе * Әйләнү диапазонын контрольдә тоту өчен --kf-spin-from һәм --kf-spin-кулланыгыз * Әйләнү күләмен контрольдә тоту өчен --kf-spin-борылыш кулланыгыз * Килешү буенча: 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); } { әйләндерү: кальк (var (- kf-spin-from, 0deg) + var (- kf-spin-to, 360deg) * var (- kf-spin-turn, 1)); } }
Хәзер без теләгән теләсә нинди спин вариациясен булдыра алабыз:
. йөкләү-әйләндергеч { анимация: kf-spin 1s сызыклы чиксез; / * Килешү куллана: 0дегтан 360дегга әйләнә * / }
.фаст-йөкләүче { анимация: kf-spin 1,2с җиңел булмаган чиксез альтернатива; --kf-spin-борылыш: 3; / * Cycleәр цикл өчен һәр юнәлеш өчен 3 тулы әйләнеш* / }
.steped-reverse { анимация: kf-spin 1,5с адым (8) чиксез; --kf-spin-to: -360deg; / * сәгатенә каршы * / }
.subtle-wiggle { анимация: kf-spin 2s җиңел-чиксез альтернатива; --kf-spin-from: -16deg; --kf-spin-to: 32deg; / * 36 градусны алыштырырга: -18дег белән + 18дег арасында / / }
Каләм ачкычлары токеннарын карагыз - Демо 5 [чигелгән] Амит Шин. Бу ысулның матурлыгы шунда: шул ук ачкыч рамкалар әйләндергечләрне йөкләү, иконаларны әйләндерү, эффектларны үзгәртү, хәтта катлаулы күп борылышлы анимацияләр өчен эшли. Пульс парадоксы Пульс анимацияләре хәйләкәр, чөнки алар төрле үзлекләрне "импульслый" ала. Кайберәүләр масштабны импульслый, икенчеләре караңгылыкны импульслый, һәм кайбер импульс төс үзенчәлекләрен яктылык яки туендыру кебек. Propertyәр мөлкәт өчен аерым ачкычлар булдыру урынына, без теләсә нинди CSS милеге белән эшли торган ачкычлар ясый алабыз. Менә масштаб һәм караңгылык вариантлары булган импульс ачкычының мисалы:
/ * * Пульс - анимация * Масштаб диапазонын контрольдә тоту өчен --kf-импульс-масштабтан һәм --kf-импульс-масштабтан кулланыгыз * Караңгылык диапазонын контрольдә тоту өчен --kf-pulse-opacity-from һәм --kf-pulse-opacity кулланыгыз. * Килешү буенча: импульс юк (барлык кыйммәтләр 1) * Куллану: * анимация: kf-импульс 2с җиңел булмаган чиксез альтернатива; * --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,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; / * масштаб һәм караңгылык импульсы * / }
Каләм ачкычлары токеннарын карагыз - Демо 6 [Амит Шин. Бу бердәнбер kf-импульс ачкычы нечкә игътибардан алып драматик күренешләргә кадәр барысын да эшкәртә ала, көйләү җиңел булганда. Алга киткән җиңеллек Клавиатура токеннарын куллануның иң яхшы әйберләренең берсе - анимация китапханәсен киңәйтү һәм күпчелек уйлап табучылар баштан ук язарга комачауламаган эффектлар белән тәэмин итү, эластик яки сикерү кебек. Менә гади “бонс” клавиатура токенының мисалы, сикерү биеклеген контрольдә тоту өчен --kf-bounce-махсус милектән кулланыла. / * * Бонс - керү анимациясе * Сикерү биеклеген контрольдә тоту өчен --kf-bounce-from кулланыгыз * Килешү буенча: 100вттан сикерә (экраннан) * Куллану: * анимация: kf-bounce 3s җиңел; * --kf-bounce-from: 200px; // 200px биеклектән сикерү * /
@keyframes kf-bounce { 0% { тәрҗемә итү: 0 кальк (var (- kf-bounce-from, 100vh) * -1); }
34% { тәрҗемә итү: 0 кальк (var (- kf-bounce-from, 100vh) * -0.4); }
55% { тәрҗемә итү: 0 кальк (var (- kf-bounce-from, 100vh) * -0.2); }
72% { тәрҗемә итү: 0 кальк (var (- kf-bounce-from, 100vh) * -0.1); }
85% { тәрҗемә итү: 0 кальк (var (- kf-bounce-from, 100vh) * -0.05); }
94% { тәрҗемә итү: 0 кальк (var (- kf-bounce-from, 100vh) * -0.025); }
99% { тәрҗемә итү: 0 кальк (var (- kf-bounce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { тәрҗемә итү: 0 0; анимация-вакыт-функция: җиңеллек; } }
"Эластик" кебек анимацияләр бераз катлаулырак, чөнки клавиатура эчендәге исәпләүләр. Безгә --kf-эластик-X-дан һәм --kf-эластик-Y-ны аерым билгеләргә кирәк (икесе дә өстәмә), һәм алар бергәләп безгә экранның теләсә кайсы ноктасыннан эластик керү урыны ясарга рөхсәт итәләр.
/ * * Эластик кертү - эластик керү анимациясе * Старт позициясен контрольдә тоту өчен --kf-эластик-дан-X һәм --kf-эластик-Y-кулланыгыз * Килешү буенча: өске үзәктән керә (0, -100vh) * Куллану: * анимация: kf-эластик-2с икесендә дә җиңел; * --kf-эластик-X-дан: -50px; * --kf-эластик-дан-Y: -200px; // керегез (-50px, -200px) * /
@keyframes kf-эластик-in { 0% { тәрҗемә итү: кальк (var (- kf-эластик-X-дан, -50вв) * 1) кальк (var (- kf-эластик-дан-Y, 0px) * 1); }
16% { тәрҗемә итү: кальк (var (- kf-эластик-X-дан, -50вв) * -0.3227) кальк (var (- kf-эластик-дан-Y, 0px) * -0.3227); }
28% { тәрҗемә итү: кальк (var (- kf-эластик-X-дан, -50вв) * 0.1312)кальк (var (- kf-эластик-дан-Y, 0px) * 0.1312); }
44% { тәрҗемә итү: кальк (var (- kf-эластик-X-дан, -50вв) * -0.0463) кальк (var (- kf-эластик-дан-Y, 0px) * -0.0463); }
59% { тәрҗемә итү: кальк (var (- kf-эластик-X-дан, -50вв) * 0.0164) кальк (var (- kf-эластик-дан-Y, 0px) * 0.0164); }
73% { тәрҗемә итү: кальк (var (- kf-эластик-X-дан, -50вв) * -0.0058) кальк (var (- kf-эластик-дан-Y, 0px) * -0.0058); }
88% { тәрҗемә итү: кальк (var (- kf-эластик-X-дан, -50вв) * 0,0020) кальк (var (- kf-эластик-дан-Y, 0px) * 0,0020); }
100% { тәрҗемә итү: 0 0; } }
Бу алым, бер махсус милекне үзгәртеп, безнең проект буенча алдынгы клавиатураларны кабат куллануны җиңеләйтә.
.bounce-and-zoom { анимация: kf-bounce 3s җиңеллек, kf-zoom 3s сызыклы; --kf-zoom-from: 0; }
.bounce-and-слайд { анимация-композиция: өстәргә; / * Ике анимация дә тәрҗемә куллана * / анимация: kf-bounce 3s җиңеллек, kf-слайд-3с җиңел; --kf-слайд-дан: -200px; }
.еластик анимация: kf-эластик-2с икесендә дә җиңел; }
Каләм ачкычлары токеннарын карагыз - Демо 7 [Amit Sheen]. Бу вакытка кадәр без акыллы һәм эффектив рәвештә ачкыч рамкаларын ничек берләштерә алуыбызны күрдек. Әлбәттә, сез проект ихтыяҗларына туры килер өчен әйберләрне тәртипкә китерергә телисез, ләкин без берничә уртак анимация һәм көндәлек куллану очракларын яктырттык. Theseәм бу клавиатура билгеләре белән, без хәзер бөтен проект буенча эзлекле, тотрыклы анимацияләр булдыру өчен көчле төзелеш блокларыбыз бар. Бүтән кабатланмаган ачкычлар, глобаль масштабтагы конфликтлар юк. Барлык анимация ихтыяҗларыбызны чишү өчен чиста, уңайлы ысул. Ләкин чын сорау: Бу блокларны ничек бергә туплыйбыз? Барысын бергә туплау Без төп клавиатура билгеләрен берләштерү гади икәнен күрдек. Безгә махсус бернәрсә кирәк түгел, беренче анимацияне билгеләү, икенчесен билгеләү, кирәк булганда үзгәрүчәннәрне билгеләү, һәм ул шулай. / * Слайдта сүнде * / .toast { анимация: kf-fade-in 0.4s, kf-слайд-0,4 куб-безиер (0,34, 1.56, 0.64, 1); --kf-слайд-дан: 0 40px; }
/ * Зурайту + сүнә * / .modal { анимация: kf-fade-in 0.3s, kf-zoom 0.3s куб-безиер (0,34, 1.56, 0.64, 1); --kf-zoom-from: 0.7; --kf-zoom-to: 1; }
/ * Слайд + импульс * / .notification { анимация: kf-слайд-0,5, kf-импульс 1,2с җиңел-чиксез альтернатива; --kf-слайд-дан: -100px 0; --kf-импульс-масштабтан: 0,95; --kf-импульс-масштаб-дан: 1,05; }
Бу комбинацияләр бик яхшы эшли, чөнки һәр анимация төрле милекне максат итә: караңгылык, үзгәртү (тәрҗемә итү / масштаб) һ.б. Ләкин кайвакыт конфликтлар килеп чыга, һәм без аларга ни өчен һәм ничек эшләргә икәнен белергә тиеш. Ике анимация бер үк милекне җанландырырга тырышканда - мәсәлән, анимация масштабы да, анимация караңгылыгы да - нәтиҗә сез көткәнчә булмас. Килешү буенча анимацияләрнең берсе генә шул милектә кулланыла, анимация исемлегендә соңгысы. Бу CSSның бер үк милектә берничә анимация белән эш итүенең чикләнеше. Мәсәлән, бу теләгәнчә эшләмәячәк, чөнки kf-импульс анимациясе генә кулланылачак. .bad-combo { анимация: kf-zoom алга 0,5 алга, kf-импульс 1,2с чиксез альтернатива; --kf-zoom-from: 0,5; --kf-zoom-to: 1.2; --kf-импульс-масштаб-дан: 0.8; --kf-импульс-масштаб: 1,1; }
Анимация өстәмәсе Бер үк милеккә тәэсир итүче берничә анимация белән эш итүнең иң гади һәм туры ысулы - анимация-композиция милеген куллану. Aboveгарыдагы соңгы мисалда, kf-импульс анимациясе kf-zoom анимациясен алыштыра, шуңа күрә без башлангыч зумны күрмәячәкбез һәм көтелгән масштабны 1,2 кадәр алмаячакбыз. Кушу өчен анимация-композиция куеп, без браузерга ике анимацияне дә кушарга кушабыз. Бу безгә теләгән нәтиҗәне бирә. компонент-ике { анимация-композиция: өстәргә; }
Каләм ачкычлары токеннарын карагыз - Демо 8 [Amit Sheen]. Бу ысул күпчелек очракта яхшы эшли, без бер үк милеккә эффектларны берләштерергә телибез. Анимацияләрне статик милек кыйммәтләре белән берләштерергә кирәк булганда шулай ук файдалы. Мисал өчен, бездә тәрҗемә милеген без теләгән урынга урнаштыру өчен кулланган элемент бар икән, һәм без аны kf-слайд-клавиатура белән җанландырырга телибез икән, анимация-композициясез ямьсез күренгән сикерү алабыз. Каләм ачкычлары токеннарын карагыз - Демо 9 [Amit Sheen]. Анимация-композиция өстәргә, анимация булганнары белән шома берләштереләүзгәртү, шуңа күрә элемент урында тора һәм көтелгәнчә җанландыра. Анимация Берничә анимация белән эш итүнең тагын бер ысулы - аларны "селкетү", ягъни беренче анимацияне беренчесе беткәч бераз башлау. Бу һәрбер очракта эшли торган чишелеш түгел, ләкин бездә анимация булганда, өзлексез анимация булганда файдалы. / * караңгылык импульсында бетә * / .notification { анимация: kf-fade-in 2s җиңеллек, kf-импульс 0,5с 2с җиңел булмаган чиксез альтернатива; --kf-импульс-караңгылык: 0,5; }
Каләм ачкычлары токеннарын карагыз - Демо 10 [Amit Sheen]. Заказ мәсьәләләре Трансформация милеген кулланып эшләгән анимацияләрнең зур өлеше. Күпчелек очракта бу уңайлырак. Бу шулай ук эш өстенлегенә ия, чөнки трансформация анимацияләре GPU-тизләнергә мөмкин. Әгәр дә без трансформацияләрне куллансак, без үзгәртү тәртибебезнең мөһимлеген кабул итәргә тиеш. Күп. Хәзерге вакытта безнең ачкыч рамкаларда без индивидуаль үзгәртеп корулар кулландык. Specрнәкләр буенча, алар һәрвакыт билгеле тәртиптә кулланыла: башта элемент тәрҗемә ителә, аннары әйләнә, аннары масштаб. Бу мәгънәле һәм безнең күбебез көткәнчә. Ләкин, без үзгәртү милеген куллансак, функцияләрнең язылган тәртибе - алар куллану тәртибе. Бу очракта, без X күчәрендә 100 пиксель әйберне күчерсәк, аны 45 градуска әйләндерсәк, ул аны башта 45 градуска әйләндереп, аннары 100 пиксельгә күчерү белән бертигез түгел. / * Алсу квадрат: Башта тәрҗемә итегез, аннары әйләндерегез * / .example-one { үзгәртү: translateX (100px) әйләнү (45дег); }
/ * Яшел квадрат: Башта әйләнегез, аннары тәрҗемә итегез * / .example-two { үзгәртү: әйләндерү (45дег) translateX (100px); }
Каләм ачкычлары Токеннарын карагыз - Демо 11 [Amit Sheen]. Ләкин үзгәртү тәртибе буенча, барлык индивидуаль трансформацияләр - без клавиатура билгеләре өчен кулланган бар нәрсә - трансформация функцияләре алдыннан була. Димәк, трансформация милегендә куйган нәрсәләр анимацияләрдән соң булачак. Ләкин, мәсәлән, kf-spin ачкычлары белән бергә тәрҗемә итсәгез, тәрҗемә анимация алдыннан булачак. Буталды әле ?! Бу статик кыйммәтләр бер үк анимация өчен төрле нәтиҗәләргә китерә алган ситуацияләргә китерә, түбәндәге очрактагы кебек:
/ * Ике спиннер өчен дә гомуми анимация * / .spinner { анимация: kf-spin 1s сызыклы чиксез; }
/ * Алсу әйләндергеч: әйләнгәнче тәрҗемә итегез (индивидуаль трансформация) * / .спиннер-алсу { тәрҗемә итү: 100% 50%; }
/ * Яшел әйләндергеч: әйләндерегез, аннары тәрҗемә итегез (функция тәртибе) * / .спиннер-яшел { үзгәртү: тәрҗемә итү (100%, 50%); }
Каләм ачкычлары токеннарын карагыз - Демо 12 [Амит Шин. Күрәсең, беренче әйләндергеч (алсу) kf-спин әйләнү алдыннан булган тәрҗемәне ала, шуңа күрә ул башта үз урынына күчә, аннары әйләнә. Икенче әйләндергеч (яшел) тәрҗемә () функциясен ала, ул индивидуаль трансформациядән соң була, шуңа күрә элемент башта әйләнә, аннары хәзерге почмагына караганда хәрәкәтләнә, һәм без шул киң орбита эффектын алабыз. , К, бу хата түгел. Бу CSS турында белергә һәм берничә анимация яки күп трансформация белән эшләгәндә истә тотарга кирәк. Кирәк булса, сез шулай ук kf-spin-alt ачкыч рамкалар җыелмасын булдыра аласыз, алар әйләнү () функциясен кулланып элементларны әйләндерәләр. Күчерелгән хәрәкәт Alternativeәм без альтернатив ачкычлар турында сөйләшкәндә, "анимация юк" опциясен санга сукмыйбыз. Клавиатура билгеләрен куллануның иң зур өстенлеге - мөмкинлекне пешереп була, һәм моны эшләү бик җиңел. Мөмкинлекне истә тотып, безнең ачкыч рамкаларыбызны эшләп, без кыскартылган хәрәкәтне өстен күргән кулланучыларның өстәмә эш яки код кабатланмыйча, йомшак, азрак тәҗрибә туплавын тәэмин итә алабыз. "Кыскартылган хәрәкәт" нең төгәл мәгънәсе бер анимациядән икенчесенә, проекттан проектка бераз үзгәрергә мөмкин, ләкин монда берничә мөһим фикерне истә тотарга кирәк: Клавиатураларны сүндерү Кайбер анимацияләрне йомшартырга яки акрынайтырга мөмкин булса да, кыскартылган хәрәкәт соралганда бөтенләй юкка чыгарга тиеш. Пульс анимацияләре яхшы үрнәк. Бу анимацияләр кыскартылган хәрәкәт режимында эшләмәсен өчен, без аларны тиешле медиа соравына төрә алабыз.
@media (кыскартылган-хәрәкәтне өстен күрә: өстенлек юк) { @keyfrmaes kf-pulse { { масштаб: var (- kf-импульс-масштаб-дан, 1); караңгылык: var (- kf-импульс-караңгылык-дан, 1); } { масштаб: var (- kf-импульс-масштаб-дан, 1); караңгылык:var (- kf-импульс-караңгылык, 1); } } }
Бу киметү өчен өстенлекле-киметелгән хәрәкәт куйган кулланучылар анимацияне күрмәячәкләр һәм аларның өстенлекләренә туры килгән тәҗрибә алачаклар. Мөгаен Кайбер ачкычлар бар, без аларны бетерә алмыйбыз, мәсәлән, керү анимацияләре. Кыйммәт үзгәрергә тиеш, җанландырырга тиеш; югыйсә, элементның дөрес кыйммәтләре булмас. Ләкин кыскартылган хәрәкәттә, башлангыч кыйммәттән бу күчү тиз булырга тиеш. Бу максатка ирешү өчен, без өстәмә ачкычлар җыелмасын билгеләячәкбез, анда кыйммәт шунда ук ахырга кадәр сикерә. Болар безнең төп ачкычларга әйләнәләр. Аннары, без алдагы мисалдагы кебек, өстенлекле-кыскартылган хәрәкәт өчен медиа соравы эчендә регуляр ачкычлар өстәячәкбез. / * кыскартылган хәрәкәт өчен шунда ук керегез * / @keyframes kf-zoom { дан, { масштаб: var (- kf-zoom-to, 1); } }
@media (кыскартылган-хәрәкәтне өстен күрә: өстенлек юк) { / * Оригиналь зурайту ачкычлары * / @keyframes kf-zoom { { масштаб: var (- kf-zoom-from, 0.8); } { масштаб: var (- kf-zoom-to, 1); } } }
Шул рәвешле, кыскартылган хәрәкәтне өстен күргән кулланучылар элементның тиз арада соңгы хәлендә күренәчәк, калганнары анимацияле күчү ала. Йомшак караш Без ниндидер хәрәкәтне сакларга теләгән очраклар бар, ләкин оригиналь анимациягә караганда күпкә йомшак һәм тынычрак. Мисал өчен, без сикерү подъездын йомшак сүнү белән алыштыра алабыз.
@keyframes kf-bounce { / * Кыскартылган хәрәкәт өчен йомшак сүнү * / }
@media (кыскартылган-хәрәкәтне өстен күрә: өстенлек юк) { @keyframes kf-bounce { / * Оригиналь сикерү ачкычлары * / } }
Хәзерге вакытта хәрәкәтне киметкән кулланучылар тышкы кыяфәтне сизәләр, ләкин сикерү яки эластик анимациянең көчле хәрәкәтеннән башка. Төзелеш блоклары булганда, чираттагы сорау - аларны ничек эш процессының өлеше итү. Эластик клавиатуралар язу - бер нәрсә, ләкин аларны зур проектта ышанычлы итү берничә стратегия таләп итә, миңа авыр юлны өйрәнергә туры килде. Стратегияләр һәм иң яхшы практикалар Клавиатура билгеләренең каты китапханәсе булганнан соң, төп проблема - аларны көндәлек эшкә ничек кертү.
Вәсвәсә - барлык ачкычларны берьюлы ташлау һәм проблеманың чишелүен игълан итү, ләкин практикада мин иң яхшы нәтиҗәләрнең әкренләп кабул итүдән килгәнен таптым. Иң еш очрый торган анимацияләрдән башлап җибәрегез, мәсәлән, сүнгән яки слайд. Бу җиңел җиңүләр, зур язуны таләп итмичә тиз бәяне күрсәтәләр. Исем бирү - игътибарга лаек тагын бер пункт. Эзлекле префикс яки исем киңлеге нинди анимация билгеләре, кайсысы җирле бер тапкыр булуын ачыклый. Бу шулай ук очраклы бәрелешләрдән саклый һәм яңа команда әгъзаларына уртак системаны бер карашта танырга булыша. Документация кодның үзе кебек үк мөһим. Keyәрбер клавиатура токены өстендә кыска аңлатма соңрак фаразлау сәгатьләрен саклап кала ала. Төзүче токен файлын ача, кирәкле эффектны сканерлый һәм куллану үрнәген турыдан-туры үз компонентына күчерә белергә тиеш. Эчлек - бу ысулны тырышлыкка лаек итә. Акыллы гадәтләрне фаш итеп, без анимацияне системаны бозмыйча җайлаштыру өчен командаларга бүлмә бирәбез. Шул ук вакытта, катлауланмаска тырышыгыз. Мөһим булган төймәләрне тәэмин итегез, калганнарын фикердә тотыгыз. Ниһаять, мөмкинлекне исегездә тотыгыз. Everyәр анимация кыскартылган хәрәкәт альтернативасына мохтаҗ түгел, ләкин күпләргә кирәк. Бу төзәтмәләрне иртәрәк пешерү - без аларны соңрак яңадан эшкәртергә тиеш түгел, һәм бу безнең кулланучылар игътибар итәчәк дәрәҗәне күрсәтә, хәтта алар искә алмасалар да.
Минем тәҗрибәмдә, клавиатура токеннарын безнең дизайн билгеләренең эш процессы өлеше итеп тоту - аларны ябыштыра. Алар урнашканнан соң, алар үзләрен махсус эффектлар кебек хис итүләрен туктаталар һәм дизайн теленең бер өлеше булалар, продуктның хәрәкәтләнүенең һәм реакциясенең табигый киңәюе. Урлау Анимацияләр интерфейслар төзүнең иң шатлыклы өлеше булырга мөмкин, ләкин структурасыз, алар шулай ук иң зур өметсезлек чыганакларының берсе булырга мөмкин. Клавиатураларны билгеләр итеп кабул итеп, сез гадәттә тәртипсез һәм идарә итү авыр булган әйберне аласыз, аны ачык, алдан әйтеп була торган системага әйләндерәсез. Чын кыйммәт берничә кодны саклап калу гына түгел. Сүнгән, слайд, зурайту яки әйләндерү кулланганда, аның проект буенча үзен ничек тотарын төгәл беләсең. Бу чиксез вариацияләр хаосыннан башка махсус характеристикалардан килә торган сыгылучылыкта. Itәм ул өстәлгән кебек түгел, нигезгә салынгануйлану. Мин бу идеяларның төрле командаларда һәм төрле код базаларында эшләвен күрдем, һәм үрнәк һәрвакыт бер үк. Токеннар урнашканнан соң, клавиатуралар таралган хәйләләр җыелмасы булудан туктыйлар һәм дизайн теленең бер өлеше булалар. Алар продуктны белә торып, эзлекле һәм тере тоялар. Әгәр дә сез бу мәкаләдән бер әйбер алсагыз, болай булсын: анимацияләр без төсләргә, типографиягә, араларга бирелгән шул ук кайгыртуга һәм структурага лаек. Клавиатура билгеләренә кечкенә инвестиция сезнең интерфейс хәрәкәт иткән саен түләнә.
