Erstellen von Animationen und Übergängen mit der Motion-Benutzeroberfläche

Mit Animationen und Übergängen können Designer Änderungen visualisieren und Inhalte differenzieren. Animationen und Übergänge sind bewegende Effekte Benutzer können erkennen, wenn sich etwas ändert Auf der Site klicken sie beispielsweise auf eine Schaltfläche, und eine neue Information wird auf dem Bildschirm angezeigt. Durch das Hinzufügen von Bewegungen zu Apps und Websites wird die Benutzererfahrung verbessert, da dies den Benutzern ermöglicht wird den Inhalt intuitiver zu verstehen.

Wir können Animationen und Übergänge entweder von Grund auf oder mithilfe von Bibliotheken oder Frameworks erstellen. Für uns Frontend-Leute ist es eine gute Nachricht, dass Zurb, der Gründer von Foundation, im letzten Oktober die Motion-UI, eine auf Sass basierende Animations- und Übergangsbibliothek, die Open-Sourcing-Software enthielt.

Es wurde ursprünglich mit Foundation for Apps gebündelt und jetzt für die Standalone-Version mit einem Update versehen Warteschlangen-System für Animationen und flexible CSS-Muster. Die Motion-Benutzeroberfläche bietet auch einige Komponenten des Foundation-Frameworks, wie den Orbit-Schieberegler, den Toggler-Umschalter und den Reveal-Modal. Dies ist ein ziemlich robustes Werkzeug.

Fertig machen

Obwohl Motion UI eine Sass-Bibliothek ist, müssen Sie sie nicht unbedingt mit Sass verwenden, da Zurb Entwicklern ein praktisches Starter-Kit bietet, das nur das kompilierte CSS enthält. Sie können es von der Homepage der Motion-Benutzeroberfläche herunterladen und mit den vordefinierten CSS-Animations- und Übergangsklassen schnell einen Prototyp erstellen.

Das Starter-Kit enthält nicht nur die Motion-Benutzeroberfläche, sondern auch das Foundation-Framework. Sie können also das Foundation-Grid und alle anderen Funktionalitäten von Foundation for Sites verwenden, wenn Sie möchten.

Das Starter-Kit wird auch mit einem ausgeliefert index.html Datei, mit der Sie das Framework schnell testen können.

Wenn Sie komplexere Anpassungen benötigen und die leistungsstarken Sass-Mixins von Motion UI nutzen möchten, können Sie die Vollversion mit der Quelle installieren .scss Dateien mit npm oder Bower.

Die Dokumentation der Motion UI ist derzeit noch halb fertig. Sie können es hier auf Github finden oder dazu beitragen, wenn Sie möchten.

Schnelles Prototyping

Um mit dem Prototyping zu beginnen, können Sie das bearbeiten index.html Datei des Starter-Kits oder erstellen Sie Ihre eigene HTML-Datei. Sie können das Layout mithilfe des Foundation-Grids erstellen. Die Motion-Benutzeroberfläche kann jedoch auch als Standalone-Bibliothek ohne das Foundation-Framework verwendet werden.

Es gibt drei Haupttypen vordefinierter CSS-Klassen in Motion UI:

1. Übergangsklassen - Ermöglichen das Hinzufügen von Übergängen, wie z. B. Verschieben, Ausblenden und Schwenken, zu einem HTML-Element.
2. Animationskurse - Ermöglichen die Verwendung verschiedener Schüttel-, Wackel- und Spinneffekte
3. Modifikator-Klassen - arbeiten mit Übergangs- und Animationsklassen zusammen. Mit ihnen können Sie die Geschwindigkeit, das Timing und die Verzögerung einer Bewegung anpassen.

HTML erstellen

Das Tolle an vordefinierten CSS-Klassen ist, dass sie nicht nur als Klassen, sondern auch als andere HTML-Attribute verwendet werden können. Zum Beispiel können Sie füge sie dem hinzu Wert Attribut des Etikett, oder du kannst Verwenden Sie sie in Ihrem eigenen Brauch Daten-* Attribut auch.

Im folgenden Codeausschnitt wählte ich diese letztere Option zu getrennte Verhaltens- und Änderungsklassen. Ich habe die schleppend und Leichtigkeit Attributattribute als Klassen und erstellt einen benutzerdefinierten Datenanimation Attribut für die Scale-In-Up Übergang. Das Klick mich Taste soll den Effekt auslösen.

 
 Klick mich  

Animationen und Übergänge mit jQuery abspielen

Die Bewegungsoberfläche enthält eine kleine JavaScript-Bibliothek, die Übergänge und Animationen wiedergibt, wenn ein bestimmtes Ereignis auftritt.

Die Bibliothek selbst finden Sie im Starter-Kit im motion-ui-starter> js> hersteller> motion-ui.js Pfad.

Es schafft eine MotionUI Objekt, das zwei Methoden hat: animateIn () und animateOut (). Der Übergang oder die Animation, die an das jeweilige HTML-Element gebunden sind (das Tag in unserem Beispiel) kann mit jQuery auf folgende Weise ausgelöst werden:

 $ (function () $ (". button"). click (function () var $ animation = $ ("# boom"). data ("animation"); MotionUI.animateIn ($ ("# boom")) , $ animation);););

Im obigen Code-Snippet haben wir auf die Datenanimation Attribut mithilfe des integrierten jQuery Daten() Methode, dann genannt animateIn () Methode der MotionUI Objekt.

Hier ist der vollständige Code und das Ergebnis. Ich habe die eingebauten Button-Klassen von Foundation Frameworks für die Klick mich Schaltfläche und fügte einige grundlegende CSS hinzu.

Da die Motion-Benutzeroberfläche sehr flexibel ist, können Sie Übergänge und Animationen auch auf viele andere Arten hinzufügen und auslösen.

Im obigen Beispiel müssen wir beispielsweise nicht unbedingt die Datenanimation Benutzerdefiniertes Attribut, kann jedoch die Verhaltensklasse einfach mit hinzufügen addClass () jQuery-Methode für die Element auf folgende Weise:

 $ ('# boom'). addClass ('scale-in-up');

Anpassung mit Sass

Die vorgefertigten CSS-Klassen der Motion UI verwenden Standardwerte, die mithilfe von Sass leicht angepasst werden können. Hinter jedem Übergang und jeder Animation befindet sich ein Sass-Mix, mit dem Sie die Einstellungen des Effekts ändern können. Auf diese Weise können Sie ganz einfach eine vollständig benutzerdefinierte Animation oder einen Übergang erstellen.

Die Anpassung funktioniert jedoch nicht mit dem Starter-Kit. Sie müssen die Sass-Version installieren, wenn Sie die Effekte Ihren eigenen Bedürfnissen entsprechend konfigurieren möchten.

Um einen Übergang oder eine Animation anzupassen, müssen Sie dies zunächst tun finde das verwandte mixin. Das _classes.scss Datei enthält die Namen der kompilierten CSS-Klassen mit den jeweiligen Mixins.

In unserem Beispiel haben wir die verwendet .Scale-In-Up Attribut und durch einen Blick auf _classes.scss, wir können schnell feststellen, dass es die Mui-Zoom mixin:

 // Übergänge @mixin Bewegungs-Ui-Übergänge … // Scale .scale-in-up @include mui-zoom (in, 0.5, 1); …

Die Bewegungsoberfläche verwendet die mui- Präfix zu Mixins, und jedes Mixin hat eine eigene Datei. Motion UI hat ziemlich selbsterklärende Namenskonventionen, so dass wir das schnell finden können Mui-Zoom mixin in der _zoom.scss Datei:

 @mixin mui-zoom ($ state: in, $ von: 1.5, $ bis: 1, $ fade: map-get ($ motion-ui-einstellungen, scale-and-fade), $ duration: null, $ timing null, $ delay: null) …

Mit derselben Technik können Sie einfach alle Funktionen einer Animation oder eines Übergangs steuern, indem Sie die Werte der jeweiligen Sass-Variablen ändern.

Modifikator-Klassen konfigurieren

Modifier-Klassen, die das Verhalten (Geschwindigkeit, Timing und Verzögerung) von Animationen und Übergängen steuern, können ebenfalls mit Sass konfiguriert werden, indem die Werte der jeweiligen Variablen in geändert werden _settings.scss Datei.

Nachdem Sie Ihre Änderungen vorgenommen haben, wird die Motion-Benutzeroberfläche angezeigt Verwenden Sie die neuen Werte als Standard In jeder Animation und in jedem Übergang müssen Sie die zugehörigen Mixins nicht einzeln konfigurieren.