Inhalt
- Aus Skizze importieren
- Erstellen Sie Masken- und Avatar-Ebenen
- Zustände definieren
- Zwischen Staaten animieren
- Probieren Sie es auf einem echten mobilen Gerät aus
Die Gründe für das Design-Prototyping sind nicht neu - es ist die gleiche wie die ganze Begeisterung für das Entwerfen im Browser. Wenn Sie ein Design in seinem realen Kontext sehen, ist es völlig anders. Sie treffen bessere Entscheidungen, wenn Sie keine Annahmen darüber treffen müssen, wie eine Schnittstelle funktioniert und sich anfühlt. Dies mag nach zusätzlicher Arbeit klingen, aber die Erkenntnisse, die Sie gewinnen können, wenn Sie sehen, wie Ihr Design funktioniert, sind von unschätzbarem Wert.
Framer ist ein neues Code-basiertes Prototyping-Tool. Sie können in Sketch (oder Photoshop) wie gewohnt Modelle erstellen und in Framer importieren. Dann schreiben Sie ein wenig CoffeeScript und Sie können viel erreichen.
Ich werde Ihnen die Grundlagen des Prototyping in Framer am Beispiel eines iOS-App-Prototyps mit zwei Ansichten beibringen: einer Profilansicht und einer vergrößerten Ansicht des Avatar-Bilds des Benutzers. Wir werden einen Prototyp erstellen, wie die erweiterte Fotoansicht geöffnet und geschlossen wird, und wir werden sie auch animieren. Sehen Sie sich hier die Online-Demo an (um den Quellcode anzuzeigen, klicken Sie einfach auf das Symbol in der oberen linken Ecke). Sie benötigen außerdem die kostenlose Testversion von Framer, die Sie unter framerjs.com erhalten.
Aus Skizze importieren
Der erste Schritt besteht darin, Ebenen aus Sketch in Framer zu importieren. Klicken Sie einfach in Framer auf die Schaltfläche Importieren, während das Design in Sketch geöffnet ist, und wählen Sie im folgenden Dialogfeld die richtige Datei aus. Framer importiert automatisch Bilder aus jeder Ebene und macht sie über folgenden Code zugänglich:
Skizze = Framer.Importer.load "importiert / Profil"
Verwenden Sie diese Variable, um auf die importierten Ebenen zuzugreifen. Um beispielsweise auf den Layer mit dem Namen "Inhalt" in der Skizzendatei zu verweisen, geben Sie in Framer skizzen.inhalt ein.
Erstellen Sie Masken- und Avatar-Ebenen
Die Kernfunktion dieses Prototyps besteht darin, das Avatar-Bild zu erweitern, wenn es getippt wird, und es dann zu schließen, wenn es erneut getippt wird. Zunächst erstellen wir zwei Maskenebenen - eine verschachtelte Maske oder eine Maske in einer anderen Maske. Wir animieren beide Masken gleichzeitig, um einen schönen, subtilen Öffnungs- und Schließeffekt zu erzielen. Die Ebene "headerMask" schneidet das Avatar-Foto beim Erweitern auf ein Rechteck und die Maskenebene schneidet es in der Profilansicht auf einen kleinen Kreis.
Erstellen Sie die headerMask-Ebene folgendermaßen:
headerMask = new Ebenenbreite: Screen.width, Höhe: 800 backgroundColor: "transparent"
Die erste Codezeile erstellt und benennt die neue Ebene. Anschließend legen wir mithilfe der Einrückungssyntax von CoffeeScript die Eigenschaften für Breite, Höhe und Hintergrund fest. Wir verwenden einen transparenten Hintergrund, damit die darunter liegenden Ebenen angezeigt werden, wenn das Avatar-Foto erweitert wird.
Erstellen Sie als Nächstes die Maskenebene:
mask = new Ebenenbreite: 1000, Höhe: 1000 HintergrundFarbe: "transparent", borderRadius: 500 y: scale.header.height - 100 superLayer: headerMaskenskala: 0,2, originY: 0
Wir erstellen eine neue Ebene und legen die Eigenschaften auf die gleiche Weise fest. Der große borderRadius macht diese Ebene zu einem Kreis. Wir positionieren die Maskenebene so, dass sie die aus der Skizze importierte Kopfebene überlappt. Wir werden auch auf 20 Prozent oder 0,2 reduzieren. Ein Ursprung von Null setzt den Ankerpunkt oder die Registrierung des Bildes auf die Oberkante.
Die verbleibende Eigenschaft, superLayer, legt die HeaderMask-Ebene fest, die wir als übergeordnete Ebene dieser neuen Ebene erstellt haben. So funktioniert das Maskieren in Framer. Legen Sie einfach die superLayer-Eigenschaft fest, und die übergeordnete Ebene maskiert das untergeordnete Element.
Als nächstes müssen wir die Avatar-Grafik erstellen und in diese neuen Masken einfügen. Um die Beschneidungsgrenzen zu zoomen und zu animieren, erstellen wir die Avatar-Ebene manuell. Kopieren Sie ein Foto in den Unterordner "Bilder" des Projektordners. Erstellen Sie dann eine Ebene mit diesem Bild:
avatar = neues Ebenenbild: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Beachten Sie, dass wir die SuperLayer des Avatars als Maskenebene festlegen. Beide sind jetzt in headerMask verschachtelt. Wir stellen auch die Breite und Höhe so ein, dass das Bild den maskierten Bereich vollständig ausfüllt.
Zuletzt erstellen wir eine Variable zum Speichern der Y-Position der Maske, die wir für die Animation verwenden. Wir werden es horizontal zentrieren, da es größer als der Bildschirm ist.
maskY = mask.y mask.centerX ()
Zustände definieren
Der erste Schritt beim Erstellen einer Animation besteht darin, den Anfangs- und Endzustand zu definieren. In Framer sind Zustände wie in Code geschriebene Keyframes. Ein Zustand ist nur eine Sammlung von Eigenschaften. Jede Ebene hat einen Standardstatus. Bei diesem Prototyp dient diese Standardeinstellung als Ausgangspunkt für die Animation, sodass für jede Ebene nur ein zweiter Status festgelegt werden muss.
Die Syntax für Zustände ist sehr einfach. Verweisen Sie auf die Ebene, verwenden Sie die Methode layer.states.add () und listen Sie dann die Eigenschaften auf, die eingeschlossen werden sollen.
scale.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
Der zweite Status für die Inhaltsebene, der aus Sketch importiert wurde und alle anderen Elemente des Profilbildschirms enthält, sollte vollständig transparent sein. Auf diese Weise haben wir beim Erweitern des Avatars einen schwarzen Hintergrund und die verbleibenden importierten Symbole und Elemente werden durchscheinen.
In der zweiten Codezeile wird ein Status für headerMask erstellt, der einfach auf eine Y-Position von 120 verschoben wird. Dadurch werden der Titel und die Schaltfläche zum Schließen oben auf dem Bildschirm angezeigt, wenn das Avatar-Foto vergrößert wird. Außerdem werden die Beschneidungsgrenzen des Avatar-Fotos animiert.
Ein neuer Status für die Maskenebene vergrößert und verschiebt sie mithilfe der zuvor erstellten maskY-Variablen. Da der UrsprungY (oder Ankerpunkt) der Maskenebene ihre Oberkante ist, müssen wir ihn um 420 Pixel nach oben verschieben, damit die Bildmitte sichtbar ist.
Zwischen Staaten animieren
Um zwischen den Standardzuständen und den neuen Zuständen, die wir gerade erstellt haben, zu animieren, benötigen wir nur noch vier weitere Codezeilen. Wir werden einen Klick-Handler auf der Avatar-Ebene festlegen. Wenn ein Benutzer auf dem Profilbildschirm darauf tippt, wechseln wir durch Zyklusstatus zur erweiterten Ansicht. Wenn es erneut getippt wird, kehren wir zu den Standardzuständen zurück, sodass es zu einem kleinen Kreis zurückkehrt. Dieselben Codezeilen behandeln beide Interaktionen:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () scale.content.states.next ()
In der ersten Zeile dieses Blocks wird der Klick-Handler auf der Avatar-Ebene eingerichtet. Jedes Mal, wenn darauf getippt wird, unabhängig davon, wie es zugeschnitten ist oder welche Größe es hat, werden die folgenden Anweisungen ausgeführt.
Dann verweisen wir einfach auf jede Ebene und verwenden die Methode layer.states.next (), um den Status umzuschalten. Wenn Sie layer.states.next () verwenden, verwendet Framer seine internen Standardanimationseinstellungen. Dies ist äußerst praktisch, aber Sie können noch bessere Animationen erstellen, indem Sie die Animationskurven verfeinern.
Wenn Sie Zustände wie hier verwenden, können Sie jede Animationskurve mithilfe der Eigenschaft layer.states.animationOptions einfach separat ändern. Mit nur drei geringfügigen Anpassungen fühlt sich die Animation völlig anders an:
scale.content.states.animationOptions = Kurve: "Leichtigkeit", Zeit: 0,3 headerMask.states.animationOptions = Kurve: "Feder (150, 20, 0)" mask.states.animationOptions = Kurve: "Feder (300, 30, 0) "
Für die ein- und ausgeblendete Inhaltsebene wählen wir eine einfache Kurvenvoreinstellung, vereinfachen sie und setzen die Animationsdauer auf 0,3, damit sie sehr schnell ist.
Verwenden Sie für die Ebenen headerMask und mask eine Federkurve. Für unsere Zwecke müssen Sie nur wissen, dass die Federkurvenwerte die Geschwindigkeit und den Sprung der Animation ändern. Durch die Werte für die Maskenebene wird die Animation viel schneller als für HeaderMask und Inhalt. Weitere Informationen zu den Federkurveneinstellungen finden Sie in der Framer-Dokumentation unter framerjs.com/docs.
Probieren Sie es auf einem echten mobilen Gerät aus
Das Design auf einem realen Gerät zu sehen ist so viel effektiver als die Verwendung von Emulatoren, und Sie werden die Vorteile Ihrer Arbeit sehen. Framer enthält eine Spiegelfunktion, bei der es sich um einen integrierten Server handelt, der über Ihr lokales Netzwerk eine URL zu Ihrem Prototyp bietet. Besuchen Sie einfach die URL mit Ihrem Gerät.
Sie haben alles gelernt, was Sie wissen müssen, um Ihre eigenen Designs in Framer zu prototypisieren. Worauf wartest du?
Wörter: Jarrod Drysdale
Jarrod Drysdale ist Autor, Designberater und Hersteller digitaler Produkte. Dieser Artikel wurde ursprünglich in Ausgabe 270 des Netzmagazins veröffentlicht.
Mochte dies? Lese das!
- Erstellen Sie anklickbare Live-Prototypen in Sketch
- So starten Sie ein Blog
- Die besten Bildbearbeiter
