Jak vytvořit animace a přechody s uživatelským rozhraním pohybu
Animace a přechody umožňují návrhářům vizualizovat změny a diferencovat obsah. Animace a přechody jsou pohyblivé efekty pomáhají uživatelům rozpoznat, kdy se něco změní na webu, například kliknou na tlačítko a na obrazovce se objeví nová informace. Přidání pohybu do aplikací a webových stránek zlepšuje uživatelský komfort, protože uživatelům umožňuje intuitivnějším způsobem.
Můžeme vytvářet animace a přechody od nuly nebo pomocí knihoven či frameworků. Dobrou zprávou pro nás, frontendové lidi, je to, že Zurb, tvůrce Nadace, loni v říjnu open-source source UI, jeho animační a transformační knihovna založená na Sassu.
To bylo původně zabalené s nadací pro Apps, a teď, pro samostatné vydání to má přepracování, včetně animační systém a flexibilní vzory CSS. Motion UI také ovládá některé komponenty Foundation framework, jako je posuvník Orbit, přepínač Toggler a modální Reveal, takže je to docela robustní nástroj.
Začínáme
Ačkoli je Motion UI knihovnou Sass, nemusíte ji nutně používat se softwarem Sass, protože Zurb poskytuje vývojářům praktický startovací balíček, který obsahuje pouze kompilované CSS. Můžete si jej stáhnout z domovské stránky Motion UI a rychle začít prototypovat pomocí předdefinovaných CSS animací a tříd přechodu.
Startovací sada neobsahuje pouze Motion UI, ale také Foundation framework, což znamená, že můžete použít mřížku Foundation a všechny ostatní funkce Foundation for Sites, pokud chcete.
Startovací sada je také dodávána s index.html soubor, který vám umožní rychle otestovat rámec.
Potřebujete-li sofistikovanější úpravy a chcete využít výkonných Sass mixů Motion UI, můžete nainstalovat plnou verzi obsahující zdroj .scss soubory s npm nebo Bower.
Dokumentace aplikace Motion UI je v současné době stále zapálená. Můžete ho najít na Github, nebo přispět k němu, pokud chcete.
Rychlé prototypování
Chcete-li začít vytvářet prototypy, můžete upravit index.html soubor startovací sady nebo si vytvořte vlastní HTML soubor. Rozvržení můžete vytvořit pomocí mřížky Foundation, ale Motion UI lze také použít jako samostatnou knihovnu bez rámce Foundation.
V uživatelském rozhraní Motion existují tři hlavní typy předdefinovaných tříd CSS:
- Přechodové třídy - umožňuje přidat přechody, jako je posuvné, vyblednutí a zavěšení efektů na element HTML.
- Animační třídy - umožňují používat různé efekty třesení, kroutí a spinningu
- Třídy modifikátorů - pracují společně s třídami přechodu a animace a umožňují nastavit rychlost, časování a zpoždění pohybu..
Vytváření HTML
Skvělá věc na předdefinovaných CSS třídách je, že nemohou být použity pouze jako třídy, ale také jako jiné HTML atributy. Například můžete přidejte je do hodnota atribut štítek, nebo můžete používat je ve svém vlastním zvyku data-* atribut také.
V úryvku kódu níže jsem zvolil tuto možnost oddělené třídy chování a modifikátorů. Použil jsem zpomalit a ulehčit atributů modifikátoru jako třídy a vytvořil vlastní animace dat atribut pro měřítko přechod. Klikni na mě Tlačítko slouží ke spuštění efektu.
Přehrávání animací a přechodů pomocí jQuery
Motion UI obsahuje také malou knihovnu JavaScriptu, která může při přechodu určité události hrát přechody a animace.
Knihovna sama o sobě se nachází ve startovací sadě motion-ui-starter> js> prodejce> motion-ui.js cesta.
Vytváří MotionUI objekt, který má dvě metody: animateIn () a animateOut (). Přechod nebo animace vázaná na konkrétní element HTML (
$ (function () $ (". button"). Klepněte na tlačítko (function () var $ animation = $ ("# boom"). data ("animace"); MotionUI.animateIn ($ ("# boom")) , $ animation););); Ve výše uvedeném kódu jsme přistupovali k animace dat atributu pomocí vestavěné funkce jQuery data() metodu, pak nazvanou animateIn () metoda MotionUI objekt.
Zde je úplný kód a výsledek. Použil jsem základní nadstavby vestavěných tříd tlačítek pro Klikni na mě a přidali i základní CSS.
Vzhledem k tomu, že je uživatelské rozhraní pohybu velmi flexibilní, můžete také přidávat a spouštět přechody a animace mnoha jinými způsoby.
Například ve výše uvedeném příkladu nemusíme nutně používat animace dat Vlastní atribut, ale můžete jednoduše přidat třídu chování s addClass () jQuery metoda
$ ('# boom') addClass ('měřítko-nahoru'); Přizpůsobení Sassu
Předdefinované třídy CSS aplikace Motion UI používají výchozí hodnoty, které lze snadno upravit pomocí nástroje Sass. Za každým přechodem a animací je Sass mixin, který umožňuje měnit nastavení efektu. Tímto způsobem můžete snadno vytvořit zcela vlastní animaci nebo přechod.
Přizpůsobení však nebude fungovat se startovací sadou, musíte však nainstalovat verzi Sass, pokud chcete konfigurovat efekty podle vlastních potřeb.
Chcete-li přizpůsobit přechod nebo animaci, musíte nejprve najít příbuzný mixin. _classes.scss soubor obsahuje názvy kompilovaných CSS tříd s příslušnými mixiny.
V našem příkladu jsme použili .měřítko atribut, a tím, že se podíváme na _classes.scss, můžeme rychle zjistit, že využívá mui-zoom mixin:
// Přechody @mixin motion-ui-transitions … // Měřítko .scale-in-up @include mui-zoom (in, 0,5, 1); …
Motion UI používá mui- prefix na mixins a každý mixin má svůj vlastní soubor. Motion UI má docela samo-vysvětlující konvence pojmenování, takže můžeme rychle najít mui-zoom mixin v _zoom.scss soubor:
@mixin mui-zoom ($ state: in, $ od: 1.5, $ do: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ duration: null, $ timing: null, $ delay: null) …
Pomocí stejné techniky můžete snadno ovládat každou funkci animace nebo přechodu změnou hodnot příslušných proměnných Sass.
Konfigurace tříd modifikátorů
Třídy modifikátorů, které řídí chování (rychlost, načasování a zpoždění) animací a přechodů, lze také konfigurovat pomocí Sassu úpravou hodnot příslušných proměnných v _settings.scss soubor.
Po provedení změn bude uživatelské rozhraní Motion UI použít nové hodnoty jako výchozí v každé animaci a přechodu, takže nebudete muset konfigurovat související směsi po jednom.
