Miten luodaan animaatioita ja siirtymiä Motion UI n avulla
Animaatiot ja siirtymät antavat suunnittelijoille mahdollisuuden visualisoida muutoksia ja erottaa sisältöä. Animaatiot ja siirtymät vaikuttavat siihen auttaa käyttäjiä tunnistamaan, kun jotain muuttuu sivustolla, esimerkiksi he napsauttavat painiketta ja näyttöön tulee uusi tieto. Liikkumisen lisääminen sovelluksiin ja verkkosivustoihin parantaa käyttäjäkokemusta, koska sen avulla käyttäjät voivat ymmärrä sisältöä intuitiivisemmin.
Voimme luoda animaatioita ja siirtymiä joko tyhjästä tai kirjastojen tai kehysten avulla. Hyvä uutinen meille, frontend ihmiset, on, että Zurb, perustaja, viime lokakuussa avoimen lähdekoodin Motion UI, sen animaatio ja siirtyminen kirjasto perustuu Sass.
Se oli alun perin liitetty Foundation for Appsiin, ja nyt itsenäiseen julkaisuun se sai uudistuksen, mukaan lukien animaation jonotusjärjestelmä ja joustavat CSS-mallit. Liikkuva käyttöliittymä valtuuttaa myös joitakin säätiön kehyksen osia, kuten Orbit-liukusäädintä, Toggler-vaihtajaa ja Reveal-modaalia, joten se on melko vankka työkalu.
Päästä alkuun
Vaikka Motion UI on Sass-kirjasto, sinun ei tarvitse välttämättä käyttää sitä Sassin kanssa, sillä Zurb tarjoaa kehittäjille kätevän käynnistyspaketin, joka sisältää vain kootun CSS: n. Voit ladata sen Motion UI: n kotisivulta ja aloittaa nopeasti prototyypin käyttämällä ennalta määritettyjä CSS-animaatio- ja siirtymisluokkia.
Starttipaketti ei sisällä ainoastaan Motion UI: tä, vaan myös säätiön kehystä, mikä tarkoittaa sitä, että voit käyttää säätiöverkkoa ja kaikkia muita säätiön Sivustojen toimintoja, jos haluat.
Starttipaketti toimitetaan myös index.html tiedosto, jonka avulla voit testata kehyksen nopeasti.
Jos tarvitset kehittyneempiä säätöjä ja haluat ottaa liikkeelle Motion UI: n tehokkaat Sass-sekoittimet, voit asentaa lähdekoodin sisältävän täyden version .SCSS tiedostoja, joissa on npm tai Bower.
Liike-UI: n dokumentaatio on tällä hetkellä puoliksi paistettu. Voit löytää sen täältä Githubissa tai osallistua siihen, jos haluat.
Nopea prototyyppi
Voit aloittaa prototyyppien muokkaamisen index.html käynnistyspaketin tiedosto tai luo oma HTML-tiedosto. Voit rakentaa ulkoasun käyttämällä säätiöverkkoa, mutta Motion UI: tä voidaan käyttää myös erillisenä kirjastona ilman säätiön kehystä.
Motion UI: ssä on kolme ennalta määriteltyjen CSS-luokkien päätyyppiä:
- Siirtymisluokat - mahdollistavat siirtymien lisäämisen, kuten liukuva, häipyvä ja saranoitava vaikutus HTML-elementtiin.
- Animaatiokurssit - voit käyttää erilaisia ravistelu-, wiggling- ja kehruuefektejä
- Muuttajaluokat - toimivat yhdessä sekä siirtymä- että animaatioluokkien kanssa, ja niiden avulla voit säätää liikkeen nopeutta, ajoitusta ja viivettä.
HTML-koodin luominen
Ensisijaisten CSS-luokkien hieno asia on, että niitä ei voi käyttää vain luokkana vaan myös muina HTML-määritteinä. Esimerkiksi voit lisää ne arvo ominaisuus tag, tai voit käytä niitä omassa tavassasi data- * ominaisuus yhtä hyvin.
Alla olevassa koodinpätkössä valitsin viimeksi mainitun vaihtoehdon erilliset käyttäytymis- ja muokkausluokat. Käytin hidas ja helppous muokkaa attribuutteja luokkana ja luonut mukautetun data-animaatio ominaisuus asteikko-in-up siirtyminen. Napsauta minua -painikkeella on tarkoitus käynnistää vaikutus.
Animaatioiden ja siirtymien toistaminen jQueryn avulla
Motion UI sisältää myös pienen JavaScript-kirjaston, joka voi toistaa siirtymiä ja animaatioita tietyn tapahtuman tapahtuessa.
Kirjasto itsessään löytyy käynnistyspaketista motion-ui-starter> js> myyjä> motion-ui.js polku.
Se luo a MotionUI objektilla on kaksi menetelmää: animateIn () ja animateOut (). Siirtymä tai animaatio sidottu tiettyyn HTML-elementtiin (
$ (toiminto () $ (". painike"). Napsauta (toiminto () var $ animation = $ ("# boom"). data ("animaatio"), MotionUI.animateIn ($ ("# boom") , $ animation););); Yllä olevassa koodinpätkässä pääsimme sisään data-animaatio määrite käyttämällä jQueryn sisäänrakennettua tiedot () menetelmää, jota kutsutaan sitten animateIn () menetelmän MotionUI esine.
Tässä on täydellinen koodi ja tulos. Käytin säätiön kehyksiä sisäänrakennettujen painikkeiden luokkiin Napsauta minua -näppäintä, ja lisäsi myös joitakin CSS: ää.
Koska Motion UI on varsin joustava, voit myös lisätä ja käynnistää siirtymiä ja animaatioita monella muulla tavalla.
Esimerkiksi yllä olevassa esimerkissä ei välttämättä tarvitse käyttää data-animaatio mukautettu määrite, mutta voi yksinkertaisesti lisätä käyttäytymisluokkaan addClass () jQuery-menetelmä
$ ( '# Puomi'). AddClass (asteikko-in-up ");
Mukauttaminen Sassin kanssa
Motion UI: n valmiiksi valmistetut CSS-luokat käyttävät oletusarvoja, jotka voidaan helposti räätälöidä Sassin avulla. Jokaisen siirtymän ja animaation takana on Sass-sekoitus, joka mahdollistaa vaikutuksen asetusten muuttamisen. Näin voit luoda täysin mukautetun animaation tai siirtymän.
Mukauttaminen ei kuitenkaan toimi käynnistyspaketin kanssa, mutta sinun täytyy asentaa Sass-versio, jos haluat määrittää vaikutukset omien tarpeiden mukaan.
Voit muokata siirtymää tai animaatiota ensin löytää vastaava sekoitus. _classes.scss tiedosto sisältää käännettyjen CSS-luokkien nimet vastaavilla sekvensseillä.
Esimerkissämme käytimme .asteikko-in-up määritteellä ja katsomalla _classes.scss, voimme nopeasti selvittää, että se hyödyntää mui-zoom Sekoita joukkoon:
// Siirtymät @mixin-liike-ui-siirtymät … // skaalata .scale-in-up @ sisällyttää mui-zoom (in, 0,5, 1); …
Motion UI käyttää mui- etuliite mikseille, ja jokaisella sekoituksella on oma tiedosto. Motion UI: ssä on melko itsestään selviävät nimityssopimukset, joten voimme nopeasti löytää mui-zoom sekoita _zoom.scss file:
@mixin mui-zoom ($ state: in, $ alkaen: 1,5, $ - 1, $ fade: map-get ($ motion-ui-asetukset, mittakaava ja häivytys), $ kesto: null, $ ajoitus: null, $ delay: null) …
Samaa tekniikkaa käyttämällä voit helposti ohjata jokaisen animaation tai siirtymän ominaisuutta muuttamalla vastaavien Sass-muuttujien arvoja.
Muokkausluokkien määrittäminen
Muunnosluokat, jotka ohjaavat animaatioiden ja siirtymien käyttäytymistä (nopeutta, ajoitusta ja viivettä), ovat myös konfiguroitavissa Sassin kanssa muuttamalla vastaavien muuttujien arvoja _settings.scss tiedosto.
Kun olet tehnyt muutokset, Motion UI tulee käytä uusia arvoja oletuksena jokaisessa animaatiossa ja siirtymässä, joten sinun ei tarvitse määrittää asiaan liittyviä sekoituksia yksitellen.
