Kā izveidot animācijas un pārejas ar kustības UI
Animācijas un pārejas ļauj dizaineriem vizualizēt izmaiņas un diferencēt saturu. Animācijas un pārejas ietekmē to palīdzēt lietotājiem atpazīt, kad kaut kas mainās vietā, piemēram, viņi noklikšķina uz pogas, un ekrānā parādās jauna informācija. Kustību pievienošana lietotnēm un tīmekļa vietnēm uzlabo lietotāja pieredzi, jo tas ļauj lietotājiem padarīt saturu saprotamāku.
Mēs varam izveidot animācijas un pārejas no nulles vai izmantojot bibliotēkas vai ietvarus. Labas ziņas mums, frontend folks, ir tas, ka Zurb, fonda dibinātājs, pagājušā gada oktobra atklātā izcelsmes Motion UI, tā animācijas un pārejas bibliotēka, kas balstīta uz Sass.
Sākotnēji tas tika pievienots lietojumprogrammu Foundation for Apps, un tagad savrupajam atbrīvojumam tā ieguva atjauninājumu, ieskaitot animācijas rindu sistēma un elastīgi CSS modeļi. Motion UI arī pilnvaro dažus Fonda struktūras komponentus, piemēram, slīdni Orbit, Toggler komutatoru un Reveal modālu, tāpēc tas ir diezgan stabils rīks.
Darba sākšana
Lai gan Motion UI ir Sass bibliotēka, jums nav obligāti jāizmanto Sass, jo Zurb nodrošina izstrādātājiem ērtu starta komplektu, kas satur tikai apkopoto CSS. Jūs varat to lejupielādēt no Motion UI mājas lapas un ātri sākt prototipu, izmantojot iepriekš noteiktās CSS animācijas un pārejas klases.
Starta komplektā nav tikai Motion UI, bet arī Fonda ietvars, kas nozīmē, ka jūs varat izmantot Fonda režģi un visas citas Fonda vietņu funkcijas, ja vēlaties.
Starta komplektu piegādā arī ar index.html failu, kas ļauj ātri pārbaudīt sistēmu.
Ja jums ir vajadzīgas sarežģītākas korekcijas un vēlaties izmantot Motion UI spēcīgo Sass mixins, varat instalēt pilnu versiju, kas satur avotu .scss failus ar npm vai Bower.
Motion UI dokumentācija šobrīd vēl ir cepta. Jūs to varat atrast šeit Github, vai arī, ja vēlaties, veiciet to.
Ātra prototipēšana
Lai sāktu prototipēšanu, varat rediģēt index.html startera komplekta failu vai izveidojiet savu HTML failu. Jūs varat veidot izkārtojumu, izmantojot Fonda režģi, bet Motion UI var izmantot arī kā atsevišķu bibliotēku bez Fonda sistēmas.
Motion UI ir trīs galvenie iepriekš definēto CSS klases veidi:
- Pārejas klases - ļauj pievienot HTML elementam pārejas, piemēram, bīdāmās, izbalējošās un savienojošās sekas.
- Animācijas klases - ļauj izmantot dažādas kratīšanas, wigglingas un vērpšanas sekas
- Modifikatoru klases - strādājiet kopā gan ar pārejas, gan animācijas klasēm, un tās ļauj pielāgot kustības ātrumu, laiku un aizkavēšanos..
HTML izveide
Lielā lieta par iepriekš definētām CSS klasēm ir tāda, ka tās nevar izmantot tikai kā klases, bet arī kā citus HTML atribūtus. Piemēram, jūs varat pievienojiet tos vērtību atribūts tag, vai jūs varat izmantot tos savos ieradumos datu- * atribūts arī.
Tālāk redzamajā koda fragmentā es izvēlējos šo pēdējo iespēju atsevišķas uzvedības un modificētāju klases. Es izmantoju lēns un viegli modificētāja atribūti kā klases un izveidojuši pasūtījumu datu animācija atribūts apjoma palielināšana pāreju. The Noklikšķiniet uz mani poga ir paredzēta, lai iedarbinātu efektu.
Animāciju un pāreju atskaņošana ar jQuery
Motion UI ietver arī nelielu JavaScript bibliotēku, kas var atskaņot pārejas un animācijas, kad notiek kāds notikums.
Pati bibliotēka atrodas starta komplektā motion-ui-starter> js> pārdevējs> motion-ui.js ceļš.
Tas rada a MotionUI objektam, kam ir divas metodes: animēt () un animateOut (). Pāreja vai animācija saistās ar konkrēto HTML elementu (
$ (funkcija () $ (". poga"). noklikšķiniet uz (funkcija () var $ animation = $ ("# boom"). dati ("animācija"), MotionUI.animateIn ($ ("# boom") , $ animation););); Iepriekš minētajā koda fragmentā mēs piekļuvām datu animācija atribūts, izmantojot jQuery iebūvēto dati () metodi, tad to sauc par animēt () metode MotionUI objektu.
Šeit ir pilns kods un rezultāts. Es izmantoju Fonda ietvaru iebūvētās pogas klases Noklikšķiniet uz mani poga, kā arī pievienoja dažas pamata CSS.
Tā kā kustības UI ir diezgan elastīga, varat arī pievienot un aktivizēt pārejas un animācijas daudzos citos veidos.
Piemēram, iepriekš minētajā piemērā mums nav obligāti jāizmanto datu animācija pielāgots atribūts, bet var vienkārši pievienot uzvedības klasi addClass () jQuery metode
$ ('# boom'). addClass ("skalas in-up"); Pielāgošana ar Sass
Motion UI iepriekš sagatavotās CSS klases izmanto noklusējuma vērtības, kuras var viegli pielāgot ar Sass palīdzību. Katrai pārejai un animācijai ir Sass mixin, kas ļauj mainīt efekta iestatījumus. Tādā veidā jūs varat viegli izveidot pilnībā pielāgotu animāciju vai pāreju.
Pielāgošana tomēr nedarbosies ar starta komplektu, taču, ja vēlaties konfigurēt efektus atbilstoši savām vajadzībām, jāinstalē Sass versija..
Lai pielāgotu pāreju vai animāciju, vispirms ir nepieciešams atrast atbilstošo maisījumu. The _classes.scss failā ir apkopoto CSS klašu nosaukumi ar attiecīgajiem maisījumiem.
Mūsu piemērā mēs izmantojām .apjoma palielināšana atribūtu un apskatot _classes.scss, mēs varam ātri uzzināt, ka tā izmanto mui-zoom mixin:
// Transitions @mixin motion-ui-pārejas … // Scale-in-up @ ietver arī mui-zoom (in, 0.5, 1); …
Motion UI izmanto mui- prefikss, un katram maisījumam ir savs fails. Motion UI ir diezgan pašsaprotamas nosaukšanas konvencijas, tāpēc mēs varam ātri atrast mui-zoom sajauciet _zoom.scss fails:
@mixin mui-zoom ($ state: in, $ no: 1.5, $ līdz: 1, $ fade: map-get ($ motion-ui-settings, mēroga un izbalināt), $ ilgums: null, $ timing: null, $ delay: null) …
Izmantojot to pašu tehniku, jūs varat viegli kontrolēt katru animācijas vai pārejas funkciju, mainot attiecīgo Sass mainīgo vērtības.
Modificētāju klases konfigurēšana
Modifikācijas klases, kas kontrolē animāciju un pāreju uzvedību (ātrumu, laiku un aizkavēšanos), ir konfigurējamas arī ar Sass, mainot attiecīgo mainīgo lielumus. _settings.scss failu.
Pēc izmaiņu veikšanas Motion UI būs izmantot jaunās vērtības kā noklusējuma katrā animācijā un pārejā, tāpēc jums nebūs jākonfigurē saistītie maisījumi pa vienam.
