Hvordan lage animasjoner og overganger med Motion UI
Animasjoner og overganger tillater designere å visualisere endring og skille mellom innhold. Animasjoner og overganger er bevegelige effekter som hjelpe brukere å gjenkjenne når noe endres På nettstedet, for eksempel klikker de på en knapp og et nytt stykke informasjon vises på skjermen. Å legge til bevegelse til apper og nettsteder forbedrer brukeropplevelsen, slik det tillater brukere å gi mening på en mer intuitiv måte.
Vi kan lage animasjoner og overganger enten fra grunnen eller ved hjelp av biblioteker eller rammer. Gode nyheter for oss, frontend folk, er at Zurb, skaperen av Stiftelsen, i oktober i oktober åpnet Motion UI, dets animasjon og overgangsbibliotek basert på Sass.
Det ble opprinnelig buntet med Foundation for Apps, og nå, for den frittstående utgivelsen, fikk den en revolusjon, inkludert en animasjonssystem og fleksible CSS mønstre. Bevegelses-brukergrensesnittet styrer også enkelte komponenter i stiftelsesrammen, som for eksempel skyvebryteren, toggler-bryteren og Reveal-modal, så det er et ganske robust verktøy.
Starter
Selv om Motion UI er et Sass-bibliotek, trenger du ikke nødvendigvis å bruke det med Sass, da Zurb gir utviklere et praktisk startpakke som bare inneholder kompilert CSS. Du kan laste den ned fra Motion UIs hjemmeside, og raskt begynne å prototype ved å bruke forhåndsdefinerte CSS animasjon og overgangsklasser.
Startpakken inneholder ikke bare Motion UI, men også Foundation Framework, som betyr at du kan bruke Foundation grid og alle de andre funksjonene til Foundation for Sites hvis du vil.
Startpakken leveres også med en index.html fil som lar deg raskt teste rammen.
Hvis du trenger mer sofistikerte justeringer og ønsker å utnytte Motion UIs kraftige Sass-mixiner, kan du installere den fulle versjonen som inneholder kilden .SCSS filer med npm eller Bower.
Motion UIs dokumentasjon er foreløpig halvfabrikert. Du kan finne den her på Github, eller bidra til det hvis du vil.
Rask prototyping
For å starte prototyping, kan du redigere index.html fil av startpakken, eller lag din egen HTML-fil. Du kan bygge oppsettet ved hjelp av Foundation grid, men Motion UI kan også brukes som et frittstående bibliotek uten grunnlaget.
Det er 3 hovedtyper av forhåndsdefinerte CSS-klasser i Motion UI:
- Overgangsklasser - gjør det mulig å legge til overganger, for eksempel glidende, fading og hengselvirkninger til et HTML-element.
- Animasjonsklasser - gjør det mulig å bruke forskjellige rystelser, wiggling og spinning effekter
- Modifierings klasser - samarbeide med både overgangs- og animasjonsklasser, og de lar deg justere hastigheten, timingen og forsinkelsen av en bevegelse.
Bygg HTML-koden
Det gode med forhåndsdefinerte CSS-klasser er at de ikke bare kan brukes som klasser, men også som andre HTML-attributter. For eksempel kan du legg dem til verdi attributt av stikkord, eller du kan bruk dem i din egen skikk data-* Egenskap også.
I kodestykket nedenfor valgte jeg dette sistnevnte alternativet til separat oppførsel og modifikasjonsklasser. Jeg brukte langsom og letthet modifiseringsattributter som klasser, og opprettet en egendefinert data-animasjon attributt for skala-in-up overgang. De Klikk på meg knappen er ment å utløse effekten.
Spiller animasjoner og overganger med jQuery
Motion UI inkluderer også et lite JavaScript-bibliotek som kan spille overganger og animasjoner når en bestemt hendelse skjer.
Biblioteket selv finnes i startpakken i motion-ui-starter> js> leverandør> motion-ui.js sti.
Det skaper en MotionUI objekt som har to metoder: animateIn () og animateOut (). Overgangen eller animasjonen bundet til bestemt HTML-element (
$ (funksjon () $ (". knapp"). klikk (funksjon () var $ animation = $ ("# boom"). data ("animasjon"); MotionUI.animateIn ($ ("# boom") , $ animasjon););); I kodebiten ovenfor har vi tilgang til data-animasjon attributt ved å bruke jQuery's innebygde data() metode, deretter kalt animateIn () metode av MotionUI gjenstand.
Her er den fulle koden og resultatet. Jeg brukte Foundation-rammeverkets innebygde knappeklasser for Klikk på meg knappen, og lagt til noen grunnleggende CSS også.
Som Motion UI er ganske fleksibel, kan du også legge til og utløse overganger og animasjoner på mange andre måter.
For eksempel i eksemplet ovenfor trenger vi ikke nødvendigvis å bruke data-animasjon egendefinert attributt, men kan ganske enkelt legge til oppførselsklassen med addClass () jQuery metode til
$ ( '# Boom') addClass ( 'skala-i-opp.');
Tilpasning med Sass
Motion UIs prefabrikkerte CSS-klasser bruker standardverdier som enkelt kan tilpasses ved hjelp av Sass. Det er en Sass mixin bak hver overgang og animasjon, som gjør det mulig å endre innstillingene av effekten. På denne måten kan du enkelt lage en helt tilpasset animasjon eller overgang.
Tilpassing vil ikke fungere med startpakken, men du må installere Sass-versjonen hvis du vil konfigurere effektene i henhold til dine egne behov.
For å tilpasse en overgang eller animasjon, må du først finn den tilhørende mixin. De _classes.scss filen inneholder navnene på de sammensatte CSS-klassene med de respektive mixins.
I vårt eksempel brukte vi .skala-in-up attributt, og ved å ta en titt på _classes.scss, vi kan raskt finne ut at det gjør bruk av mui-zoom mixin:
// Overganger @mixin bevegelse-ui-overganger ... // Skala.scale-in-up @include mui-zoom (in, 0.5, 1); ...
Motion UI bruker mui- prefix til mixins, og hver mixin har sin egen fil. Motion UI har ganske selvforklarende navngivningskonvensjoner, slik at vi raskt kan finne mui-zoom mixin i _zoom.scss fil:
@mixin mui-zoom ($ state: i, $ fra: 1,5, $ til: 1, $ fade: map-get ($ motion-ui-innstillinger, skala og fade), $ varighet: null, $ timing: null, $ forsinkelse: null) ...
Ved hjelp av samme teknikk kan du enkelt kontrollere alle funksjonene i en animasjon eller overgang ved å endre verdiene til de respektive Sass-variablene.
Konfigurere Modifier Classes
Modifikatorklasser som styrer oppførselen (hastighet, timing og forsinkelse) av animasjoner og overganger kan også konfigureres med Sass ved å endre verdiene for de respektive variablene i _settings.scss fil.
Når du har gjort endringene, vil Motion UI Bruk de nye verdiene som standard i alle animasjoner og overganger, så du trenger ikke å konfigurere de tilknyttede mixins en etter en.
