Animációk és átmenetek létrehozása a Motion UI segítségével

Az animációk és átmenetek lehetővé teszik a tervezők számára a változások megjelenítését és a tartalom megkülönböztetését. Az animációk és átmenetek mozgó hatások segítsen a felhasználóknak felismerni, ha valami megváltozik a webhelyen például egy gombra kattintanak, és egy új információ jelenik meg a képernyőn. Mozgás hozzáadása az alkalmazásokhoz és weboldalakhoz javítja a felhasználói élményt, mivel lehetővé teszi a felhasználók számára intuitívabb módon érzi a tartalmat.

Olyan animációkat és átmeneteket hozhatunk létre, amelyek semmiből vagy könyvtárakból vagy keretekből származnak. Jó hír a számunkra, a frontend emberek, hogy Zurb, az Alapítvány alkotója, tavaly októberben nyílt forráskódú Motion UI, a Sass alapú animációs és átmeneti könyvtár..

Eredetileg az Alapítvány az Alkalmazásokért, és most az önálló kiadáshoz kapta a frissítést, beleértve egy animációs sorrend és rugalmas CSS minták. A Motion UI az Alapítvány keretrendszer egyes összetevőit, például az Orbit-csúszkát, a Toggler-kapcsolót és a Reveal modalt is felhatalmazza, így ez egy nagyon robusztus eszköz.

Elkezdeni

Bár a Motion UI egy Sass könyvtár, nem feltétlenül kell használni a Sass-szal, mivel a Zurb a fejlesztőknek egy praktikus kezdőcsomagot biztosít, amely csak a fordított CSS-t tartalmazza. Letöltheti a Motion UI kezdőlapjáról, és gyorsan elkezdheti prototípusát az előre meghatározott CSS animációs és átmeneti osztályok használatával.

Az indító készlet nem csak a Motion UI-t tartalmazza, hanem az Alapítvány keretrendszerét is, ami azt jelenti, hogy az Alapítvány rácsát és az Alapítvány egyéb funkcióit is használhatja, ha akarod.

Az indítócsomagot szintén egy index.html fájl, amely lehetővé teszi a keretrendszer gyors tesztelését.

Ha kifinomultabb kiigazításokra van szükség, és a Motion UI erős Sass keverékeit szeretné kihasználni, telepítheti a forrást tartalmazó teljes verziót .SCSS npm vagy Bower fájlokkal.

A Motion UI dokumentációja jelenleg félig sült. Itt találhatja meg a Github-on, vagy hozzájárulhat ahhoz, ha akarja.

Gyors prototípus

A prototípusok elindításához szerkesztheti a index.html fájl létrehozása, vagy saját HTML-fájl létrehozása. Az elrendezést az Alapítvány rács segítségével építheti, de a Motion UI is használható önálló könyvtárként az Alapítvány kerete nélkül.

A Motion UI-ben 3 előre meghatározott CSS-osztály fő típusa van:

1. Átmeneti osztályok - lehetővé teszik az átmenetek hozzáadását, mint például a csúszás, a fakulás és a csukló hatások egy HTML elemhez.
2. Animációs osztályok - különböző rázkódási, wiggling és spinning hatások használatát teszik lehetővé
3. Módosító osztályok - együtt dolgoznak az átmeneti és animációs osztályokkal, és lehetővé teszik a mozgás sebességének, időzítésének és késleltetésének beállítását..

A HTML létrehozása

Az előre definiált CSS osztályok nagyszerű dolog az, hogy nem csak osztályként, hanem más HTML-attribútumként is használhatók. Például lehet add hozzá őket a érték attribútuma címke, vagy tudsz használd őket a saját szokásodban adat-* tulajdonság is.

Az alábbi kódrészletben ezt a lehetőséget választottam külön viselkedés és módosító osztályok. Én használtam lassú és nyugalom módosító attribútumok osztályként, és létrehozott egy szokást data-animáció attribútum a skála-in-up átmenet. A Kattints ide gomb a hatás kiváltására szolgál.

 
 Kattints ide  

Animációk és átmenetek lejátszása jQuery-vel

A Motion UI tartalmaz egy kis JavaScript-könyvtárat is, amely bizonyos események bekövetkezésekor képes átmeneteket és animációkat játszani.

Maga a könyvtár is megtalálható a kezdőcsomagban motion-ui-starter> js> eladó> motion-ui.js pálya.

Ez létrehoz egy MotionUI objektum, amelynek két módja van: animateIn () és animateOut (). Az átmenet vagy az animáció az adott HTML elemhez kötődik (a példánkban) a jQuery segítségével a következő módon indítható:

 $ (függvény () $ (". gomb"). Kattintson (funkció () var $ animáció = $ ("# boom"). adat ("animáció"); MotionUI.animateIn ($ ("# boom") , $ animation);););

A fenti kódrészletben a data-animáció attribútum a jQuery beépített használatával adat() metódus, majd az animateIn () módszer MotionUI tárgy.

Itt van a teljes kód és az eredmény. Az Alapítvány kereteinek beépített gombosztályait használtam a Kattints ide gombot, és hozzáadott néhány alapvető CSS-t is.

Mivel a Motion UI nagyon rugalmas, az átmeneteket és animációkat más módon is hozzáadhatja és kiválthatja.

Például a fenti példában nem feltétlenül szükséges a data-animáció egyéni attribútum, de egyszerűen hozzáadhatja a viselkedési osztályt a addClass () jQuery módszer a elem a következő módon:

 $ ( '# Boom'). AddClass ( 'méretarányos-in-up');

Testreszabás Sass-szal

A Motion UI előkészített CSS osztályai alapértelmezett értékeket használnak, amelyek könnyen testreszabhatók Sass segítségével. Minden egyes átmenet és animáció mögött van egy Sass mixin, amely lehetővé teszi a hatás beállításainak megváltoztatását. Így könnyen létrehozhat egy teljesen egyedi animációt vagy átmenetet.

A testreszabás azonban nem fog működni a kezdőcsomaggal, de telepítenie kell a Sass-verziót, ha a hatásokat saját igényei szerint kívánja beállítani.

Egy átmenet vagy animáció testreszabásához először szükség van keresse meg a kapcsolódó mixint. A _classes.scss A fájl tartalmazza az összeállított CSS osztályok nevét a megfelelő mixinnel.

Példánkban a .skála-in-up attribútum, és nézd meg _classes.scss, hamar kiderül, hogy kihasználja a mui-zoom mixin:

 // Átmenetek @mixin mozgás-ui-átmenetek … // Méret .scale-in-up @befizetni a mui-zoomot (in, 0,5, 1); …

A Motion UI a mui- a mixinek előtagja, és minden mixinnek saját fájlja van. A Motion UI meglehetősen magyarázó elnevezési megállapodásokkal rendelkezik, így gyorsan megtalálhatjuk a mui-zoom keverjük össze a _zoom.scss file:

 @mixin mui-zoom ($ state: in, $ -tól: 1,5, $ -ig: 1, $ fade: map-get ($ motion-ui-beállítások, skála és fade), $ időtartam: null, $ időzítés: null, $ delay: null) …

Ugyanezzel a módszerrel könnyedén szabályozhatja az animáció vagy az átmenet minden tulajdonságát a megfelelő Sass változók értékeinek megváltoztatásával.

A módosító osztályok beállítása

Az animációk és átmenetek viselkedését (sebességét, időzítését és késleltetését) szabályozó módosító osztályok is konfigurálhatók Sass-szal a megfelelő változók értékeinek módosításával a _settings.scss fájl.

A módosítások elvégzése után a Motion UI fog alapértelmezettként használja az új értékeket minden animációban és átmenetben, így nem kell egymás után konfigurálni a kapcsolódó mixineket.