Kaip sukurti animacijas ir perėjimus su judesio sąsaja
Animacijos ir perėjimai leidžia dizaineriams vizualizuoti pokyčius ir atskirti turinį. Animacijos ir perėjimai yra judantys efektai padėti vartotojams atpažinti, kada pasikeičia kažkas svetainėje, pavyzdžiui, jie spustelės mygtuką ir ekrane atsiranda nauja informacija. Įtraukus judėjimą į programas ir svetaines, pagerėja naudotojų patirtis, nes tai leidžia vartotojams labiau suvokti turinį.
Galime sukurti animacijas ir perėjimus nuo nulio arba naudojant bibliotekas ar sistemas. Geros naujienos mums, „Frontend“ žmonėms, yra tai, kad Zurbas, Fondo kūrėjas, praėjusių metų spalio mėn..
Iš pradžių jis buvo susietas su „Apps for Apps“, o dabar, kai jis buvo atskirtas, jis gavo atnaujinimą, įskaitant „ animacijos eilių sistema ir lankstūs CSS modeliai. „Motion UI“ taip pat įgalina kai kuriuos fondo sistemos komponentus, pvz., „Orbit“ slankiklį, „Toggler“ perjungiklį ir „Reveal“ modalą, todėl tai yra gana tvirtas įrankis.
Darbo pradžia
Nors „Motion UI“ yra „Sass“ biblioteka, jums nebūtinai reikia ją naudoti su „Sass“, nes „Zurb“ suteikia kūrėjams patogų paleidimo rinkinį, kuriame yra tik sukaupta CSS. Ją galite atsisiųsti iš „Motion UI“ pagrindinio puslapio ir greitai pradėti prototipą naudodami iš anksto nustatytas CSS animacijos ir pereinamojo laikotarpio klases.
„Starter“ rinkinyje nėra tik „Motion UI“, bet ir „Foundation“ sistemos, o tai reiškia, kad galite naudoti fondo tinklą ir visas kitas Fondo svetainių funkcijas, jei norite.
Pradinis rinkinys taip pat tiekiamas su index.html failą, kuris leidžia greitai išbandyti sistemą.
Jei jums reikia daugiau sudėtingų koregavimų ir norite pasinaudoti „Motion UI“ galingu „Sass“ mišiniu, galite įdiegti pilną versiją, kurioje yra šaltinis .scss failai su „npm“ arba „Bower“.
Judesio sąsajos dokumentai šiuo metu yra pusiau kepti. Čia galite rasti čia „Github“ arba prisidėti prie jo, jei norite.
Greitas prototipavimas
Norėdami pradėti prototipų kūrimą, galite redaguoti index.html pradinio rinkinio failą arba sukurkite savo HTML failą. Galite sukurti išdėstymą naudodami fondo tinklelį, tačiau „Motion UI“ taip pat gali būti naudojama kaip atskira biblioteka be fondo sistemos.
„Motion UI“ yra 3 pagrindiniai iš anksto apibrėžtų CSS klasių tipai:
- Pereinamojo laikotarpio klasės - leidžia į HTML elementą įtraukti perėjimus, tokius kaip stumdomasis, išblukęs ir jungiantis efektas.
- Animacijos klasės - leidžia naudoti skirtingus drebulys, wiggling ir verpimo efektus
- Modifikatorių klasės - dirbti kartu su pereinamojo laikotarpio ir animacijos klasėmis, ir jie leidžia reguliuoti judėjimo greitį, laiką ir vėlavimą.
HTML kūrimas
Puikus dalykas dėl iš anksto nustatytų CSS klasių yra tai, kad jie negali būti naudojami tik kaip klasės, bet ir kaip kiti HTML atributai. Pavyzdžiui, galite pridėti juos prie vertė atributas žyma, arba galite naudoti juos savo papročiuose duomenų * atributas taip pat.
Toliau pateiktame kodo fragmente pasirinkau pastarąją parinktį atskiros elgesio ir modifikatorių klasės. Aš naudoju lėtai ir lengvumas modifikatoriaus atributai kaip klasės, ir sukūrė pasirinkimą duomenų animacija atributas masto įtraukimas perėjimas. The Paspausk mane mygtukas skirtas poveikiui sukelti.
Animacijų ir perėjimų atkūrimas su jQuery
„Motion UI“ apima ir mažą „JavaScript“ biblioteką, kuri gali atlikti perėjimus ir animacijas, kai įvyksta tam tikras įvykis.
Pati biblioteka randama starterio rinkinyje motion-ui-starter> js> pardavėjas> motion-ui.js kelias.
Jis sukuria a MotionUI objektas, turintis du metodus: animuoti () ir animateOut (). Perėjimas arba animacija susieta su konkrečiu HTML elementu (
$ (funkcija () $ („. mygtukas“).) spustelėkite (funkcija () var $ animation = $ („# boom“). duomenys („animacija“), MotionUI.animateIn ($ („# boom“) , $ animation);););
Pirmiau pateiktame kodo fragmente mes pasiekėme duomenų animacija atributas, naudojant jQuery integruotą duomenys () metodas, tada vadinamas animuoti () metodas MotionUI objektą.
Čia yra visas kodas ir rezultatas. Aš naudoju fondo karkasų įmontuotas mygtukų klases Paspausk mane mygtukas, taip pat pridėjo keletą pagrindinių CSS.
Kadangi judesio sąsaja yra gana lanksti, taip pat galite pridėti ir paleisti perėjimus ir animacijas daugeliu kitų būdų.
Pavyzdžiui, aukščiau pateiktame pavyzdyje nebūtinai reikia naudoti duomenų animacija priskirtas atributas, bet gali tiesiog pridėti elgesio klasę addClass () jQuery metodas
$ („# boom“). „AddClass“ („skalė-in-up“);
Tinkinimas su Sass
„Motion UI“ iš anksto parengtos CSS klasės naudoja numatytas reikšmes, kurias galima lengvai pritaikyti Sass pagalba. Kiekvienam perėjimui ir animacijai yra „Sass“ mišinys, leidžiantis keisti efekto nustatymus. Tokiu būdu galite lengvai sukurti visiškai pritaikytą animaciją ar perėjimą.
Nepaisant to, jei norite konfigūruoti efektus pagal savo poreikius, „Customization“ neveiks su starterio rinkiniu..
Jei norite pritaikyti perėjimą ar animaciją, iš pradžių reikia suraskite susijusį mišinį. The _classes.scss faile yra sukauptų CSS klasių pavadinimai su atitinkamais mišiniais.
Mūsų pavyzdyje mes naudojome .masto įtraukimas atributas, ir pažiūrėkite _classes.scss, mes galime greitai sužinoti, kad jis naudojasi mastelio keitimas mixin:
// Transitions @mixin motion-ui-perėjimai … // Scale .scale-in-up @ įtraukti mui-zoom (į, 0,5, 1); …
„Motion UI“ naudoja mui- prefiksas, ir kiekvienas mišinys turi savo failą. „Motion UI“ turi gana savaime suprantamas pavadinimus, todėl galime greitai rasti mastelio keitimas sumaišykite _zoom.scss failas:
@mixin mui-zoom ($ state: in, $ nuo: 1,5, $ iki: 1, $ fade: map-get ($ motion-ui-settings, mastelio ir išnykimo), $ trukmė: null, $ timing: null, $ delay: null) …
Ta pačia technika galite lengvai valdyti kiekvieną animacijos ar perėjimo funkciją, keičiant atitinkamų Sass kintamųjų reikšmes.
Modifikatorių klasių konfigūravimas
Modifikavimo klasės, kurios kontroliuoja animacijų ir perėjimų elgesį (greitį, laiką ir vėlavimą), taip pat gali būti konfigūruojamos su Sass, keičiant atitinkamų kintamųjų reikšmes _settings.scss failą.
Kai atliksite pakeitimus, Motion UI bus naudokite naujas reikšmes kaip numatytąjį kiekvienoje animacijoje ir perėjime, taigi jums nereikės konfigūruoti susijusių mišinių vienas po kito.
