Animaties en overgangen maken met Motion UI
Met animaties en overgangen kunnen ontwerpers veranderingen visualiseren en inhoud differentiëren. Animaties en overgangen zijn bewegende effecten die help gebruikers te herkennen wanneer iets verandert op de site, ze klikken bijvoorbeeld op een knop en een nieuw stuk informatie verschijnt op het scherm. Beweging toevoegen aan apps en websites verbetert de gebruikerservaring, omdat gebruikers hiermee kunnen werken inhoud op een meer intuïtieve manier begrijpen.
We kunnen animaties en overgangen creëren, helemaal vanaf het begin of door gebruik te maken van bibliotheken of frameworks. Goed nieuws voor ons, frontend mensen, is dat Zurb, de maker van Foundation, afgelopen oktober open source Motion UI, de animatie en transitie bibliotheek gebaseerd op Sass.
Het was oorspronkelijk gebundeld met Foundation for Apps en nu kreeg het voor de zelfstandige release een vernieuwing, inclusief een animatie wachtrijsysteem en flexibele CSS-patronen. Motion UI voorziet ook enkele componenten van het Foundation-framework, zoals de Orbit-schuifregelaar, de Toggler-switcher en de Reveal-modal, waardoor het een vrij robuust hulpmiddel is.
Ermee beginnen
Hoewel Motion UI een Sass-bibliotheek is, hoeft u dit niet noodzakelijk met Sass te gebruiken, omdat Zurb ontwikkelaars een handige starterkit biedt die alleen de gecompileerde CSS bevat. Je kunt het downloaden vanaf de startpagina van Motion UI en snel beginnen met prototypen door de vooraf gedefinieerde CSS-animatie- en -overgangsklassen te gebruiken.
Het startpakket bevat niet alleen de Motion UI, maar ook het kader van de Foundation, wat betekent dat u het Foundation-raster en alle andere functionaliteiten van Foundation for Sites kunt gebruiken als u dat wilt.
De starterkit wordt ook geleverd met een index.html bestand waarmee u het kader snel kunt testen.
Als u meer geavanceerde aanpassingen nodig hebt en gebruik wilt maken van de krachtige Sass-mixins van Motion UI, kunt u de volledige versie installeren die de bron bevat .SCSS bestanden met npm of Bower.
De documentatie van Motion UI is momenteel nog half afgebakken. Je kunt het hier vinden op Github, of er zelf aan bijdragen als je wilt.
Snelle prototyping
Om prototypen te starten, kunt u de index.html bestand van de starterkit, of maak uw eigen HTML-bestand. U kunt de lay-out bouwen met behulp van het Foundation-raster, maar Motion UI kan ook worden gebruikt als een op zichzelf staande bibliotheek zonder het Foundation-framework.
Er zijn 3 hoofdtypen vooraf gedefinieerde CSS-klassen in Motion UI:
- Overgangsklassen - maken het mogelijk om overgangen, zoals verschuivende, vervagende en scharnierende effecten aan een HTML-element toe te voegen.
- Animatieklassen: hiermee kunt u verschillende schud-, wiebelende en draaiende effecten gebruiken
- Modificatieklassen - werk samen met zowel overgangs- als animatieklassen, en ze laten je de snelheid, de timing en de vertraging van een beweging aanpassen.
De HTML bouwen
Het mooie van vooraf gedefinieerde CSS-klassen is dat ze niet alleen kunnen worden gebruikt als klassen, maar ook als andere HTML-kenmerken. U kunt bijvoorbeeld voeg ze toe aan de waarde attribuut van de label, of je kan gebruik ze in uw eigen gebruik gegevens-* attribuut ook.
In het onderstaande codefragment heb ik voor deze laatste optie gekozen afzonderlijke gedrags- en modificatieklassen. Ik gebruikte de langzaam en gemak modifier attributen als klassen, en een aangepaste gemaakt data-animatie attribuut voor de scale-in-up overgang. De Klik hier knop is bedoeld om het effect te activeren.
Animaties en overgangen afspelen met jQuery
Motion UI bevat ook een kleine JavaScript-bibliotheek die overgangen en animaties kan afspelen wanneer een bepaalde gebeurtenis plaatsvindt.
De bibliotheek zelf is te vinden in de starterkit in de motion-ui-starter> js> leverancier> motion-ui.js pad.
Het creëert een MotionUI object met twee methoden: animateIn () en animateOut (). De overgang of animatie die is gekoppeld aan het specifieke HTML-element (de
$ (functie () $ (". knop"). klik (functie () var $ animation = $ ("# boom"). data ("animatie"); MotionUI.animateIn ($ ("# boom") , $ animatie););); In het bovenstaande codefragment hebben we toegang gekregen tot de data-animatie kenmerk door de ingebouwde jQuery te gebruiken gegevens() methode, vervolgens de animateIn () methode van de MotionUI voorwerp.
Hier is de volledige code en het resultaat. Ik heb de ingebouwde knopklassen van Foundation Frameworks gebruikt voor de Klik hier knop en ook wat standaard CSS toegevoegd.
Omdat Motion UI vrij flexibel is, kunt u op veel andere manieren ook overgangen en animaties toevoegen en activeren.
In het bovenstaande voorbeeld hoeven we bijvoorbeeld niet per se het te gebruiken data-animatie aangepast kenmerk, maar kan gewoon de gedragsklasse toevoegen met de addClass () jQuery-methode voor de
$ ( '# Boom') addClass ( 'scale-in-up.');
Maatwerk met Sass
Motion UI's vooraf gemaakte CSS-klassen gebruiken standaardwaarden die eenvoudig kunnen worden aangepast met behulp van Sass. Er zit een Sass-mix achter elke overgang en animatie, die het mogelijk maakt om de instellingen van het effect te veranderen. Op deze manier kunt u eenvoudig een volledig aangepaste animatie of overgang maken.
Aanpassing werkt echter niet met de starterkit, u moet de Sass-versie installeren als u de effecten wilt configureren volgens uw eigen behoeften.
Als u een overgang of animatie wilt aanpassen, moet u dit eerst doen vind de gerelateerde mixin. De _classes.scss bestand bevat de namen van de gecompileerde CSS-klassen met de respectieve mixins.
In ons voorbeeld gebruikten we de .scale-in-up attribuut en door er naar te kijken _classes.scss, we kunnen snel ontdekken dat het gebruik maakt van de mui-zoom mixin:
// Overgangen @mixin-beweging-ui-overgangen ... // Scale .scale-in-up @omvat mui-zoom (in, 0,5, 1); ...
Motion UI gebruikt de mui- prefix voor mixins, en elke mixin heeft zijn eigen bestand. Motion UI heeft vrij vanzelfsprekende benamingsconventies, zodat we snel de. Kunnen vinden mui-zoom mixin in de _zoom.scss het dossier:
@mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-instellingen, scale-and-fade), $ duration: null, $ timing: null, $ delay: null) ...
Met behulp van dezelfde techniek kunt u eenvoudig elke functie van een animatie of overgang regelen door de waarden van de respectieve Sass-variabelen te wijzigen.
Modificatieklassen configureren
Modificatieklassen die het gedrag (snelheid, timing en vertraging) van animaties en overgangen regelen, kunnen ook worden geconfigureerd met Sass door de waarden van de respectieve variabelen in de _settings.scss het dossier.
Nadat u uw wijzigingen hebt aangebracht, zal Motion UI dit doen gebruik de nieuwe waarden als standaard in elke animatie en overgang, dus u hoeft de gerelateerde mixins niet één voor één te configureren.
