So erstellen Sie ein interaktives Design mit einer verschachtelten Komponente in Sketch

Anima Animationen für Sketch - Tutorial & Freebie

Anima (was Timeline) ist ein Werkzeug für das Interaktionsdesign direkt in Sketch.
In diesem Beitrag werden die wichtigsten Komponenten von Anima Interaction Editor erläutert.

Update: Timeline ist jetzt Teil des Anima Toolkit - Ermöglicht Designern, reaktionsschnelle und interaktive High-Fidelity-Prototypen in Sketch zu erstellen

Im letzten Tutorial haben wir eine grundlegende Interaktion demonstriert (Link hier, wenn Sie ihn nicht gesehen haben). In diesem Tutorial erstellen wir eine Interaktion, die eine verschachtelte Komponente kombiniert.

Wenn Sie kein Anima-Plugin haben, laden Sie es hier herunter
Dann können Sie die Sketch-Datei hier herunterladen

In diesem Tutorial ist das Hamburger-Menü die verschachtelte Komponente, da es beim Klicken eine eigene Mini-Animation hat.

Mit verschachtelten Komponenten können Sie eine Interaktion in einer anderen ausführen. Dieses Verhalten ähnelt verschachtelten Symbolen in Skizze. Es wird empfohlen, dass eine verschachtelte Komponente auch ein Skizzensymbol ist.

Lass uns anfangen!

Erstellen Sie die verschachtelte Komponente

Es wird empfohlen, eine verschachtelte Komponente als Symbol zu verwenden.
Wählen Sie menu_group und machen Sie es zu einem Symbol. Wählen Sie nun Ihr neues Symbol aus und klicken Sie im Plug-in-Bereich für den Interaktions-Editor auf die Registerkarte "Prototyp"> "Interaktion"> "Erstellen".

Wählen Sie das Symbol aus und klicken Sie auf Registerkarte "Interaktion"> "Für Interaktionseditor erstellen"" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1569080755702.png" />

Jetzt fügen wir einige Status und Aktionen hinzu, um dieses Verhalten zu erstellen:

So sollte sich das verschachtelte Menü verhalten

Fügen Sie nun eine Klick-Aktion hinzu, die das Menü-Hamburger-Symbol in ein X-Zeichen umwandelt. Drehen Sie dazu die obere Linie um 45 ° und die untere um (-45 °) und richten Sie jede Linie zur Mitte aus.
Blenden Sie die Mittellinie aus, indem Sie die Deckkraft auf 0 setzen (oder klicken Sie auf das Ausblenden-Symbol in der Ebenenliste).

Unsere Endzustände

Fügen Sie zwischen den beiden Zuständen einen weiteren Zustand hinzu, in dem der schwarze Kreis schrumpft, damit er sich wie eine Kamera anfühlt. Wir werden einen Timer verwenden, um einen Übergang von diesem mittleren Zustand auszulösen.

Tipp: Klicken Sie mit der rechten Maustaste auf einen Status, um die Position zu duplizieren, zu löschen oder zu ändern

Erstellen der Hauptkomponente

Nachdem die verschachtelte Komponente fertig ist, können Sie die Hauptkomponente erstellen.

Fügen Sie anschließend die interaktive verschachtelte Komponente als Symbolinstanz in die Ebenen ein. Wählen Sie dann die Zeichenfläche aus und klicken Sie erneut auf die Registerkarte "Prototyp"> "Interaktion"> "Erstellen", um den Interaktions-Editor aufzurufen.

Jetzt verwenden wir eine Hover-Animation, wenn das Menü geöffnet ist. Die gelben Rechtecke werden nach rechts geschrumpft, wenn die Maus eingedrückt ist, und wieder geöffnet, wenn die Maus herausgedrückt ist.

Definieren Sie zuerst die Klickaktion, wenn das Menü geöffnet und geschlossen ist. Sie müssen das Menü nicht bearbeiten, da es bereits eine verschachtelte Komponente ist. Stellen Sie sicher, dass Sie Übergänge in beide Richtungen definieren.

Erste 2 Zustände definieren: Klicken Sie im Hamburger-Menü auf Aktion

Danach definieren Sie jeden Status des geöffneten Menüs: Maus in und aus jeder Kategorie.

Bewegen Sie die Maus von jedem Status aus und zurück, um den Menüstatus zu öffnenSo sollte es am Ende aussehen
In diesem Beispiel haben wir die Übergangsdauer und die Standardkurven nicht geändert, um die Darstellung zu vereinfachen. Aber das kannst du auf jeden Fall.

Starte es

Sobald Sie alles eingerichtet haben, können Sie eine Vorschau der Komponente anzeigen, indem Sie auf "Komponente ausführen" klicken. Während Sie eine Komponente ausführen, können Sie darauf klicken oder den Mauszeiger darüber bewegen, um zu sehen, wie sich die Komponente direkt in Sketch verhält.

Code exportieren

Nachdem der Entwurf fertig ist, klicken Sie auf Code exportieren.
Nach einigen Sekunden des Uploads wird ein Popup mit einem Link zum Teilen angezeigt.

Code exportieren Ergebnis: Interaktive Komponente + Codeoptionen

Dies ist der Link für unser Beispiel: http://bit.ly/menu_sample

Das ist alles für heute!

Erstellen Sie reaktionsschnelle und interaktive High-Fidelity-Prototypen

Ich hoffe, Sie genießen Anima, lassen es uns auf Facebook oder Twitter wissen oder zeigen Sie einfach, wenn Sie etwas Cooles gemacht haben.
Anima-Team