Cum se creează animații și tranziții cu interfață de mișcare

Animațiile și tranzițiile permit proiectanților să vizualizeze schimbarea și să diferențieze conținutul. Animațiile și tranzițiile sunt efecte în mișcare ajuta utilizatorii să recunoască când se schimbă ceva pe site, de exemplu, fac clic pe un buton și o nouă informație apare pe ecran. Adăugarea de mișcări către aplicații și pe site-uri web îmbunătățește experiența utilizatorilor, deoarece permite utilizatorilor să înțeleagă conținutul într-un mod mai intuitiv.

Putem crea animații și tranziții fie de la zero, fie folosind biblioteci sau cadre. Vestea bună pentru noi, oameni de frontieră, este că Zurb, creatorul Fundației, în octombrie anul trecut a lansat Motion UI, animația și biblioteca de tranziție bazată pe Sass.

Acesta a fost inițial asociat cu Fundația pentru aplicații, iar acum, pentru lansarea independentă, a primit o revizuire, inclusiv sistem de așteptare animație și modele flexibile CSS. UI de mișcare de asemenea împuternicește câteva componente ale cadrului Fundației, cum ar fi glisorul Orbit, comutatorul Toggler și modalitatea Reveal, deci este un instrument destul de robust.

Noțiuni de bază

Deși Motion UI este o bibliotecă Sass, nu trebuie neapărat să o utilizați cu Sass, deoarece Zurb furnizează dezvoltatorilor un kit de pornire la îndemână care conține doar CSS compilat. Puteți să-l descărcați de pe pagina de pornire a Motion UI și să începeți rapid prototipul utilizând clasele de animație și tranziție predefinite CSS.

Trusa de pornire nu conține doar UI de mișcare, ci și cadrul de fundație, ceea ce înseamnă că puteți utiliza grila de fundație și toate celelalte funcționalități ale Fundației pentru site-uri, dacă doriți.

Kitul de pornire este livrat, de asemenea, cu un index.html fișier care vă permite să testați rapid cadrul.

Dacă aveți nevoie de ajustări mai sofisticate și doriți să obțineți efectul de levier puternic al mixturilor Sass din Motion UI, puteți instala versiunea completă care conține sursa .SCSS fișiere cu npm sau Bower.

Documentația UI a mișcării este în prezent pe jumătate coptată. Puteți să o găsiți aici pe Github sau să contribuiți la aceasta dacă doriți.

Prototyping rapid

Pentru a porni prototipul, puteți edita index.html fișierul kitului de pornire sau să creați propriul fișier HTML. Aveți posibilitatea să construiți aspectul folosind grila de fundație, dar Motion UI poate fi folosit și ca o bibliotecă independentă fără cadrul Foundation.

Există trei tipuri principale de clase predefinite CSS în Motion UI:

1. Clase de tranziție - fac posibilă adăugarea de tranziții, cum ar fi alunecarea, decolorarea și efectele de balansare la un element HTML.
2. Cursuri de animație - vă permit să utilizați diferite efecte de tremurat, rătăcire și învârtire
3. Clasele Modificator - lucrați împreună cu clasele de tranziție și de animație și vă permit să ajustați viteza, calendarul și întârzierea unei mișcări.

Construirea HTML-ului

Lucrul minunat despre clasele CSS predefinite este că ele nu pot fi folosite numai ca clase, ci și ca alte atribute HTML. De exemplu, puteți adăugați-le la valoare atributul etichetă, sau puteți utilizați-le în propriul obicei date-* atribut de asemenea.

În fragmentul de cod de mai jos am ales această din urmă opțiune comportamente separate și clase de modificatori. Am folosit încet și uşura modifică atributele ca clase și a creat un personalizat date de animație atribut pentru scara-in-up tranziție. Dați-mi clic butonul este menit să declanșeze efectul.

 
 Faceți clic pe mine  

Redarea animațiilor și tranzițiilor cu jQuery

Propunerea UI include și o mică bibliotecă JavaScript care poate juca tranziții și animații atunci când se întâmplă un anumit eveniment.

Biblioteca însăși poate fi găsită în trusa de pornire din mișcare-ui-starter> js> vânzător> mișcare-ui.js cale.

Creează o MotionUI obiect care are două metode: animateIn () și animateOut (). Tranziția sau animația legate de elementul HTML special ( tag în exemplul nostru) poate fi declanșat cu jQuery în felul următor:

 $ ("# boom"). ($) ("") "" ($) , $ animație);););

În fragmentul de cod de mai sus, am accesat date de animație atribut folosind jQuery încorporat date() metoda, numită apoi animateIn () metodă a MotionUI obiect.

Iată codul complet și rezultatul. Am folosit clase de buton încorporate pentru cadrele de fundație pentru Dați-mi clic buton, și a adăugat unele CSS de bază, de asemenea.

Deoarece interfața de mișcare este destul de flexibilă, puteți adăuga și declanșa tranziții și animații în multe alte moduri.

De exemplu, în exemplul de mai sus nu este necesar să folosim neapărat date de animație atributul propriu, dar poate pur și simplu adăuga clasa de comportament cu addClass () metoda jQuery la element în modul următor:

 $ ( '# Boom') addClass ( 'scara-in-up').;

Personalizarea cu Sass

Ciclurile CSS prealabile ale UI ale mișcării utilizează valori implicite care pot fi personalizate cu ușurință cu ajutorul Sass. Există un amestec Sass în spatele fiecărei tranziții și animații, ceea ce face posibilă schimbarea setărilor efectului. Astfel puteți crea cu ușurință o animație sau o tranziție personalizată.

Personalizarea nu va funcționa însă cu kitul de pornire, trebuie să instalați versiunea Sass dacă doriți să configurați efectele în funcție de nevoile dvs..

Pentru a personaliza o tranziție sau o animație, la început trebuie să găsiți mixinul asociat. _classes.scss fișierul conține numele claselor CSS compilate cu respectivele mixuri.

În exemplul nostru am folosit .scara-in-up atribut, și de a arunca o privire la _classes.scss, putem afla rapid că utilizează Mui-zoom mixin:

 // Transitions @mixin mișcare-ui-tranziții ... // Scale .scale-in-up @include mui-zoom (în, 0.5, 1);  ...

Propunerea UI utilizează Mui- prefixul mixerilor, iar fiecare mixin are propriul dosar. Propunerea UI are convenții destul de explicite de denumire, astfel încât să putem găsi rapid Mui-zoom mixin în _zoom.scss fişier:

 @mixin mui-zoom ($ starea: in, $ din: 1.5, $ la: 1, $ fade: map-get ($ motion-ui-settings, scale- and-fade) null, $ delay: null) ...

Folosind aceeași tehnică puteți controla cu ușurință orice caracteristică a unei animații sau tranziție prin modificarea valorilor variabilelor Sass respective.

Configurarea claselor de modificatori

Clasele de modificare care controlează comportamentul (viteza, calendarul și întârzierea) animațiilor și tranzițiilor sunt, de asemenea, configurabile cu Sass prin modificarea valorilor variabilelor respective în _settings.scss fişier.

După ce efectuați modificările, mișcarea UI o va face utilizați noile valori ca implicite în fiecare animație și tranziție, deci nu va trebui să configurați mix-urile conexe unul câte unul.