Hur man skapar animationer och övergångar med Motion UI
Animationer och övergångar tillåter designers att visualisera förändring och differentiera innehåll. Animationer och övergångar är rörliga effekter som Hjälp användare att känna igen när något ändras På webbplatsen klickar de till exempel på en knapp och en ny information visas på skärmen. Lägga till rörelse till appar och webbplatser förbättrar användarupplevelse, eftersom det tillåter användare att göra intryck av innehåll på ett mer intuitivt sätt.
Vi kan skapa animeringar och övergångar antingen från början eller genom att använda bibliotek eller ramar. Goda nyheter för oss, frontend-folks, är den Zurb, skaparen av Stiftelsen, i oktober i oktober öppnade Motion UI, dess animations- och övergångsbibliotek baserat på Sass.
Det var ursprungligen buntat med Foundation for Apps, och nu för den fristående versionen fick den en nyhet, inklusive en animationsköksystem och flexibla CSS mönster. Motion UI driver också vissa komponenter i Foundation Framework, som Orbit-reglaget, Toggler switchen och Reveal Modal, så det är ett ganska robust verktyg.
Komma igång
Även om Motion UI är ett Sass-bibliotek behöver du inte nödvändigtvis använda det med Sass, eftersom Zurb ger utvecklare en praktisk startsats som bara innehåller den sammanställda CSS. Du kan ladda ner den från Motion UIs hemsida och börja snabbt prototypa med hjälp av de fördefinierade CSS-animeringarna och övergångsklasserna.
Startpaketet innehåller inte bara Motion UI, men Foundation Framework också, vilket innebär att du kan använda Foundation Grid och alla andra funktioner i Foundation for Sites om du vill.
Startpaketet levereras också med en index.html fil som låter dig snabbt testa ramverket.
Om du behöver mer sofistikerade justeringar och vill utnyttja Motion UIs kraftfulla Sass mixins kan du installera den fullständiga versionen som innehåller källan .SCSS filer med npm eller Bower.
Motion UIs dokumentation är för närvarande halvbakt fortfarande. Du kan hitta den här på Github, eller bidra till det om du vill.
Snabb prototypning
För att starta prototyper kan du redigera index.html filen av startpaketet eller skapa din egen HTML-fil. Du kan bygga layouten genom att använda Foundation grid, men Motion UI kan också användas som ett fristående bibliotek utan Foundation Framework.
Det finns tre huvudtyper av fördefinierade CSS-klasser i Motion UI:
- Övergångsklasser - gör det möjligt att lägga till övergångar, till exempel glidning, blekning och hängande effekter till ett HTML-element.
- Animeringsklasser - gör att du kan använda olika skakningar, vinklar och snurrande effekter
- Modifierings klasser - arbeta tillsammans med både övergångs- och animationsklasser, och de låter dig justera hastigheten, timingen och fördröjningen av en rörelse.
Bygg HTML
Det fantastiska med fördefinierade CSS-klasser är att de inte bara kan användas som klasser utan också som andra HTML-attribut. Till exempel kan du lägg till dem till värde attribut av märka, Eller kan du Använd dem i eget bruk data-* attribut också.
I kodfältet nedan valde jag det senare alternativet till separat beteende och modifierings klasser. Jag använde långsam och lätthet Ändra attribut som klasser och skapa en anpassad data animering attribut för skala-i-up övergång. De Klicka här knappen är avsedd att utlösa effekten.
Spelar animeringar och övergångar med jQuery
Motion UI innehåller också ett litet JavaScript-bibliotek som kan spela övergångar och animeringar när en viss händelse händer.
Biblioteket själv finns i startpaketet i motion-ui-starter> js> leverantör> motion-ui.js väg.
Det skapar en MotionUI objekt som har två metoder: animateIn () och animateOut (). Övergången eller animationen bunden till det särskilda HTML-elementet (
$ (funktion () $ (".knappen"). klicka (funktion () var $ animation = $ ("# boom") .data ("animering"); MotionUI.animateIn ($ ("# boom") , $ animering););); I kodfältet ovan öppnade vi data animering attribut genom att använda jQuery's inbyggda data() metod, då kallade animateIn () metod för MotionUI objekt.
Här är den fullständiga koden och resultatet. Jag använde Foundation Framework s inbyggda knapp klasser för Klicka här knappen, och lagt till några grundläggande CSS också.
Eftersom Motion UI är ganska flexibel kan du också lägga till och utlösa övergångar och animeringar på många andra sätt.
Till exempel i exemplet ovan behöver vi inte nödvändigtvis använda data animering anpassat attribut, men kan helt enkelt lägga till beteendesklassen med addClass () jQuery metod till
$ (# Boom) addClass (skala in-up ").
Anpassning med Sass
Motion UIs prefabricerade CSS-klasser använder standardvärden som enkelt kan anpassas med hjälp av Sass. Det finns en Sass mixin bakom varje övergång och animering, vilket gör det möjligt att ändra effekterna av effekten. På så sätt kan du enkelt skapa en helt anpassad animering eller övergång.
Anpassning fungerar inte med startpaketet, men du måste installera Sass-versionen om du vill konfigurera effekterna enligt dina egna behov.
För att anpassa en övergång eller en animering, behöver du först hitta den relaterade mixin. De _classes.scss filen innehåller namnen på de sammanställda CSS-klasserna med respektive mixins.
I vårt exempel använde vi .skala-i-up attribut, och genom att titta på _classes.scss, vi kan snabbt ta reda på att det använder sig av mui-zoom blanda i:
// Övergångar @mixin rörelse-ui-övergångar ... // Skala .scale-in-up @ include mui-zoom (in, 0.5, 1); ...
Motion UI använder mui- prefix till mixins, och varje mixin har sin egen fil. Motion UI har ganska självförklarande namnkonventioner, så vi kan snabbt hitta mui-zoom mixin i _zoom.scss fil:
@mixin mui-zoom ($ state: in, $ från: 1,5, $ till: 1, $ blekna: map-get ($ motion-ui-inställningar, skala och blekna), $ duration: null, $ timing: null, $ fördröjning: null) ...
Med samma teknik kan du enkelt styra alla funktioner i en animering eller övergång genom att ändra värdena för respektive Sass-variabler.
Konfigurera modifierarklasser
Modifierarklasser som styr beteendet (hastighet, timing och fördröjning) av animeringar och övergångar kan också konfigureras med Sass genom att ändra värdena för respektive variabler i _settings.scss fil.
När du har gjort dina ändringar, kommer Motion UI använd de nya värdena som standard i varje animering och övergång, så du behöver inte konfigurera de relaterade mixinsna en efter en.
