Kuidas luua animatsioone ja üleminekuid liikumisliidese kasutajaliidese abil
Animatsioonid ja üleminekud võimaldavad disaineritel muutusi visualiseerida ja sisu eristada. Animatsioonid ja üleminekud mõjutavad seda aidata kasutajatel ära tunda, kui midagi muutub näiteks klõpsavad nad nupul ja ekraanile ilmub uus teave. Liikumise lisamine rakendustele ja veebisaitidele parandab kasutajate kogemusi, kuna see võimaldab kasutajatel mõista sisu intuitiivsemalt.
Me saame luua animatsioone ja üleminekuid kas nullist või raamatukogude või raamistike abil. Hea uudis meile, frontend folks, on see, et Zurb, sihtasutuse looja, eelmise aasta oktoobris avatud hanked Motion UI, selle animatsiooni- ja üleminekuraamatukogu, mis põhineb Sassil.
See oli algselt seotud Foundation for Apps'iga ja nüüd on ta iseseisva väljalaske jaoks uuendatud, sh animatsiooni järjekord ja paindlikud CSS-mustrid. Liikumisliides kasutab ka mõningaid Sihtraamistiku raamistiku komponente, nagu orbiidi liugur, Toggler-lüliti ja Reveal-modaal, nii et see on üsna jõuline tööriist.
Alustamine
Kuigi Motion UI on Sass-raamatukogu, ei pea te seda tingimata kasutama Sassiga, kuna Zurb pakub arendajatele käepärast käivituskomplekti, mis sisaldab ainult kompileeritud CSS-i. Te saate selle alla laadida Motion UI kodulehelt ja alustada kiiresti prototüüpiga, kasutades eelnevalt määratud CSS-animatsiooni ja üleminekuklasse.
Stardikomplekt ei sisalda ainult Motion UI-d, vaid ka fondi raamistikku, mis tähendab, et kui soovite, võite kasutada Sihtrühma võrku ja kõiki teisi Sihtasutusfunktsiooni funktsioone.
Starter kit tarnitakse ka koos index.html faili, mis võimaldab teil raamistikku kiiresti testida.
Kui vajate keerukamaid kohandusi ja tahate kasutada liikuva kasutajaliidese võimsa Sass mixini võimendust, saate installida kogu versiooni, mis sisaldab allikat .scss faile npm või Bower.
Motion UI dokumentatsioon on praegu pooleldi küpsetatud. Leiad selle siit Githubis või soovi korral selle juurde.
Kiire prototüüpimine
Prototüüpimise alustamiseks saate seda muuta index.html stardikomplekti fail või luua oma HTML-fail. Saate paigutuse kujundada fondi ruudustiku abil, kuid Motion UI-d saab kasutada ka eraldiseisva raamatukoguna ilma fondiraamistikuta.
Motion UI-s on 3 eelnevalt määratletud CSS-klassi peamist tüüpi:
- Üleminekuklassid - võimaldavad lisada HTML-elemendile üleminekuid, näiteks libistades, pleegitades ja liigutades.
- Animatsiooniklassid - võimaldavad teil kasutada erinevaid raputamis-, wiggling- ja ketrusefekte
- Muutujate klassid - töötavad koos ülemineku- ja animatsiooniklassidega ning võimaldavad teil reguleerida liikumise kiirust, ajastust ja viivitust.
HTML-i loomine
Eelnevalt määratud CSS klasside puhul on suur asi, et neid ei saa kasutada ainult klassidena, vaid ka teiste HTML-atribuutidena. Näiteks saate lisage need väärtus atribuut silt, või saate kasutage neid oma tavapärasel viisil andmete- * atribuut samuti.
Alloleval koodilõigul valisin selle viimase võimaluse eraldi käitumise ja muutujate klassid. Ma kasutasin seda aeglane ja lihtne muutuja atribuudid klassidena ja loovad kohandatud andmete animatsioon atribuut skaala-in-up üleminek. The Klõpsake mind nupp on mõeldud efekti käivitamiseks.
Animatsioonide ja üleminekute mängimine koos jQueryga
Liikumisliides sisaldab ka väikest JavaScripti teeki, mis võib teatud sündmuse toimumisel mängida üleminekuid ja animatsioone.
Raamatukogu ise võib leida stardikomplektist motion-ui-starter> js> müüja> motion-ui.js tee.
See loob a MotionUI objekt, millel on kaks meetodit: animeerida () ja animateOut (). Üleminek või animatsioon on seotud konkreetse HTML-elemendiga (
$ (funktsioon () $ (". nupp"). Klõpsa (funktsioon () var $ animation = $ ("# boom"). andmed ("animatsioon"); MotionUI.animateIn ($ ("# boom") , $ animation););); Ülaltoodud koodilõigu juures avasime andmete animatsioon atribuut jQuery sisseehitatud andmed () meetodit, seejärel nimetatakse animeerida () meetod MotionUI objekti.
Siin on täielik kood ja tulemus. Ma kasutasin fondi raami sisseehitatud nuppuklasse Klõpsake mind ja lisasid ka mõned põhilised CSS.
Kuna Motion UI on üsna paindlik, saate lisada ja käivitada ka üleminekuid ja animatsioone mitmel muul viisil.
Näiteks ülaltoodud näites ei pea me tingimata kasutama andmete animatsioon kohandatud atribuut, kuid saab lihtsalt lisada käitumisklassi addClass () jQuery meetod
$ ('# boom'). addClass ('skaala-in-up'); Kohandamine Sassiga
Liikumise kasutajaliidese eelnevalt valmistatud CSS-klassid kasutavad vaikeväärtusi, mida saab Sassi abil hõlpsasti kohandada. Iga ülemineku ja animatsiooni taga on Sass mixin, mis võimaldab muuta efekti seadeid. Nii saate hõlpsasti luua täielikult kohandatud animatsiooni või ülemineku.
Isikupärastamine ei toimi koos starterikomplektiga, kuid peate installima Sass versiooni, kui soovite efekte konfigureerida vastavalt oma vajadustele.
Ülemineku või animatsiooni kohandamiseks pead kõigepealt olema leidke sellega seotud segamini. The _classes.scss fail sisaldab kompileeritud CSS klasside nimetusi vastavate segude abil.
Meie näites kasutasime .skaala-in-up atribuut ja vaadates _classes.scss, saame kiiresti teada saada, et ta kasutab seda mui-zoom mixin:
// Transitions @mixin motion-ui-siirded … // skaala .scale-in-up @ lisage mui-zoom (sisse, 0,5, 1); …
Liikumisliides kasutab mui- eesliide, ja igal segul on oma fail. Liikumise kasutajaliidesel on üsna iseenesestmõistetavad nimetuskonventsioonid, et saaksime kiiresti leida mui-zoom segage _zoom.scss fail:
@mixin mui-zoom ($ state: in, $ alates: 1.5, $ kuni: 1, $ fade: map-get ($ motion-ui-seaded, skaala ja fade), $ kestus: null, $ ajastus: null, $ delay: null) …
Sama tehnikat kasutades saate hõlpsasti kontrollida iga animatsiooni või ülemineku funktsiooni, muutes vastavate Sass muutujate väärtusi.
Modifikaatorite seadistamine
Muutujate klassid, mis reguleerivad animatsioonide ja üleminekute käitumist (kiirust, ajastust ja viivitust), on samuti Sassiga konfigureeritavad, muutes vastavate muutujate väärtusi _settings.scss faili.
Pärast muudatuste tegemist hakkab Motion UI kasutage uusi väärtusi vaikimisi igas animatsioonis ja üleminekus, nii et sa ei pea sellega seotud segusid ükshaaval konfigureerima.
