Sådan oprettes animationer og overgange med Motion UI
Animationer og overgange tillader designere at visualisere forandring og differentiere indhold. Animationer og overgange er bevægende effekter hjælpe brugere med at genkende, når der sker noget På webstedet klikker de for eksempel på en knap, og der vises et nyt stykke information på skærmen. Tilføjelse af bevægelse til apps og websites forbedrer brugeroplevelsen, som det tillader brugere at give mening på en mere intuitiv måde.
Vi kan skabe animationer og overgange enten fra bunden eller ved hjælp af biblioteker eller rammer. Gode nyheder for os, frontend folk er, at Zurb, skaberen af Stiftelsen, i oktober sidste år åbent Motion UI, dets animation og overgangsbibliotek baseret på Sass.
Det blev oprindeligt bundtet med Foundation for Apps, og nu for den frittstående udgivelse fik den et nyt, herunder en animation køsystem og fleksible CSS mønstre. Motion-brugergrænsefladen styrer også nogle af elementerne i Foundation-rammen, som Orbit-skyderen, Toggler-switcheren og Reveal Modal, så det er et ret robust værktøj.
Kom i gang
Selvom Motion UI er et Sass-bibliotek, behøver du ikke nødvendigvis at bruge det med Sass, da Zurb giver udviklere et praktisk startpakke, der kun indeholder den sammensatte CSS. Du kan downloade det fra Motion UIs hjemmeside og hurtigt begynde at prototype ved hjælp af de foruddefinerede CSS animation og overgangsklasser.
Startpakken indeholder ikke kun Motion UI, men også Foundation Framework, hvilket betyder at du kan bruge Foundation grid og alle de øvrige funktioner i Foundation for Sites, hvis du vil.
Startpakken leveres også med en index.html fil, der giver dig mulighed for hurtigt at teste rammen.
Hvis du har brug for mere sofistikerede justeringer og ønsker at udnytte Motion UI's kraftfulde Sass mixins, kan du installere den fulde version, der indeholder kilden .SCSS filer med npm eller Bower.
Motion UI's dokumentation er i øjeblikket halvbagt stadig. Du kan finde det her på Github, eller bidrage til det, hvis du vil.
Hurtig prototyping
For at starte prototyper kan du redigere index.html fil af startpakken, eller opret din egen HTML-fil. Du kan opbygge layoutet ved hjælp af Foundation grid, men Motion UI kan også bruges som et selvstændigt bibliotek uden Foundation Framework.
Der er 3 hovedtyper af foruddefinerede CSS-klasser i Motion UI:
- Overgangsklasser - gør det muligt at tilføje overgange, såsom glidning, falmning og hængselvirkninger til et HTML-element.
- Animationsklasser - giver dig mulighed for at bruge forskellige rystelser, wiggling og spinning effekter
- Modifierings klasser - arbejde sammen med både overgangs- og animationsklasser, og de lader dig justere hastigheden, timingen og forsinkelsen af en bevægelse.
Opbygning af HTML
Det gode ved foruddefinerede CSS-klasser er, at de ikke kun kan bruges som klasser, men også som andre HTML-attributter. For eksempel kan du tilføj dem til værdi attributten til tag, eller du kan brug dem i din egen skik data-* attribut såvel.
I kodestykket nedenfor valgte jeg sidstnævnte mulighed for at adskilte adfærd og modifikator klasser. Jeg brugte langsom og lethed ændre attributter som klasser, og oprettet en brugerdefineret data-animation attribut for skala-in-up overgang. Det Klik på mig knappen er beregnet til at udløse effekten.
Afspilning af animationer og overgange med jQuery
Motion UI indeholder også et lille JavaScript-bibliotek, der kan afspille overgange og animationer, når en bestemt begivenhed finder sted.
Biblioteket selv findes i startpakken i motion-ui-starter> js> leverandør> motion-ui.js sti.
Det skaber en MotionUI objekt, der har to metoder: animateIn () og animateOut (). Overgangen eller animationen bundet til det bestemte HTML element (
$ (funktion () $ (".knap"). klik (funktion () var $ animation = $ ("# boom"). data ("animation"); MotionUI.animateIn ($ ("# boom") , $ animation););); I kodestykket ovenfor har vi fået adgang til data-animation attribut ved at bruge jQuery's indbygget data() metode, så kaldte animateIn () metode af MotionUI objekt.
Her er den fulde kode og resultatet. Jeg brugte Foundation Framework's indbyggede knap klasser til Klik på mig knappen, og tilføjede nogle grundlæggende CSS også.
Da Motion UI er ret fleksibel, kan du også tilføje og udløse overgange og animationer på mange andre måder.
For eksempel i eksemplet ovenfor behøver vi ikke nødvendigvis at bruge data-animation brugerdefineret attribut, men kan blot tilføje adfærdsklassen med addClass () jQuery metode til
$ ( '# Boom') addClass ( 'skala-in-up.');
Tilpasning med Sass
Motion UIs præfabrikerede CSS klasser bruger standardværdier, der nemt kan tilpasses ved hjælp af Sass. Der er en Sass mixin bag hver overgang og animation, der gør det muligt at ændre indstillingerne af effekten. På den måde kan du nemt oprette en helt tilpasset animation eller overgang.
Tilpasning fungerer ikke med startpakken, men du skal installere Sass-versionen, hvis du vil konfigurere effekterne efter dine egne behov.
For at tilpasse en overgang eller animation skal du først bruge find den relaterede mixin. Det _classes.scss filen indeholder navnene på de sammensatte CSS klasser med de respektive mixins.
I vores eksempel brugte vi .skala-in-up attributter og ved at kigge på _classes.scss, vi kan hurtigt finde ud af at det gør brug af mui-zoom MixIn:
// Overgange @mixin bevægelse-ui-overgange ... // Skala.scale-in-up @include mui-zoom (in, 0.5, 1); ...
Motion UI bruger mui- prefix til mixins, og hver mixin har sin egen fil. Motion UI har temmelig selvforklarende navngivningskonventioner, så vi kan hurtigt finde mui-zoom mixin i _zoom.scss fil:
@mixin mui-zoom ($ state: i, $ fra: 1,5, $ til: 1, $ fade: map-get ($ motion-ui-indstillinger, scale-and-fade), $ varighed: null, $ timing: null, $ forsinkelse: null) ...
Ved hjælp af samme teknik kan du nemt styre alle funktioner i en animation eller overgang ved at ændre værdierne for de respektive Sass-variabler.
Konfiguration af modifikator klasser
Modifikatorklasser, der styrer adfærden (hastighed, timing og forsinkelse) af animationer og overgange, kan også konfigureres med Sass ved at ændre værdierne for de respektive variabler i _settings.scss fil.
Når du har foretaget dine ændringer, vil Motion UI Brug de nye værdier som standard i enhver animation og overgang, så du behøver ikke at konfigurere de relaterede mixins en efter en.
