Kako ustvariti animacije in prehodi z uporabniškim vmesnikom Motion
Animacije in prehodi omogočajo oblikovalcem, da vizualizirajo spremembe in razlikujejo vsebino. Animacije in prehodi so gibljivi učinki uporabnikom pomaga prepoznati, kdaj se nekaj spremeni na spletnem mestu, na primer kliknejo na gumb in na zaslonu se pojavi nov podatek. Dodajanje gibanja aplikacijam in spletnim mestom izboljšuje uporabniško izkušnjo, saj omogoča uporabnikom razumeti vsebino na bolj intuitiven način.
Ustvarjamo lahko animacije in prehode bodisi iz nič ali z uporabo knjižnic ali okvirov. Dobra novica za nas, frontend ljudi, je, da je Zurb, ustvarjalec Fundacije, odprtokodni Motion UI lani oktobra, njegova knjižnica animacije in prehoda, ki temelji na Sassu.
Prvotno je bila združena z Foundation for Apps in zdaj je za samostojno izdajo dobila posodobitev, vključno z sistem za čakanje v animaciji in prilagodljivi vzorci CSS. Motion UI prav tako poganja nekatere komponente okvira Fundacije, kot sta drsnik Orbit, preklopnik Toggler in modalij Reveal, zato je precej robustno orodje.
Kako začeti
Čeprav je Motion UI knjižnica Sass, vam ni nujno, da jo uporabljate s Sassom, saj Zurb ponuja razvijalcem priročen zagonski komplet, ki vsebuje samo prevedeni CSS. Lahko ga prenesete iz domače strani Motion UI in hitro začnete prototip z uporabo vnaprej določenih CSS animacij in prehodnih razredov..
Začetni komplet ne vsebuje samo UI gibanja, temveč tudi okvir Fundacije, kar pomeni, da lahko uporabite mrežo Foundation in vse druge funkcionalnosti Fundacije za spletna mesta, če želite.
Komplet za zagon je priložen tudi index.html datoteko, ki vam omogoča hitro testiranje okvira.
Če potrebujete bolj prefinjene prilagoditve in želite izkoristiti močan Sass mixin v programu Motion UI, lahko namestite polno različico, ki vsebuje vir .scss datotek z npm ali Bower.
Dokumentacija UI-ja za gibanje je še vedno prepolovljena. Najdete ga tukaj na Githubu ali pa če želite.
Hitra izdelava prototipov
Za začetek izdelave prototipov lahko urejate index.html ali pa ustvarite lastno datoteko HTML. Postavitev lahko zgradite z uporabo mreže Foundation, vendar se lahko UI gibanja uporablja tudi kot samostojna knjižnica brez okvira Fundacije.
V UI za gibanje so 3 glavne vrste vnaprej določenih razredov CSS:
- Prehodni razredi - omogočajo dodajanje prehodov, kot so drsenje, bledenje in učinki tečenja na element HTML.
- Razredi animacije - omogočajo uporabo različnih učinkov tresenja, vrtenja in vrtenja
- Razredi za spreminjanje - delujejo skupaj s prehodnimi in animacijskimi razredi, omogočajo pa vam prilagoditi hitrost, čas in zakasnitev gibanja.
Izdelava HTML-ja
Najboljša stvar pri vnaprej določenih razredih CSS je, da jih ni mogoče uporabiti le kot razrede, ampak tudi kot druge atribute HTML. Na primer lahko jih dodajte v vrednost atribut. \ t oznaka, ali lahko uporabite jih v svoji meri podatki- * atribut prav tako.
V spodnjem odlomku kode sem izbral to zadnjo možnost ločenih razredov vedenja in modifikatorjev. Uporabil sem počasi in enostavno modifikatorjev kot razrede in ustvaril po meri animacija podatkov atribut za merilo-v-up prehod. The Kliknite me Namen gumba je sprožiti učinek.
Predvajanje animacij in prehodov z jQuery
Vmesnik Motion UI vključuje tudi majhno knjižnico JavaScript, ki lahko predvaja prehod in animacijo, ko pride do določenega dogodka.
Knjižnica je na voljo v začetnem kompletu motion-ui-starter> js> prodajalec> motion-ui.js poti.
Ustvari a MotionUI predmet, ki ima dva načina: animateIn () in animateOut (). Prehod ali animacija, povezana z določenim elementom HTML (
$ (function () $ (". gumb")) kliknite (funkcija () var $ animation = $ ("# boom"). podatkov ("animacija"); MotionUI.animateIn ($ ("# boom")) , $ animacija););); V zgornjem odseku kode smo dostopali do animacija podatkov z vgrajenim jQuery data () metodo, nato pa se imenuje animateIn () metodo. \ t MotionUI predmet.
Tukaj je celotna koda in rezultat. Uporabil sem vgrajene razrede gumbov za okvire Fundacije za Kliknite me in dodali nekaj osnovnih CSS.
Ker je Motion UI precej prilagodljiv, lahko dodate in sprožite prehode in animacije na veliko drugih načinov.
Na primer v zgornjem primeru ni nujno, da uporabimo animacija podatkov atribut po meri, lahko pa preprosto doda razred obnašanja z addClass () jQuery metoda za
$ ('# boom'). addClass ('lestvica-v-up'); Prilagajanje s Sass
Prednastavljeni CSS razredi v programu UI za privzeto uporabo uporabljajo privzete vrednosti, ki jih je mogoče enostavno prilagoditi s pomočjo Sassa. Za vsakim prehodom in animacijo je na voljo mešanica Sass, ki omogoča spreminjanje nastavitev učinka. Na ta način lahko preprosto ustvarite popolnoma prilagojeno animacijo ali prehod.
Prilagajanje ne bo delovalo z začetnim kompletom, vendar morate namestiti različico Sass, če želite konfigurirati učinke glede na vaše potrebe..
Če želite prilagoditi prehod ali animacijo, morate najprej to storiti poiščite povezani mixin. The _classes.scss Datoteka vsebuje imena prevedenih razredov CSS z ustreznimi kombinacijami.
V našem primeru smo uporabili .merilo-v-up atribut in z vpogledom _classes.scss, lahko hitro ugotovimo, da uporablja mui-zoom mixin:
// Prehodi @ mixin motion-ui-prehodi … // Razmerje. Scale-in-up @ vključi mui-zoom (v, 0,5, 1); …
UI za gibanje uporablja mui- predpono za mixins in vsak mixin ima svojo datoteko. UI za gibanje ima precej samoumevne konvencije poimenovanja, zato lahko hitro najdemo mui-zoom mixin v _zoom.scss mapa:
@mixin mui-zoom ($ stanje: v, $ od: 1.5, $ do: 1, $ fade: map-get ($ motion-ui-nastavitve, scale-in-fade), $ duration: null, $ timing: null, $ delay: null) …
Z isto tehniko lahko preprosto nadzirate vsako funkcijo animacije ali prehoda s spreminjanjem vrednosti posameznih spremenljivk Sass.
Konfiguriranje razredov modifikatorjev
Razredi modifikatorjev, ki nadzorujejo obnašanje (hitrost, čas in zakasnitev) animacij in prehodov, se lahko konfigurirajo tudi s Sass, tako da spreminjajo vrednosti posameznih spremenljivk v _settings.scss mapa.
Ko naredite spremembe, bo UI za gibanje nove vrednosti uporabite kot privzete v vsaki animaciji in prehodu, tako da vam ni treba konfigurirati povezanih mixinov enega po enega.
