12 patarimų nuostabiai CSS animacijai

(Vaizdo kreditas: Getty)

Gerai padaryta, CSS animacija gali įkvėpti jūsų svetainės gyvybės ir įtraukti vartotojus be gausybės papildomų bibliotekų. Pristatyti apgalvotas, sklandžias animacijas, kurios suteikia prasmingą jūsų svetainės gylį, nebūtinai yra sunku - šiuolaikinės CSS ypatybės dabar suteikia jums beveik visus įrankius, kurių reikės norint įsiminti savo vartotojams.

Šiame straipsnyje mes pateiksime keletą geriausių patarimų, kaip išlaisvinti visas interaktyvios CSS animacijos galimybes. Kol esate čia, taip pat galbūt norėsite sužinoti mūsų nuostabų turinį CSS animacijos pavyzdžiai .

Daugelis šių patarimų nurodo „Disney“ animacijos principus - ir iš tikrųjų bet koks padorus straipsnis apie animacijų kūrimą būtų nemalonus, jei apie juos neminėtumėte. Peržiūrėkite mūsų specialų straipsnį 12 pagrindinių „Disney“ animacijos principų išsamų vadovą. Tai buvo Franko Thomaso ir Ollie Johnstono pagrindinėje knygoje Gyvenimo iliuzija ir yra puikus atspirties taškas pradedantiesiems animacijai.



01. Laikykitės keturių pagrindinių savybių

CSS animacija suteikia palyginti paprastą būdą sklandžiai perkelti didelę savybių grupę. Geros tvirtos animacinės sąsajos priklauso nuo sklandžios, sklandžios patirties, ir tuo tikslu tai geriausia pateikti 60+ FPS (kadrų per sekundę) greičiu. Norėdami išlaikyti animacijos laiko juostų našumą, norėsime pasistengti kuo geriau apriboti animacines ypatybes iki keturių pagrindinių elementų:

  • Skalė - transformuoti: mastelis (2)
  • Pozicija - transformuoti: translateX (50rem)
  • Pasukimas - transformuoti: pasukti (180 laipsnių)
  • Neskaidrumas - neskaidrumas: 0,5

Animacinės savybės, tokios kaip krašto spindulys, aukštis / plotis ar paraštės, paveiks naršyklės išdėstymo metodus, o fonų, spalvų ar langelių šešėlių animacija paveiks naršyklės dažymo metodus ir žymiai sumažins jūsų FPS. Animavus šias savybes, galima gauti įdomių efektų, tačiau norint jas išlaikyti, jas reikėtų naudoti taupiai.

02. Įveskite greitį

Vienas pagrindinių „Disney“ animacijos principų yra skvošas ir tempimas. Nors tai gali pasirodyti šiek tiek per daug žaisminga švariai ir moderniai svetainei, skvošas ir ruožas yra principai, kurie įterpia suvokiamą našumą, tai yra, mes galime įdiegti puslapio našumo jausmą, kuris galbūt neatitinka mūsų techninės metrikos. Sugniuždydami ar ištempdami judančius elementus, mes suteikiame jiems didesnio (ar mažesnio) greičio iliuziją, vėl suteikdami tikrojo takumo jausmą mūsų puslapiui.

03. Tinkamas laikas

CSS animacija: CSYes

(Vaizdo kreditas: Adamas Kuhnas)

Nesvarbu, kokią biblioteką ar rietuvę pasirinksite panaudoti, animacijos laikas ir palengvinimas yra nepaprastai svarbūs norint suteikti sklandžią patirtį, kuri jūsų vartotojams atrodo natūrali ir intuityvi. Laimei, mes turime daug puikių variantų, iškeptų tiesiai į CSS, kad padėtų natūraliau jaustis.

CSS spec siūlo mums keletą puikių vietinių palengvinimo funkcijų, natūraliausia palengvėjimas , kuris leidžia animacijos laikui įgyti ir sumažinti greitį, kai animacija prasideda ir baigiasi. Bet gilesnis pritaikymas yra įmanomas ir kartais būtinas - ir papildomas JS bibliotekos ne visada yra atsakymas.

Įveskite kubinis-bezieris . Tai padeda galvoti apie animacijos laiką, einantį pagal vertikalią kreivę, tarsi ridentumėte kamuolį aukštyn arba žemyn nuo kalvos, atkreipdami dėmesį į tai, kaip greitis keičiasi kiekvieną kartą keičiant į nuolydžio laipsnį. Naudodami kubinio Bezier funkciją, mes galime efektyviai susieti savo animaciją ar perėjimą prie šių kreivių, netgi leisdami numatyti - efektyvius animacijos uždarymo ar įvadinius rėmus - ir tolesnius veiksmus, kurie yra paskutiniai rėmeliai. animacijos.

Turėdami prieigą prie šių savybių, galime suteikti animacijai realistiškesnę fiziką, pavyzdžiui, elastingumą. Norėdami pamatyti puikų vaizdinį rodiklį, kaip šios funkcijos gali veikti (ir išbandyti jas pačias), apsilankykite puikiame easings.net pateikė Andrejus Sitnikas. Jei gerai susipažinsite su vektorinio piešimo kreivėmis ir rankenomis, iškart atpažinsite, kaip tai padaryti kubinis-bezieris darbai.

Kadangi CSS animacijos pagrindiniuose kadruose paprastai yra keli segmentai, retai tiesiogiai pereinantys nuo 1 iki 100%, svarbu nepamiršti, kad bet kuri kita laiko funkcija, išskyrus linijinis bus vykdoma nuo kiekvieno segmento judesio kreivės pradžios iki pabaigos.

Pavyzdys: animacijos pagrindiniai kadrai svyruoja nuo 0% iki 25% iki 75% iki 100% ir naudojami palengvėjimas kaip laiko funkcija. Tai reiškia, kad animacija efektyviai palengvins save tris kartus. Atsižvelgiant į tai, prireikus animacijos laiko nustatymo funkcijos taip pat gali būti pakeistos pačiose pagrindinio kadro grandinėse. Taip pat pajėgi kaip kubinis-bezieris yra, kartais tai geriausiai tinka CSS perėjimams. Patikrinkite žemiau esantį „CodePen“.

04. Sustokite ir pradėkite nuo animacijos-paleidimo būsenos

Naudojant animacijos-žaidimo būsena nuosavybę, galite lengvai pradėti arba pristabdyti savo animacijas. Pvz., Galbūt norėsite sustabdyti animaciją ant svyravimo. Norėdami tai padaryti, naudokite animacija-grojimo būsena: pristabdyta . Ši parinktis suteiks jūsų vartotojams didesnį interaktyvumą, o kartu su kableliais atskirtomis grandininėmis animacijos ypatybėmis arba keliomis trumpomis „JavaScript“ eilutėmis galime tiksliai apibrėžti, kada animacija turėtų būti aktyvi.

05. Pagalvokite apie prieinamumą

Dirbdami tobulindami naudotojų patirtį naudodami animaciją, dažnai negalvojame apie prieinamumą. Ne visi gali mėgautis judesiu internete. Kai kuriems vartotojams, pavyzdžiui, linkusiems į traukulius, tai gali sukelti rimtų sveikatos problemų.

Laimei, vis labiau palaikoma žiniasklaidos užklausa, kurią galime naudoti: teikia pirmenybę sumažintam judesiui . Ši užklausa veikia kartu su vartotojo OS nuostatomis ir leidžia mums prireikus apriboti animacijas. Pavyzdžiui, įsivaizduokite, kad mes naudojame ypač pašėlusią animaciją, naudojamą skubos jausmui perteikti ir vartotojui pritraukti raginimas veikti . Naudojant teikia pirmenybę sumažintam judesiui mes galime išlaikyti šį elementą statinį.

@media (prefers-reduced-motion: reduce){ .wildlyFlailing{ animation:none; }}

Keli svarbūs dalykai, kuriuos reikia nepamiršti: jei animuotuose elementuose naudojamas animacijos užpildymo režimas, apibrėžiantis pabaigos būseną, įsitikinkite, kad elementai yra įkeliami toje būsenoje, kai taikote į judesiui jautrius vartotojus. Jei elementas remiasi animacija, kad perkeltų jį į peržiūros srities padėtį, norime būti tikri, kad jis keičia padėtį per dviejų kadrų pakopinę animaciją arba su 0s perėjimu.

06. Sukurkite savo animacijas, kad jos būtų paveiktos

Viena iš labiausiai pamirštų CSS animacijos galimybių yra galimybė susieti savo animacijas. Tai yra, kiekvieną animaciją galime apibrėžti atskirai, atskirdami kablelius, tačiau paleisti jas kartu.

Pvz., Galime sukurti vieną animaciją, kad pasuktume savo elementą, antrinę, kad padidintume jos fono dydį, ir tretinę, kad pakoreguotume jos neskaidrumą, kad ji išnyktų ir išnyktų. Be to, šioms animacijoms galime pritaikyti kitas ypatybes, pvz., Kableliais atskirtas vertes, kad būtų galima valdyti vėlavimą, laiko funkcijas, trukmę ar net atkūrimo būsenas.

Nors grandininėms animacijoms gali prireikti nemažai patobulinti, kad būtų sinchronizuotos visos judančios savybės, jos taip pat suteikia mums daug detalios kontrolės, kaip mes pasirenkame laiką ir palengviname kiekvieną animuotą nuosavybę, sukurdami sudėtingą judesį su daug mažiau CSS eilučių (arba būtini DOM elementai).

07. Norėdami pagerinti našumą, naudokite valios keitimą

Viena puiki savybė, priklausanti kiekvienam CSS animatoriaus įrankių rinkiniui, yra mažai žinoma, bet labai naudinga pasikeis . Anksčiau buvo daugybė įsilaužėlių, kuriuos galite panaudoti apgauti naršyklę aparatine įranga, pagreitinančia mūsų animuotas ar perkeltas savybes - ir jie, žinoma, sorta veikė. Tačiau dabar turime tam skirtą turtą, kuriuo pasinaudosime; ir pasikeis gali suteikti reikalingą impulsą jūsų animacijos pasirodymui.

Nors yra keletas apibendrintų numatytųjų reikšmių pasikeis ten paprastai norime apibrėžti, kuri nuosavybė bus atnaujinta kuriame elemente - pvz valia pasikeis: transformuos arba, jei grandinė yra būtina, valia pasikeis: sienos spindulys, neskaidrumas .

Paprasčiau tariant pasikeis nuosavybė nurodo mūsų naršyklei, kad šie elementai - staigmena - pasikeis. Todėl šių elementų našumui paprastai bus teikiama pirmenybė, o aparatinė įranga bus pagreitinta.

Tegul pasikeis visi daiktai! Ne, ne, ne - per didelis šios nuosavybės naudojimas arba visų jūsų animuotų ar perkeltų elementų prioritetų nustatymas sukels daugiau apkrovos aparatinei įrangai, nei kompensuos. Taigi atminkite, kad jie naudojami taupiai ir tik animacijoms ar perėjimams, kurie yra labai svarbūs jūsų kuriamai patirčiai, pasikeis gali suteikti jums reikalingą impulsą.

08. Animuoti tipą su kintamais šriftais

(Vaizdo kreditas: Adamas Kuhnas)

Tipografiją visada buvo keblu tinkamai animuoti. Žinoma, galime animuoti šrifto dydį (ypatybę, kurią geriau apdoroti animuojant mastelį) ir spalvą, tačiau įvedę kintantys šriftai , dabar savo įrankių rinkinyje turime visiškai naują animuojamų parinkčių rinkinį.

Nežinomiems kintamuosiuose šriftuose yra keli šriftų variantai viename šrifto faile su galimais svorio, kampų, dekoracijų ir kt. Be to, visi šie variantai gali būti naudojami naudojant CSS šrifto variacijos nustatymai . Naudodamiesi šia funkcija, mes dabar galime sklandžiai pereiti nuo įprasto į kursyvą, nuo šviesaus iki paryškinto arba pereiti prie „swash-less“ - visa tai jaučiant morfuojančią SVG - nes daugeliu atžvilgių būtent tai ir vyksta.

09. Naudokite kintamuosius, kad viskas būtų nuoseklu

Puikus būdas išlaikyti nuoseklumą yra naudoti CSS kintamuosius arba išankstinio apdorojimo kintamuosius, kad apibrėžtumėte savo animacijos laiką.

:root{ timing-base: 1000;}

Nustačius bazinę animacijos ar perėjimo trukmę neapibrėžiant vieneto (sekundės ar milisekundės), mes galime lankstiai vadinti šią trukmę apskaičiuoti () funkcija. Nors trukmė gali skirtis nuo mūsų pagrindinio CSS kintamojo, tai visada bus paprastas šio skaičiaus pakeitimas ir išlaikoma nuosekli patirtis.

10. Laikykite daiktus natūraliais lanku

Vėl grįžtant prie 12 „Disney“ animacijos principų, matome lanko paminėjimą. Aptariamas lankas reiškia būdingą apskritą judesį, kurio metu vyksta dauguma natūralių judesių. Kasdieniniame gyvenime labai retai stebime judesį tiesia linija. Ir nors yra lengviau ir reikia mažiau raktų kadrų, norint animuoti griežtai iš kairės į dešinę arba iš viršaus į apačią, mes galime pasiūlyti savo vartotojams patogesnę patirtį, turėdami omenyje šį lanką, tuo pat metu pripažindami, kad kai kurie išdėstymai mums galiausiai uždraus animuoti mūsų elementus išlenktais keliais (dažnai sukuriant trukdžius kitiems elementams).

„Corel“ tapytojo pagrindai ir „clip studio paint pro“

11. Atkurkite

Kartais geriausias būdas iš tikrųjų pajusti, kaip formuojasi jūsų sąsajos animacijos, yra sukurti ekrano įrašą. Matyti, kaip kažkas veikia, yra akivaizdus puikus būdas įsitikinti, kad jūsų animacijos veikia taip, kaip norite.

Taigi, kaip šio straipsnio autorius įsitikina, kad gauna tai, ko nori? Būdamas terminalo „CodePen“ demonstracinių filmų perdavėju, jis mėgsta kurti savo animacijų ekrano užsklandos GIF. Surinkimas šiais GIF ir jų gražus ciklas iš tikrųjų tarnauja kitam tikslui. Tai leidžia jam peržiūrėti animacijas ir diagnozuoti visas su laiku ar palengvinimu susijusias problemas.

12. Pagalvokite apie stulbinimą

Dirbant su geometrinėmis ar šabloninėmis CSS animacijomis, dažnai gali būti naudinga suskirstyti mūsų animacijas naudojant vėlavimo animaciją. Tai gali tapti problemiška, jei elementas pateko į peržiūros sritį, bet mes prašome vartotojo palaukti, kol prasidės animacija. Mes galime pasiekti to paties tipo animacijos poslinkį naudodami neigiamą vėlavimą užtikrindami, kad animacijos laiko juosta būtų pradedama iškart įkėlus puslapį, vartotojui nelaukiant.

Šis straipsnis iš pradžių pasirodė „Web Designer“ žurnale. Naršykite visus mūsų straipsniai apie interneto dizainą čia .

Generuoti garsiakalbius x 4

Sužinokite, kaip sukurti geresnę „JavaScript“, apsilankę „GenerateJS“(Vaizdo kreditas: ateitis)

Prisijunkite prie mūsų 2020 m. Balandžio mėn., Naudodamiesi „JavaScript“ superžvaigždžių grupe „GenerateJS“ - konferencijoje, padedančioje sukurti geresnę „JavaScript“. Užsisakykite dabar generateconf.com

Skaityti daugiau: