Kako stvoriti animacije i prijelaze s UI pokretom

Animacije i prijelazi omogućuju dizajnerima da vizualiziraju promjene i razlikuju sadržaj. Animacije i prijelazi su pokretni efekti pomoći korisnicima da prepoznaju kada se nešto promijeni na web-lokaciji, primjerice, kliknu na gumb i na zaslonu se pojavi novi podatak. Dodavanje kretanja aplikacijama i web-lokacijama poboljšava korisničko iskustvo, jer korisnicima to omogućuje smisliti sadržaj na intuitivniji način.

Možemo stvoriti animacije i prijelaze ili od nule ili pomoću knjižnica ili okvira. Dobra vijest za nas, ljude u sučelju, je da Zurb, tvorac Zaklade, prošlog listopada otvoreni izvor Motion UI, svoju animacijsku i tranzicijsku biblioteku temeljenu na Sassu.

Prvobitno je bio povezan s Foundation for Apps, a sada je za samostalno izdanje dobila obnovu, uključujući i sustav čekanja za animaciju i fleksibilni CSS obrasci. Motion UI također pokreće neke komponente okvira Foundation, kao što su Orbit klizač, Toggler preklopnik i modalitet Reveal, tako da je to prilično robustan alat.

Početak rada

Iako je Motion UI biblioteka Sassa, ne morate je nužno koristiti sa Sassom, jer Zurb nudi programerima praktičan starter kit koji sadrži samo kompilirani CSS. Možete ga preuzeti s početne stranice Motion UI-ja i brzo početi prototipirati pomoću unaprijed definiranih CSS animacija i prijelaznih klasa.

Početni komplet ne sadrži samo UI pokreta, već i okvir Zaklade, što znači da možete koristiti mrežu mreže i sve druge funkcionalnosti Zaklade za web-lokacije ako želite.

Početni komplet je također isporučen s index.html datoteku koja vam omogućuje brzo testiranje okvira.

Ako trebate sofisticiranije prilagodbe i želite iskoristiti moćne Sass Mixine usluge Motion UI, možete instalirati punu verziju koja sadrži izvor .scss datoteka s npm ili Bower.

Dokumentacija UI-ja za Motion je još uvijek napola ispečena. Možete ga pronaći ovdje na Githubu ili pridonijeti ako želite.

Brza izrada prototipova

Da biste započeli izradu prototipa, možete urediti index.html datoteku početnog kompleta ili stvorite vlastitu HTML datoteku. Možete izgraditi izgled pomoću rešetke Foundation, ali Motion UI se također može koristiti kao samostalna knjižnica bez okvira Foundation.

U UI-ju pokreta postoje 3 glavne vrste unaprijed definiranih CSS klasa:

1. Prijelazne klase - omogućuju dodavanje prijelaza, kao što su klizanje, blijeđenje i efekti vezivanja u HTML element.
2. Klase animacije - omogućuju vam korištenje različitih efekata trešnje, mrdanja i vrtnje
3. Klase modifikatora - rade zajedno s prijelaznim i animacijskim klasama i omogućuju vam podešavanje brzine, vremena i kašnjenja pokreta.

Izrada HTML-a

Dobra stvar kod unaprijed definiranih CSS klasa je u tome što se ne mogu koristiti samo kao klase, već i kao drugi atributi HTML-a. Na primjer možete dodajte ih u vrijednost atribut označiti, ili možete koristite ih u vlastitim običajima podaci-* atribut također.

U donjem kodu koda odabrao sam ovu drugu opciju odvojene klase ponašanja i modifikatora. Koristio sam usporiti i olakšati atributi modifikatora kao klase i stvorili su običaj Podaci-animacija atribut za Ljestvica-u-up tranzicija. Kliknite na mene gumb je namijenjen za pokretanje učinka.

 
 Kliknite Me  

Igranje animacija i prijelaza s jQuery

UI Motion sadrži i malu JavaScript biblioteku koja može reproducirati prijelaze i animacije kada se dogodi određeni događaj.

Sama knjižnica nalazi se u početnom paketu u motion-ui-starter> js> dobavljač> motion-ui.js staza.

To stvara a MotionUI objekt koji ima dvije metode: animateIn () i animateOut (). Prijelaz ili animacija vezana uz određeni HTML element ( u našem primjeru) može se pokrenuti s jQuery na sljedeći način:

 $ (function () $ (". gumb").) kliknite (funkcija () var $ animation = $ ("# boom"). podaci ("animacija"); MotionUI.animateIn ($ ("# boom")) , $ animacija);););

U gornjem isječku koda pristupili smo Podaci-animacija atribut pomoću ugrađenog jQuery-a podaci() metoda, a zatim se zove animateIn () metoda MotionUI objekt.

Ovdje je puni kôd i rezultat. Upotrijebio sam ugrađene klase gumba za temeljne okvire za Kliknite na mene i dodali neke osnovne CSS-ove.

Kako je Motion UI vrlo fleksibilan, možete dodati i aktivirati prijelaze i animacije na mnoge druge načine.

Na primjer, u gornjem primjeru ne moramo nužno koristiti Podaci-animacija prilagođeni atribut, ali može jednostavno dodati klasu ponašanja s oznakom addClass () jQuery metoda za element na sljedeći način:

 $ ( '# Bum') addClass ( 'scale-u-up').

Prilagodba s Sassom

Unaprijed izrađene CSS klase Motion UI-a koriste zadane vrijednosti koje se mogu lako prilagoditi uz pomoć Sassa. Iza svake tranzicije i animacije nalazi se Sass mixin, koji omogućuje promjenu postavki efekta. Na taj način možete jednostavno stvoriti potpuno prilagođenu animaciju ili prijelaz.

Prilagođavanje neće raditi s početnim kitom, ali morate instalirati Sass verziju ako želite konfigurirati učinke prema vlastitim potrebama..

Za prilagodbu prijelaza ili animacije najprije trebate pronađite povezani mixin. _classes.scss datoteka sadrži nazive prevedenih CSS klasa s odgovarajućim mixinima.

U našem primjeru koristili smo .Ljestvica-u-up atribut, i ako pogledate _classes.scss, možemo brzo saznati da se koristi MUI-zum mixin:

 // Prijelazi @mixin motion-ui-transitions … // Skali. Scale-in-up @ uključi mui-zoom (u, 0,5, 1); …

Korisničko sučelje pokreta koristi MUI- prefiks za mixins, a svaki mixin ima svoju datoteku. UI Motion ima prilično razumljive konvencije imenovanja, tako da možemo brzo pronaći MUI-zum mixin u _zoom.scss datoteka:

 @mixin mui-zoom ($ stanje: u, $ od: 1.5, $ do: 1, $ fade: map-get ($ motion-ui-postavke, scale-i-fade), $ duration: null, $ timing: null, $ delay: null) …

Koristeći istu tehniku ​​možete lako kontrolirati svaku značajku animacije ili prijelaza promjenom vrijednosti odgovarajućih Sass varijabli.

Konfiguriranje klasa modifikatora

Razredbe modifikatora koje kontroliraju ponašanje (brzina, vrijeme i kašnjenje) animacija i prijelaza također se mogu konfigurirati pomoću Sassa modificiranjem vrijednosti odgovarajućih varijabli u _settings.scss datoteka.

Nakon što izvršite promjene, UI pokreta će nove vrijednosti koristiti kao zadane u svakoj animaciji i prijelazu, tako da ne morate konfigurirati povezane miksine jedan po jedan.