Ako vytvoriť animácie a prechody s pohyblivým používateľským rozhraním
Animácie a prechody umožňujú dizajnérom vizualizovať zmeny a rozlišovať obsah. Animácie a prechody sú pohyblivé efekty pomôžte používateľom rozpoznať, kedy sa niečo zmení na stránkach, napríklad kliknú na tlačidlo a na obrazovke sa zobrazí nová informácia. Pridanie presunu k aplikáciám a webovým stránkam zlepšuje používateľskú skúsenosť, pretože umožňuje používateľom intuitívnejším spôsobom zmysel obsahu.
Môžeme vytvoriť animácie a prechody buď od začiatku, alebo pomocou knižníc alebo rámcov. Dobrá správa pre nás, používateľov frontend, je, že Zurb, tvorca nadácie, v októbri minulého roka s otvoreným zdrojom Motion UI, jeho animačnú a prechodovú knižnicu založenú na Sass.
Bolo pôvodne spojené so službou Foundation for Apps a teraz je pre samostatné vydanie aktualizované, vrátane animácie systému čakania a flexibilné modely CSS. Motion UI tiež ovláda niektoré komponenty základného rámca, ako je posuvník Orbit, prepínač Toggler a modul Reveal, takže je to dosť robustný nástroj.
Začíname
Hoci Motion UI je knižnica Sass, nemusíte ju nevyhnutne používať so Sassom, pretože Zurb poskytuje vývojárom šikovný štartovací kit, ktorý obsahuje iba kompilované CSS. Môžete si ho stiahnuť z domovskej stránky Motion UI a rýchlo začať s prototypom pomocou preddefinovaných animácií CSS a prechodových tried.
Štartovací kit neobsahuje len Motion UI, ale aj základnú štruktúru, čo znamená, že ak chcete, môžete použiť Foundation Foundation a všetky ostatné funkcie Foundation for Sites.
Štartovacia súprava je dodávaná tiež s index.html súbor, ktorý vám umožní rýchlo otestovať rámec.
Ak potrebujete ešte sofistikovanejšie úpravy a chcete využiť výkonné mixéry Sass Motion UI, môžete nainštalovať plnú verziu obsahujúcu zdroj .SCSS súbory s npm alebo Bower.
Dokumentácia nástroja Motion IO je v súčasnosti stále napoly. Nájdete ho tu na Github, alebo môžete prispieť k nemu, ak chcete.
Rýchle prototypovanie
Ak chcete spustiť prototypovanie, môžete upraviť index.html súboru štartovacieho kitu alebo vytvorte vlastný súbor HTML. Rozloženie môžete vytvoriť pomocou mriežky nadácie, ale funkcia Motion UI môže byť tiež použitá ako samostatná knižnica bez rámca nadácie.
V aplikácii Motion UI sú 3 hlavné typy vopred definovaných tried CSS:
- Triedy prechodu - umožňujú pridať prechody, ako sú posuvné, blednutie a kĺbové efekty na element HTML.
- Triedy animácie - umožňujú používať rôzne pohyby trepania, wiggling a spinning
- Triedy modifikátorov - spolupracujte s triedami prechodov a animácií a umožňujú vám nastaviť rýchlosť, časovanie a oneskorenie pohybu.
Vytváranie kódu HTML
Skvelá vec týkajúca sa preddefinovaných tried CSS spočíva v tom, že nemôžu byť použité iba ako triedy, ale aj ako iné atribúty HTML. Napríklad môžete pridajte ich do priečinka hodnota atribút štítok, alebo môžete použite ich vo vlastnom zvyku data- * atribút tiež.
V útržku kódu som si zvolil poslednú možnosť oddelené správanie a triedy modifikátorov. Použil som pomalý a jednoduchosť modifier atribúty ako triedy a vytvoril vlastný údaje animácie atribút pre scale-in-up prechod. Klikni na mňa Tlačidlo má spustiť efekt.
Prehrávanie animácií a prechodov pomocou jQuery
Motion UI obsahuje aj malú knižnicu JavaScript, ktorá dokáže prehrať prechody a animácie, keď nastane určitá udalosť.
Samotná knižnica sa nachádza v štartovacej zostave v motion-ui-starter> js> predajca> motion-ui.js cesta.
Vytvára a MotionUI objekt, ktorý má dve metódy: animateIn () a animateOut (). Prechod alebo animácia viazaná na konkrétny prvok HTML (
$ (funkcia () $ (".klik"), kliknite (funkcia () var $ animation = $ ("boom"). , $ animácia););); Vo vyššie uvedenom útržku kódu sme sa dostali k údaje animácie atribút pomocou vstavaného jQuery dáta () metóda, potom volal animateIn () metóda MotionUI objekt.
Tu je celý kód a výsledok. Použil som vstavané triedy tlačidiel pre rámčeky Foundation for the Klikni na mňa a pridali aj niektoré základné CSS.
Keďže Motion UI je pomerne flexibilný, môžete tiež pridávať a spúšťať prechody a animácie mnohými inými spôsobmi.
Napríklad v príklade vyššie nemusíme nevyhnutne používať údaje animácie vlastný atribút, ale môže jednoducho pridať triedu správania s addClass () jQuery metóda na
$ ( '# Boom') addClass ( 'scale-in-up.');
Prispôsobenie so Sass
Preddefinované triedy CSS Motion UI používajú predvolené hodnoty, ktoré je možné ľahko prispôsobiť pomocou programu Sass. Pre každý prechod a animáciu sa nachádza mix Sass, ktorý umožňuje zmeniť nastavenie efektu. Týmto spôsobom môžete ľahko vytvoriť úplne vlastnú animáciu alebo prechod.
Prispôsobenie nefunguje so štartovacou sadu, ale musíte nainštalovať verziu Sass, ak chcete konfigurovať efekty podľa vlastných potrieb.
Ak chcete prispôsobiť prechod alebo animáciu, najprv musíte nájdite príslušný mixin. _classes.scss súbor obsahuje názvy kompilovaných tried CSS s príslušnými mixinami.
V našom príklade sme použili .scale-in-up atribút a pozrieť sa _classes.scss, môžeme rýchlo zistiť, že využíva mui-zoom mixin:
// Prechody @mixin motion-ui-transitions ... // Scale .scale-in-up @include mui-zoom (in, 0.5, 1); ...
Motion UI používa mui- prefix pre mixins a každý mixin má vlastný súbor. Motion UI má pomerne samozrejmé konvencie pomenovania, takže môžeme rýchlo nájsť mui-zoom mixin v _zoom.scss file:
@ mixin mui-zoom ($ stav: in, $ od: 1,5, $ do: 1, $ fade: map-get ($ motion-ui-settings, scale- and-fade) null, $ delay: null) ...
Pomocou rovnakej techniky môžete ľahko ovládať každú funkciu animácie alebo prechodu zmenou hodnôt príslušných premenných Sass.
Konfigurácia tried modifikátorov
Triedy modifikátorov, ktoré riadia správanie (rýchlosť, časovanie a oneskorenie) animácií a prechodov, sú tiež konfigurovateľné pomocou funkcie Sass úpravou hodnôt príslušných premenných v _settings.scss súbor.
Po vykonaní vašich zmien bude funkcia Motion UI použite nové hodnoty ako predvolené v každej animácii a prechode, takže nebudete musieť nakonfigurovať súvisiace mixiny jeden po druhom.
