Įsivaizduokite taip: prisijungiate prie naujo projekto, pasineriate į kodų bazę ir per pirmąsias kelias valandas atrandate kažką varginančio pažįstamo. Stilių lapuose rasite kelis @keyframes apibrėžimus toms pačioms pagrindinėms animacijoms. Trys skirtingi išnykimo efektai, du ar trys skaidrių variantai, keletas priartinimo animacijų ir bent dvi skirtingos sukimosi animacijos, nes, na, kodėl gi ne? @keyframes impulsas { nuo { skalė: 1; } į { skalė: 1,1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { skalė: 1; } 10%, 40% { skalė: 1,2; } }
Jei šis scenarijus skamba pažįstamas, jūs ne vieni. Remdamasis įvairių projektų patirtimi, vienas nuosekliausių greitų laimėjimų, kurį galiu pasiekti, yra pagrindinių kadrų konsolidavimas ir standartizavimas. Tai tapo tokiu patikimu modeliu, kad dabar laukiu šio valymo kaip vienos iš pirmųjų užduočių bet kurioje naujoje kodų bazėje. Chaoso logika Šis perteklius yra visiškai prasmingas, kai apie tai pagalvoji. Kasdieniame darbe visi naudojame tas pačias pagrindines animacijas: blukimą, skaidres, priartinimą, sukimąsi ir kitus įprastus efektus. Šios animacijos yra gana paprastos, o norint atlikti darbą nesunku sukurti greitą @keyframes apibrėžimą. Be centralizuotos animacijos sistemos kūrėjai natūraliai rašo šiuos pagrindinius kadrus nuo nulio, nežinodami, kad panašios animacijos jau egzistuoja kitur kodų bazėje. Tai ypač būdinga dirbant su komponentais pagrįsta architektūra (ką šiais laikais daro dauguma mūsų), nes komandos dažnai lygiagrečiai dirba įvairiose programos dalyse. Rezultatas? Animacijos chaosas. Mažoji Problema Akivaizdžiausios problemos, susijusios su pagrindinių kadrų dubliavimu, yra sugaištas kūrimo laikas ir nereikalingas kodo išpūtimas. Keli pagrindinių kadrų apibrėžimai reiškia kelias vietas, kurias reikia atnaujinti pasikeitus reikalavimams. Reikia koreguoti blukimo animacijos laiką? Turėsite surasti kiekvieną egzempliorių savo kodų bazėje. Norite standartizuoti palengvinimo funkcijas? Sėkmės ieškant visų variantų. Dėl tokio priežiūros taškų skaičiaus padauginimo net paprasti animacijos atnaujinimai tampa daug laiko reikalaujančia užduotimi. Didesnė Problema Šis pagrindinių kadrų dubliavimas sukuria daug klastingesnę problemą, slypinčią po paviršiumi: visuotinės apimties spąstus. Net dirbant su komponentų architektūromis, CSS pagrindiniai kadrai visada apibrėžiami visuotinėje srityje. Tai reiškia, kad visi pagrindiniai kadrai taikomi visiems komponentams. Visada. Taip, jūsų animacijoje nebūtinai naudojami pagrindiniai kadrai, kuriuos nustatėte savo komponente. Jis naudoja paskutinius pagrindinius kadrus, atitinkančius tą patį pavadinimą, kurie buvo įkelti į visuotinę sritį. Kol visi pagrindiniai kadrai yra identiški, tai gali atrodyti kaip nedidelė problema. Tačiau tuo metu, kai norite pritaikyti animaciją konkrečiam naudojimo atvejui, turėsite problemų arba, dar blogiau, jas sukelsite jūs. Arba jūsų animacija neveiks, nes kitas komponentas įkeltas po jūsų ir perrašo jūsų pagrindinius kadrus, arba jūsų komponentas įkeliamas paskutinis ir netyčia pakeičia kiekvieno kito komponento, naudojančio tą pagrindinio kadro pavadinimą, animacijos elgseną, o jūs to galite net nesuvokti. Štai paprastas pavyzdys, parodantis problemą: .component-one { /* komponentų stiliai */ animacija: pulsas 1s lengvumas į ir išeina begalinis pakaitinis; }
/* šis @keyframes apibrėžimas neveiks */ @keyframes impulsas { nuo { skalė: 1; } į { skalė: 1,1; } }
/* vėliau kode... */
.component-two { /* komponentų stiliai */ animacija: pulsas 1s lengvumas į-išeina begalinis; }
/* šie pagrindiniai kadrai bus taikomi abiem komponentams */ @keyframes impulsas { 0%, 20%, 100% { skalė: 1; } 10%, 40% { skalė: 1,2; } }
Abu komponentai naudoja tą patį animacijos pavadinimą, tačiau antrasis @keyframes apibrėžimas perrašo pirmąjį. Dabar ir vienas, ir antrasis komponentas naudos antruosius pagrindinius kadrus, neatsižvelgiant į tai, kuris komponentas apibrėžė, kuriuos pagrindinius kadrus. Žr. rašiklio raktinių kadrų žetonus – 1 demonstracinę versiją, kurią sukūrė Amit Sheen. Blogiausia dalis? Tai dažnai puikiai veikia vietinėje plėtroje, tačiau gamyboje paslaptingai nutrūksta, kai kūrimo procesai keičia stilių lentelių įkėlimo tvarką. Gaunate animacijas, kurios elgiasi skirtingai, priklausomai nuo to, kurie komponentai įkeliami ir kokia seka. Sprendimas: vieningi raktiniai kadrai Atsakymas į šį chaosą yra stebėtinai paprastas: iš anksto nustatyti dinaminiai pagrindiniai kadrai, saugomi bendrame stiliaus lape. Užuot leidę kiekvienam komponentui apibrėžti savo animacijas, kuriame centralizuotus pagrindinius kadrus, kurie yra gerai dokumentuoti ir lengvai naudojaminaudoti, prižiūrėti ir pritaikyti konkretiems jūsų projekto poreikiams. Pagalvokite apie tai kaip apie pagrindinių kadrų žetonus. Kaip mes naudojame žetonus spalvoms ir tarpams nustatyti, o daugelis iš mūsų jau naudoja žetonus animacijos ypatybėms, pvz., trukmės ir lengvinimo funkcijoms, taip pat kodėl gi ne naudoti žetonus ir pagrindiniams kadrams? Šis metodas gali būti natūraliai integruotas į bet kurią dabartinę jūsų naudojamą dizaino prieigos rakto darbo eigą, tuo pačiu išspręsdamas nedidelę problemą (kodo dubliavimas), ir didesnę problemą (pasaulinės apimties konfliktus). Idėja paprasta: sukurkite vieną tiesos šaltinį visoms mūsų bendroms animacijoms. Šiame bendrinamame stiliaus lape yra kruopščiai sukurti pagrindiniai kadrai, apimantys mūsų projekte iš tikrųjų naudojamus animacijos modelius. Nebereikia spėlioti, ar kur nors mūsų kodų bazėje jau yra išnykusi animacija. Nebereikia netyčia perrašyti animacijų iš kitų komponentų. Bet čia yra raktas: tai nėra tik statinės kopijavimo ir įklijavimo animacijos. Jie sukurti taip, kad būtų dinamiški ir pritaikomi naudojant tinkintas CSS ypatybes, todėl galime išlaikyti nuoseklumą, tuo pat metu lanksčiai pritaikydami animacijas konkretiems naudojimo atvejams, pavyzdžiui, jei jums reikia šiek tiek didesnės „pulsinės“ animacijos vienoje vietoje. Pirmojo pagrindinių kadrų prieigos rakto kūrimas Vienas iš pirmųjų žemai kabančių vaisių, su kuriuo turėtume kovoti, yra „išnykstanti“ animacija. Viename iš savo naujausių projektų radau daugiau nei tuziną atskirų išnykimo apibrėžimų, ir taip, jie visi paprasčiausiai padidino neskaidrumą nuo 0 iki 1. Taigi, sukurkime naują stiliaus lapą, pavadinkime jį kf-tokens.css, importuokime jį į savo projektą ir įdėkite savo pagrindinius kadrus su tinkamais komentarais. /* keyframes-tokens.css */
/* * Fade In – išnyks įėjimo animacija * Naudojimas: animacija: kf-fade-in 0.3s palengvinimas; */ @keyframes kf-fade-in { nuo { neskaidrumas: 0; } į { neskaidrumas: 1; } }
Ši viena @keyframes deklaracija pakeičia visas mūsų kodų bazėje išsklaidytas išnykstančias animacijas. Švarus, paprastas ir taikomas visame pasaulyje. Ir dabar, kai apibrėžėme šį prieigos raktą, galime jį naudoti iš bet kurio projekto komponento: .modal { animacija: kf-fade-in 0,3s easy-out; }
.tooltip { animacija: kf-fade-in 0,2s easy-in-out; }
.notification { animacija: kf-fade-in 0,5s easy-out; }
Žiūrėkite Amit Sheen „Pen Keyframes Tokens“ – Demo 2 [forked]. Pastaba: visuose @keyframes pavadinimuose naudojame priešdėlį kf. Šis priešdėlis naudojamas kaip vardų erdvė, kuri apsaugo nuo pavadinimų konfliktų su esamomis projekto animacijomis ir leidžia iš karto suprasti, kad šie pagrindiniai kadrai yra iš mūsų pagrindinių kadrų atpažinimo ženklų failo. Dinaminės skaidrės kūrimas Kf-fade-in pagrindiniai kadrai veikia puikiai, nes jie yra paprasti ir yra mažai vietos viską sujaukti. Tačiau kitose animacijose turime būti daug dinamiškesnės ir čia galime panaudoti didžiulę tinkintų CSS savybių galią. Čia pagrindinių kadrų prieigos raktai tikrai šviečia, palyginti su išsklaidytomis statinėmis animacijomis. Paimkime įprastą scenarijų: „įstumiama“ animacija. Bet iš kur įlįsti? 100px iš dešinės? 50% iš kairės? Ar jis turėtų patekti iš ekrano viršaus? O gal įplaukti iš apačios? Tiek daug galimybių, bet užuot kurę atskirus raktinius kadrus kiekvienai krypčiai ir kiekvienam variantui, galime sukurti vieną lankstų prieigos raktą, kuris prisitaiko prie visų scenarijų: /* * Slide In – kryptinė skaidrių animacija * Norėdami valdyti kryptį, naudokite --kf-slide-from * Numatytasis: slenka iš kairės (-100%) * Naudojimas: * animacija: kf-slide-in 0,3 s palengvinimas; * --kf-slide-from: -100px 0; // slyskite iš kairės * --kf-slide-from: 100px 0; // slyskite iš dešinės * --kf-slide-from: 0 -50px; // slysta iš viršaus */
@keyframes kf-slide-in { nuo { išversti: var(--kf-slide-from, -100% 0); } į { išversti: 0 0; } }
Dabar galime naudoti šį vieną @keyframes prieigos raktą bet kuriai skaidrės krypčiai, tiesiog pakeisdami pasirinktinę ypatybę --kf-slide-from: .sidebar { animacija: kf-slide-in 0,3s easy-out; /* Naudoja numatytąją reikšmę: skaidrės iš kairės */ }
.notification { animacija: kf-slide-in 0,4s easy-out; --kf-slide-from: 0-50px; /* skaidrė iš viršaus */ }
.modal { animacija: kf-fade-in 0,5 s, kf-slide-in 0,5 s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* slydimas iš apačios į dešinę */ }
Šis metodas suteikia mums neįtikėtiną lankstumą išlaikant nuoseklumą. Viena pagrindinių kadrų deklaracija, begalinės galimybės. Žr. Amit Sheen „Pen Keyframes Tokens“ – Demo 3 [forked]. Ir jei norime, kad mūsų animacijos būtų dar lankstesnės, taip pat būtų galima naudoti „išstumiamus“ efektus, galimetiesiog pridėkite --kf-slide-to pasirinktinę nuosavybę, panašią į tai, ką matysime kitame skyriuje. Dviejų krypčių priartinimo raktiniai kadrai Kita įprasta animacija, kuri dubliuojasi visuose projektuose, yra mastelio keitimo efektai. Nesvarbu, ar tai būtų subtilus tostų pranešimų mastelio padidinimas, dramatiškas modalų priartinimas ar švelnus antraščių mastelio mažinimo efektas, priartinimo animacijos yra visur. Užuot kurę atskirus kiekvienos mastelio vertės pagrindinius kadrus, sukurkime vieną lankstų kf-zoom pagrindinių kadrų rinkinį:
/* * Zoom – mastelio animacija * Norėdami valdyti mastelio reikšmes, naudokite --kf-zoom-from ir --kf-zoom-to * Numatytasis: padidina nuo 80% iki 100% (0,8 iki 1) * Naudojimas: * Animacija: kf-zoom 0.2s palengvinimas; * --kf-zoom-from: 0,5; --kf-zoom-to: 1; // priartinti nuo 50% iki 100% * --kf-zoom-from: 1; --kf-zoom-to: 0; // priartinti nuo 100% iki 0% * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // padidinti nuo 100% iki 110% */
@keyframes kf-zoom { nuo { mastelis: var(--kf-zoom-from, 0.8); } į { mastelis: var(--kf-zoom-to, 1); } }
Su vienu apibrėžimu galime pasiekti bet kokį priartinimo variantą, kurio mums reikia: .toast { animacija: kf-slide-in 0,2s, kf-zoom 0.4s palengvinimas; --kf-slide-from: 0 100%; /* skaidrė iš viršaus */ /* Naudojamas numatytasis mastelio keitimas: keičiasi nuo 80% iki 100% */ }
.modal { animacija: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-nuo: 0; /* dramatiškas priartinimas nuo 0% iki 100% */ }
.heading { animacija: kf-fade-in 2s, kf-zoom 2s lengvas priartinimas; --kf-zoom-nuo: 1.2; --kf-zoom-to: 0,8; /* švelniai sumažinti */ }
Numatytasis 0,8 (80 %) puikiai tinka daugeliui vartotojo sąsajos elementų, pvz., skrudintų pranešimų ir kortelių, tačiau jį vis tiek lengva pritaikyti ypatingais atvejais. Žiūrėkite Amit Sheen „Pen Keyframes Tokens“ – Demo 4 [forked]. Galbūt pastebėjote ką nors įdomaus naujausiuose pavyzdžiuose: derinome animacijas. Vienas iš pagrindinių privalumų dirbant su @keyframes žetonais yra tai, kad jie sukurti taip, kad būtų sklandžiai integruoti vienas su kitu. Ši švelni kompozicija yra apgalvota, neatsitiktinė. Animacijos kompoziciją išsamiau aptarsime vėliau, įskaitant tai, kur jie gali tapti problemiški, tačiau dauguma derinių yra nesudėtingi ir lengvai įgyvendinami. Pastaba: Rašydamas šį straipsnį, o gal ir dėl jo rašymo, aš permąsčiau visą įėjimo animacijos idėją. Atsižvelgiant į visus naujausius CSS pasiekimus, ar mums jų išvis reikia? Laimei, Adamas Argyle'as išnagrinėjo tuos pačius klausimus ir puikiai juos išsakė savo tinklaraštyje. Tai neprieštarauja tam, kas čia parašyta, tačiau tai yra požiūris, kurį verta apsvarstyti, ypač jei jūsų projektai labai priklauso nuo įėjimo animacijos. Nuolatinės animacijos Nors įėjimo animacijos, pvz., „išnykimas“, „slinkimas“ ir „didinimas“, atsiranda vieną kartą ir tada sustoja, nuolatinė animacija tęsiasi neribotą laiką, kad atkreiptų dėmesį arba nurodytų vykdomą veiklą. Dvi dažniausiai pasitaikančios nuolatinės animacijos, su kuriomis susiduriu, yra „sukimas“ (įkėlimo indikatoriams) ir „pulsas“ (svarbiems elementams paryškinti). Šios animacijos kelia unikalių iššūkių, kai reikia sukurti pagrindinių kadrų prieigos raktus. Skirtingai nuo įėjimo animacijų, kurios paprastai pereina iš vienos būsenos į kitą, nuolatinės animacijos elgsenos modeliai turi būti lengvai pritaikomi. Sukimo gydytojas Atrodo, kad kiekviename projekte naudojamos kelios sukimosi animacijos. Vieni sukasi pagal laikrodžio rodyklę, kiti prieš laikrodžio rodyklę. Kai kurie sukasi vieną 360 laipsnių kampu, kiti – kelis kartus, kad efektas būtų greitesnis. Užuot kurę atskirus kiekvieno varianto pagrindinius kadrus, sukurkime vieną lanksčią sukimąsi, kuris tvarko visus scenarijus:
/* * Sukimas – sukimosi animacija * Norėdami valdyti sukimosi diapazoną, naudokite --kf-spin-from ir --kf-spin-to * Norėdami valdyti sukimosi kiekį, naudokite --kf-spin-turns * Numatytasis: sukasi nuo 0 laipsnių iki 360 laipsnių (1 pilnas apsisukimas) * Naudojimas: * animacija: kf-spin 1s linijinis begalinis; * --kf-spin-turns: 2; // 2 pilni apsisukimai * --kf-spin-from: 0deg; --kf-spin-to: 180 laipsnių; // Pusinis apsisukimas * --kf-spin-from: 0deg; --kf-spin-to: -360 laipsnių; // prieš laikrodžio rodyklę */
@keyframes kf-spin { nuo { pasukti: var(--kf-spin-from, 0deg); } į { pasukti: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Dabar galime sukurti bet kokį mums patinkantį sukimosi variantą:
.loading-spinner { animacija: kf-spin 1s tiesinis begalinis; /* Naudoja numatytuosius nustatymus: sukasi nuo 0 laipsnių iki 360 laipsnių */ }
.fast-loader { animacija: kf-spin 1.2s easy-in-out infinite alternate; --kf-spin-turns: 3; /* 3 pilni apsisukimai kiekviena kryptimi per ciklą*/ }
.steped-reverse { animacija: kf-spin 1,5s žingsniai(8) begalinis; --kf-spin-to: -360 laipsnių; /* prieš laikrodžio rodyklę */ }
.subtle-wiggle { animacija: kf-spin 2s easy-in-out infinite alternate; --kf-spin-nuo: -16 laipsnių; --kf-spin-to: 32deg; /* svyruoti 36 laipsniais: nuo -18 laipsnių iki +18 laipsnių */ }
Žr. Amit Sheen „Pen Keyframes Tokens“ – Demo 5 [forked]. Šio požiūrio grožis yra tas, kad tie patys pagrindiniai kadrai veikia įkeliant suktukus, sukasi piktogramas, siūbavimo efektus ir net sudėtingas kelių posūkių animacijas. Pulso paradoksas Impulsinė animacija yra sudėtingesnė, nes gali „pulsuoti“ skirtingas savybes. Kai kurie pulsuoja skalę, kiti – neskaidrumą, o kai kurie – spalvų savybes, pvz., ryškumą ar sodrumą. Užuot kurę atskirus kiekvienos nuosavybės pagrindinius kadrus, galime sukurti pagrindinius kadrus, kurie veiktų su bet kuria CSS nuosavybe. Štai impulsinio pagrindinio kadro su mastelio ir neskaidrumo parinktimis pavyzdys:
/* * Pulsas – pulsuojanti animacija * Norėdami valdyti skalės diapazoną, naudokite --kf-pulse-scale-from ir --kf-pulse-scale-to * Nepermatomumo diapazonui valdyti naudokite --kf-pulse-opacity-from ir --kf-pulse-pacity-to * Numatytasis: nėra pulso (visos reikšmės 1) * Naudojimas: * animacija: kf-pulse 2s easy-in-out begalinis pakaitinis; * --kf-impulso skalė-nuo: 0,95; --kf-pulse-scale-to: 1,05; // skalės impulsas * --kf-impulso neskaidrumas-nuo: 0,7; --kf-impulso neskaidrumas iki: 1; // neskaidrumo impulsas */
@keyframes kf-pulse { nuo { skalė: var(--kf-pulse-scale-from, 1); neskaidrumas: var(--kf-impulsas-nepermatomumas-nuo, 1); } į { skalė: var(--kf-pulse-scale-to, 1); neskaidrumas: var(--kf-impulsas-nepermatomas-to, 1); } }
Taip sukuriamas lankstus impulsas, galintis suaktyvinti kelias savybes: .call-to-action { animacija: kf-pulse 0.6s begalinis alternate; --kf-impulso neskaidrumas-nuo: 0,5; /* neskaidrumo impulsas */ }
.notification-dot { animacija: kf-pulse 0.6s easy-in-out infinite alternate; --kf-impulsinė skalė-nuo: 0,9; --kf-pulse-scale-to: 1.1; /* skalės impulsas */ }
.text-highlight { animacija: kf-pulse 1,5s easy-out begalinis; --kf-impulsinė skalė-nuo: 0,8; --kf-impulso neskaidrumas-nuo: 0,2; /* skalės ir neskaidrumo impulsas */ }
Žiūrėkite Amit Sheen „Pen Keyframes Tokens“ – Demo 6 [forked]. Šis vienas kf-impulsinis pagrindinis kadras gali valdyti viską nuo subtilaus dėmesio pritraukimo iki dramatiškų akcentų, o jį lengva pritaikyti. Išplėstinis palengvinimas Vienas iš puikių dalykų naudojant raktinių kadrų prieigos raktus yra tai, kaip lengva išplėsti animacijos biblioteką ir pateikti efektus, kurių dauguma kūrėjų nesivargintų rašydami nuo nulio, pvz., elastingus ar atšokančius. Štai paprasto „atšokimo“ raktinių kadrų prieigos rakto pavyzdys, kuris naudoja --kf-bounce-from tinkintą ypatybę šuolio aukščiui valdyti. /* * Bounce – šokinėjanti įėjimo animacija * Norėdami valdyti šuolio aukštį, naudokite --kf-bounce-from * Numatytasis: šokinėja nuo 100vh (ne ekrane) * Naudojimas: * animacija: „kf-bounce 3s“ lengvumas; * --kf-bounce-from: 200px; // šuolis iš 200 pikselių aukščio */
@keyframes kf-bounce { 0% { išversti: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34 % { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55 % { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72 % { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85 % { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94 % { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99 % { translate: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { išversti: 0 0; animacijos laiko funkcija: palengvinimas; } }
Tokios animacijos kaip „elastinė“ yra šiek tiek sudėtingesnės dėl skaičiavimų pagrindinių kadrų viduje. Turime atskirai apibrėžti --kf-elastic-from-X ir --kf-elastic-from-Y (abu yra neprivalomi), ir kartu jie leidžia mums sukurti elastingą įėjimą iš bet kurio ekrano taško.
/* * Elastic In – elastinga įėjimo animacija * Norėdami valdyti pradinę padėtį, naudokite --kf-elastic-from-X ir --kf-elastic-from-Y * Numatytasis: įeina iš viršaus centro (0, -100vh) * Naudojimas: * animacija: kf-elastic-in 2s easy-in-out abu; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // įveskite nuo (-50 piks., -200 piks.) */
@keyframes kf-elastic-in { 0% { išversti: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16 % { išversti: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28 % { išversti: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44 % { išversti: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59 % { išversti: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73 % { išversti: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88 % { išversti: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100 % { išversti: 0 0; } }
Šis metodas leidžia lengvai pakartotinai naudoti ir tinkinti išplėstinius pagrindinius kadrus mūsų projekte, tiesiog pakeitus vieną tinkintą ypatybę.
.bounce-and-zoom { animacija: „kf-bounce 3s“ lengvumas, kf-zoom 3s linijinis; --kf-zoom-nuo: 0; }
.bounce-and-slide { animacija-kompozicija: pridėti; /* Abiejose animacijose naudojamas vertimas */ animacija: „kf-bounce 3s“ lengvumas, kf-slide-in 3s easy-out; --kf-slide-from: -200px; }
.elastic-in { animacija: kf-elastic-in 2s easy-in-out abu; }
Žr. rašiklio raktinių kadrų žetonus – 7 demonstracinę versiją, kurią sukūrė Amit Sheen. Iki šiol matėme, kaip galime sumaniai ir efektyviai konsoliduoti pagrindinius kadrus. Žinoma, galbūt norėsite pakoreguoti dalykus, kad jie geriau atitiktų jūsų projekto poreikius, tačiau apžvelgėme kelių įprastų animacijų ir kasdienio naudojimo pavyzdžius. Įdiegę šiuos pagrindinių kadrų prieigos raktus, dabar turime galingus kūrimo blokus, leidžiančius kurti nuoseklias, prižiūrimas viso projekto animacijas. Nebebus pasikartojančių pagrindinių kadrų, jokių visuotinių apimties konfliktų. Tiesiog švarus ir patogus būdas patenkinti visus mūsų animacijos poreikius. Tačiau tikrasis klausimas yra toks: kaip mes kartu sudarome šiuos statybinius blokus? Viską sudėjus Matėme, kad pagrindinių pagrindinių kadrų žetonų derinimas yra paprastas. Mums nereikia nieko ypatingo, kaip tik apibrėžti pirmąją animaciją, apibrėžti antrąją, nustatyti kintamuosius pagal poreikį ir viskas. /* Išblukti + įstumti */ .toast { animacija: kf-fade-in 0,4 s, kf-slide-in 0,4 s kubinis-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Padidinti + išnykti */ .modal { animacija: kf-fade-in 0,3 s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-nuo: 0,7; --kf-zoom-to: 1; }
/* Įstumkite + pulsas */ .notification { animacija: kf-slide-in 0,5 s, kf-pulse 1.2s easy-in-out begalinis alternate; --kf-slide-from: -100px 0; --kf-impulsinė skalė-nuo: 0,95; --kf-pulse-scale-to: 1,05; }
Šie deriniai veikia puikiai, nes kiekviena animacija nukreipta į skirtingą ypatybę: neskaidrumą, transformaciją (išversti / mastelį) ir tt Tačiau kartais kyla konfliktų, todėl turime žinoti, kodėl ir kaip juos spręsti. Kai dvi animacijos bando animuoti tą pačią ypatybę, pavyzdžiui, abu animuoja mastelį arba abu animuoja neskaidrumą, rezultatas nebus toks, kokio tikitės. Pagal numatytuosius nustatymus šiai nuosavybei iš tikrųjų taikoma tik viena iš animacijų, kuri yra paskutinė animacijų sąraše. Tai riboja, kaip CSS tvarko kelias animacijas toje pačioje nuosavybėje. Pavyzdžiui, tai neveiks taip, kaip numatyta, nes bus taikoma tik kf-pulse animacija. .bad-combo { animacija: kf-zoom 0.5s pirmyn, kf-impulsas 1.2s begalinis alternate; --kf-zoom-nuo: 0,5; --kf-zoom-to: 1.2; --kf-impulsinė skalė-nuo: 0,8; --kf-pulse-scale-to: 1.1; }
Animacijos papildymas Paprasčiausias ir tiesiausias būdas tvarkyti kelias animacijas, turinčias įtakos tai pačiai nuosavybei, yra naudoti animacijos kompozicijos ypatybę. Paskutiniame aukščiau pateiktame pavyzdyje kf-pulse animacija pakeičia kf-zoom animaciją, todėl nematysime pradinio mastelio keitimo ir negausime numatomo mastelio iki 1,2. Nustatydami pridėtinę animacijos kompoziciją, mes nurodome naršyklei sujungti abi animacijas. Tai duoda mums norimą rezultatą. .component-two { animacija-kompozicija: pridėti; }
Žiūrėkite rašiklio raktų kadrų žetonus – Demo 8 [forked] Amit Sheen. Šis metodas puikiai tinka daugeliu atvejų, kai norime derinti tos pačios nuosavybės efektus. Tai taip pat naudinga, kai reikia derinti animacijas su statinėmis nuosavybės reikšmėmis. Pavyzdžiui, jei turime elementą, kuris naudoja transliavimo ypatybę, kad jį tiksliai padėtume ten, kur norime, o tada norime jį animuoti naudodami kf-slide-in pagrindinius kadrus, gauname bjaurų matomą šuolį be animacijos. Žr. rašiklio raktinių kadrų žetonus – 9 demonstracinę versiją, kurią sukūrė Amit Sheen. Nustačius pridėti animaciją-komponavimą, animacija sklandžiai derinama su esamatransformuoti, kad elementas liktų vietoje ir judėtų taip, kaip tikėtasi. Animacija Stagger Kitas būdas tvarkyti kelias animacijas yra jas „išskirstyti“, ty antrąją animaciją pradėti šiek tiek pasibaigus pirmajai. Tai nėra sprendimas, tinkantis kiekvienu atveju, tačiau jis yra naudingas, kai turime įėjimo animaciją, po kurios seka nuolatinė animacija. /* išnykimas + neskaidrumo impulsas */ .notification { animacija: kf-fade-in 2s palengvinimas, kf-impulsas 0,5s 2s lengvumas į-išeinantis begalinis pakaitinis; --kf-impulso neskaidrumas iki: 0,5; }
Žr. „Pen Keyframes Tokens“ – „Demo 10“ [forked] Amit Sheen. Užsakymo reikalai Didelė dalis animacijų, su kuriomis dirbame, naudoja transformavimo ypatybę. Daugeliu atvejų tai tiesiog patogiau. Jis taip pat turi našumo pranašumą, nes transformacijos animacijas galima pagreitinti GPU. Bet jei naudojame transformacijas, turime sutikti, kad tvarka, kuria atliekame transformacijas, yra svarbi. Daug. Iki šiol pagrindiniuose kadruose naudojome atskiras transformacijas. Pagal specifikacijas jie visada taikomi nustatyta tvarka: pirmiausia elementas išverčiamas, tada pasukamas, tada keičiamas mastelis. Tai prasminga ir to daugelis iš mūsų tikisi. Tačiau jei naudojame transformavimo ypatybę, funkcijų rašymo tvarka yra tokia, kokia jos taikomos. Šiuo atveju, jei ką nors perkeliame 100 pikselių ant X ašies, o paskui pasukame 45 laipsniais, tai nėra tas pats, kas iš pradžių pasukti 45 laipsniais, o paskui perstumti 100 pikselių. /* Rožinis kvadratas: pirmiausia išverskite, tada pasukite */ .example-one { transformuoti: translateX(100px) rotate(45deg); }
/* Žalias kvadratas: pirmiausia pasukite, tada išverskite */ .example-two { transformuoti: pasukti(45°) translateX(100px); }
Žr. „Pen Keyframes Tokens“ – „Demo 11“ [forked] Amit Sheen. Tačiau pagal transformavimo tvarką visos individualios transformacijos – viskas, ką naudojome pagrindinių kadrų žetonams – įvyksta prieš transformavimo funkcijas. Tai reiškia, kad viskas, ką nustatote transformavimo ypatybėje, įvyks po animacijos. Bet jei, pavyzdžiui, nustatysite vertimą kartu su kf-spin pagrindiniais kadrais, vertimas įvyks prieš animaciją. Dar supainioti?! Tai lemia situacijas, kai statinės reikšmės gali sukelti skirtingus tos pačios animacijos rezultatus, pvz., šiuo atveju:
/* Bendra animacija abiem suktiniams */ .spinner { animacija: kf-spin 1s tiesinis begalinis; }
/* Rožinis suktukas: išverskite prieš pasukdami (individuali transformacija) */ .spinner-pink { išversti: 100% 50%; }
/* Žalias suktukas: pasukite, tada išverskite (funkcijų tvarka) */ .spinner-green { transformuoti: išversti(100%, 50%); }
Žr. „Pen Keyframes Tokens“ – „Demo 12“ [forked] Amit Sheen. Matote, kad pirmasis suktukas (rožinis) gauna vertimą, kuris įvyksta prieš sukantis kf-spin, todėl jis pirmiausia pajuda į savo vietą ir tada sukasi. Antrasis suktukas (žalias) gauna translate() funkciją, kuri įvyksta po individualios transformacijos, todėl elementas pirmiausia sukasi, tada juda, palyginti su dabartiniu kampu, ir gauname plataus orbitos efektą. Ne, tai ne klaida. Tai tik vienas iš tų dalykų, kuriuos turime žinoti apie CSS ir turėti omenyje dirbant su keliomis animacijomis ar keliomis transformacijomis. Jei reikia, taip pat galite sukurti papildomą kf-spin-alt pagrindinių kadrų rinkinį, kuris sukasi elementus naudodami funkciją rotate(). Sumažintas judesys Ir nors mes kalbame apie alternatyvius pagrindinius kadrus, negalime ignoruoti parinkties „be animacijos“. Vienas iš didžiausių pagrindinių kadrų žetonų naudojimo pranašumų yra tai, kad pasiekiamumas gali būti įtrauktas, o tai iš tikrųjų gana lengva padaryti. Kurdami pagrindinius kadrus atsižvelgdami į pritaikymą neįgaliesiems, galime užtikrinti, kad naudotojai, pageidaujantys sumažinti judėjimą, patirtų sklandžiau ir mažiau blaškytų dėmesį be papildomo darbo ar kodo dubliavimo. Tiksli „sumažinto judesio“ reikšmė gali šiek tiek keistis nuo vienos animacijos iki kitos ir nuo projekto iki projekto, tačiau čia yra keletas svarbių dalykų, kuriuos reikia nepamiršti: Nutildyti raktinius kadrus Nors kai kurias animacijas galima sušvelninti arba sulėtinti, yra kitų, kurios turėtų visiškai išnykti, kai prašoma sumažinti judesį. Puikus pavyzdys yra impulsinė animacija. Norėdami įsitikinti, kad šios animacijos neveikia sumažinto judesio režimu, galime jas tiesiog įtraukti į atitinkamą medijos užklausą.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { nuo { skalė: var(--kf-pulse-scale-from, 1); neskaidrumas: var(--kf-impulsas-nepermatomumas-nuo, 1); } į { skalė: var(--kf-pulse-scale-to, 1); neskaidrumas:var(--kf-impulso-nepermatomumas-to, 1); } } }
Taip užtikrinama, kad naudotojai, kurie sumažino pirmenybę – sumažino judesį, nematys animacijos ir jiems patiks patinkanti patirtis. Momentinis įėjimas Yra keletas pagrindinių kadrų, kurių negalime tiesiog pašalinti, pvz., įėjimo animacijos. Reikšmė turi keistis, turi pagyvėti; kitu atveju elementas neturės teisingų verčių. Tačiau esant sumažintam judėjimui, šis perėjimas nuo pradinės vertės turėtų įvykti akimirksniu. Kad tai pasiektume, nustatysime papildomą pagrindinių kadrų rinkinį, kurio reikšmė iškart pereina į galutinę būseną. Tai tampa mūsų numatytais pagrindiniais kadrais. Tada įtrauksime įprastus pagrindinius kadrus į medijos užklausą, kad nustatytumėte „preferencs-reduced-motion set“ į „no-preference“, kaip ir ankstesniame pavyzdyje. /* akimirksniu įsijunkite, kad sumažintumėte judėjimą */ @keyframes kf-zoom { nuo, iki { mastelis: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Originalūs priartinimo pagrindiniai kadrai */ @keyframes kf-zoom { nuo { mastelis: var(--kf-zoom-from, 0.8); } į { mastelis: var(--kf-zoom-to, 1); } } }
Tokiu būdu vartotojai, kurie nori sumažinti judesį, pamatys, kad elementas iš karto pasirodys galutinės būsenos, o visi kiti gaus animuotą perėjimą. Švelnus požiūris Yra atvejų, kai norime išlaikyti judėjimą, bet daug švelnesnį ir ramesnį nei originali animacija. Pavyzdžiui, atšokantį įėjimą galime pakeisti švelniu išblukimu.
@keyframes kf-bounce { /* Minkštas išblukimas, kad sumažintų judėjimą */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Originalūs atmetimo pagrindiniai kadrai */ } }
Dabar vartotojai, kuriems įjungtas sumažintas judėjimas, vis dar jaučia išvaizdos pojūtį, bet be intensyvaus atšokimo ar elastingos animacijos judėjimo. Kai statybiniai blokai yra vietoje, kitas klausimas yra, kaip juos paversti tikrosios darbo eigos dalimi. Lanksčių pagrindinių kadrų rašymas yra vienas dalykas, tačiau norint, kad jie būtų patikimi dideliame projekte, reikia kelių strategijų, kurias turėjau išmokti sunkiai. Įgyvendinimo strategijos ir geriausia praktika Kai turėsime tvirtą pagrindinių kadrų žetonų biblioteką, tikras iššūkis yra įtraukti juos į kasdienį darbą.
Kyla pagunda iš karto išmesti visus pagrindinius kadrus ir paskelbti, kad problema išspręsta, tačiau praktikoje pastebėjau, kad geriausi rezultatai gaunami laipsniškai pritaikant. Pradėkite nuo dažniausiai pasitaikančių animacijų, pvz., išnykimo ar slydimo. Tai lengvi laimėjimai, kurie parodo tiesioginę vertę, nereikalaujant didelių perrašymų. Įvardijimas yra dar vienas dalykas, į kurį reikia atkreipti dėmesį. Nuoseklus priešdėlis arba vardų sritis leidžia suprasti, kurios animacijos yra prieigos raktai, o kurios – vietinės vienkartinės. Tai taip pat apsaugo nuo atsitiktinių susidūrimų ir padeda naujiems komandos nariams iš pirmo žvilgsnio atpažinti bendrą sistemą. Dokumentacija yra tokia pat svarbi kaip ir pats kodas. Net trumpas komentaras virš kiekvieno pagrindinių kadrų prieigos rakto gali sutaupyti valandų spėlionių vėliau. Kūrėjas turėtų turėti galimybę atidaryti žetonų failą, nuskaityti reikiamą efektą ir nukopijuoti naudojimo modelį tiesiai į savo komponentą. Dėl lankstumo šis metodas vertas pastangų. Pateikdami protingas pasirinktines ypatybes, suteikiame komandoms erdvės pritaikyti animaciją nepažeidžiant sistemos. Tuo pačiu stenkitės neperkomplikuoti. Pateikite svarbias rankenėles, o likusius palikite nuomonę. Galiausiai prisiminkite prieinamumą. Ne kiekvienai animacijai reikia sumažinto judesio alternatyvos, tačiau daugeliui jų reikia. Anksti atlikus šiuos koregavimus, mums niekada nereikės jų modifikuoti vėliau, o tai rodo rūpestingumą, kurį mūsų vartotojai pastebės, net jei apie tai niekada nepaminės.
Mano patirtis rodo, kad raktinių kadrų atpažinimo raktų traktavimas kaip mūsų dizaino prieigos raktų darbo eigos dalis priverčia juos laikytis. Kai jie yra vietoje, jie nustoja jaustis kaip specialieji efektai ir tampa dizaino kalbos dalimi, natūraliu gaminio judėjimo ir reakcijos tęsiniu. Apvyniojimas Animacijos gali būti viena iš labiausiai džiuginančių dalių kuriant sąsajas, tačiau be struktūros jos gali tapti ir vienu didžiausių nusivylimo šaltinių. Laikydami pagrindinius kadrus kaip prieigos raktus, paimate tai, kas paprastai yra netvarkinga ir sunkiai valdoma, ir paverčiate tai aiškia, nuspėjama sistema. Tikroji vertė yra ne tik kelių kodo eilučių išsaugojimas. Tai yra pasitikėjimas, kad kai naudojate išblukimą, slinkimą, mastelio keitimą ar sukimą, tiksliai žinote, kaip jis veiks viso projekto metu. Tai lankstumas, atsirandantis dėl tinkintų savybių be nesibaigiančių variantų chaoso. Ir tai yra prieinamumas, įmontuotas į pamatą, o ne pridėtas kaippasekmes. Mačiau, kad šios idėjos veikia skirtingose komandose ir skirtingose kodų bazėse, o modelis visada yra tas pats. Kai žetonai yra vietoje, raktiniai kadrai nustoja būti išsklaidytas gudrybių rinkinys ir tampa dizaino kalbos dalimi. Dėl jų gaminys atrodo labiau apgalvotas, nuoseklesnis ir gyvesnis. Jei paimsite vieną dalyką iš šio straipsnio, tebūnie tai: animacija nusipelno tokio pat dėmesio ir struktūros, kaip mes jau skiriame spalvoms, tipografijai ir tarpams. Nedidelė investicija į pagrindinių kadrų žetonus atsiperka kiekvieną kartą, kai jūsų sąsaja persikelia.
