Share
Heutzutage benötigen Sie keine Bildbearbeitungssoftware wie Adobe Photoshop oder Gimp, um Benutzeroberflächenmodelle für Ihre mobilen Apps zu erstellen. Eine App, die der Material Design-Sprache von Google entspricht, besteht normalerweise nur aus einfachen geometrischen Formen, Volltonfarben, Symbolen und Text. Ein Benutzeroberflächenprototyp für eine solche App kann einfach mit Code erstellt werden.
In dieser zweiteiligen Serie lernen Sie die Grundlagen von Framer, einem Open-Source-Javascript-Framework, mit dem Sie programmatisch interaktive und realistische Prototypen mit wunderschönen Animationen für iOS- und Android-Apps erstellen können.
Um diesem Tutorial zu folgen, benötigen Sie:
Da ein Framer-Prototyp nur eine gewöhnliche Webseite ist, die in HTML, CSS und Javascript geschrieben ist, erstellen wir zunächst eine leere HTML-Seite. Ich werde diese Seite aufrufen index.html.
"html
"
Um die Framer-API auf dieser Seite zu verwenden, sollten Sie eine hinzufügen Skript tag, der auf das zeigt framer.js heruntergeladene Datei.
html
Da Framer protokollrelevante URLs zum Laden verschiedener Ressourcen verwendet, können Sie nicht einfach auf die erstellte Datei doppelklicken, um sie in einem Browser zu öffnen. Dies führt zu Netzwerkfehlern. Stattdessen sollten Sie über einen HTTP-Server darauf zugreifen.
Um schnell einen HTTP-Server zu erstellen, der Ihre Webseite bereitstellt, können Sie Python's verwenden SimpleHTTPServer Modul.
Öffnen Sie ein Terminal, navigieren Sie zu dem Verzeichnis, das die von Ihnen erstellte Webseite enthält, und führen Sie den folgenden Befehl aus.
bash python -m SimpleHTTPServer 8000
Dadurch wird ein Server gestartet, der auf Port läuft 8000 standardmäßig. Sie können jetzt Google Chrome öffnen und Ihre Webseite unter http: // localhost: 8000 / anzeigen..
Damit Ihr Prototyp auf einem Desktop-Browser realistisch erscheint, sollten Sie alle Elemente im Rahmen eines Mobilgeräts anzeigen. Mit Framer können Sie eine Vielzahl beliebter mobiler Geräte zeichnen, z. B. iPhones, Nexus-Telefone und -Tablets, iPads, Apple-Uhren und mehr. Für dieses Tutorial werde ich ein pinkfarbenes iPhone 5c verwenden.
Um ein Gerät zu zeichnen, müssen Sie zuerst eine Instanz von erstellen DeviceComponent Klasse und nennen es seine setupContext Methode. Sie können dann seine ändern Gerätetyp auf das Gerät Ihrer Wahl. Neue hinzufügen Skript Markieren Sie die HTML-Seite, die Sie zuvor erstellt haben, und fügen Sie den folgenden Code hinzu:
"javascript var device = new Framer.DeviceComponent ();
device.setupContext (); device.deviceType = "iphone-5c-pink"; "
Wenn Sie Ihre Webseite aktualisieren, sollten Sie Folgendes in Ihrem Browserfenster sehen:
Wenn Sie möchten, können Sie auch eine Hand rendern, indem Sie das Gerät halten -Hand am Ende von Gerätetyp Schnur Wenn das Gerät zu groß oder zu klein aussieht, können Sie das verwenden setDeviceScale Methode, um seine Größe zu ändern.
"Javascript // Anzeige einer Hand mit dem Gerät device.deviceType =" iphone-5c-pink-hand ";
// Größe ändern device.setDeviceScale (0.3); "
Damit ist die Ersteinrichtung abgeschlossen. Das Ergebnis sollte so aussehen:
Fast jedes Element in Ihrem Framer-Prototyp ist eine Instanz des Schicht Klasse. EIN Schicht ist einem HTML sehr ähnlich div Element und kann verwendet werden, um Rechtecke, Bilder und Text zu zeichnen.
So erstellen Sie eine Schicht Sie müssen seinen Konstruktor aufrufen und ihm ein JSON-Objekt übergeben, das verschiedene Eigenschaften von definiert Schicht. Beim Erstellen eines Schicht, Sie geben normalerweise seine Abmessungen an (Breite und Höhe) und Position (x und y). Sie können auch die centerX und centerY Methoden, um es horizontal und vertikal zu zentrieren. Hier ist ein Beispiel, wie man eine erstellt Schicht.
"Javascript // Zeichne ein weißes Quadrat
var whiteSquare = neue Ebene (backgroundColor: "#FFFFFF", Breite: 400, Höhe: 400, Y: 20);
// Horizontal zentrieren whiteSquare.centerX (); "
Um ein Bild anzuzeigen, müssen Sie ein erstellen Schicht wessen Bild Eigenschaft zeigt auf die Bilddatei, die Sie anzeigen möchten.
"Javascript // Zeichne ein Bild
var pic = neue Ebene (image: “painting.jpg”, Breite: 400, Höhe: 400, y: 440);
pic.centerX (); "
Um Text (oder HTML) anzuzeigen, können Sie das verwenden html Eigentum. Sie können auch ein CSS-Styling hinzufügen Schicht mit seiner Stil Eigentum.
"Javascript // Text schreiben
var text = new Layer (width: Screen.width, height: 100, y: 860, html: "Dies ist ein Prototyp"), Stil: fontSize: "50px", textAlign: "center", Farbe: "# f1f2f3 ”, PaddingTop:“ 18px ”);"
Mit den drei Schicht Objekte, die wir in diesem Schritt erstellt haben, würde der Prototyp folgendermaßen aussehen:
Sie können Ereignisbehandlungsroutinen an a anhängen Schicht Verwendung der auf Methode. Das auf Die Methode ähnelt der von Javascript addEventListener Methode. Es nimmt den Namen eines Ereignisses als ersten Parameter und eine Funktion als zweiten Parameter.
So fügen Sie eine hinzu klicken Handler an die Text Ebene, die wir im vorherigen Schritt erstellt haben:
Javascript text.on ("click", function () text.html = "Ich wurde angeklickt";);
In diesem Lernprogramm werden später weitere Ereignishandler angezeigt.
Framer hebt sich durch seine fortschrittlichen Animationseffekte von der Konkurrenz ab. Mit Framer können Sie nahezu jedes Ihrer Objekte animieren Schicht Objekte mit der animieren Methode. Das animieren Die Methode nimmt ein JSON-Objekt als Eingabe, das die Eigenschaften angibt, die animiert werden sollen.
Das JSON-Objekt kann auch verschiedene Konfigurationsdetails der Animation enthalten, z. B. deren Dauer und Verhalten.
Als Beispiel möchte ich Ihnen zeigen, wie Sie eine Animation erstellen, die sich dreht whiteSquare in einen Kreis durch Ändern seiner borderRadius.
"Javascript // animiere borderRadius
whiteSquare.animate (Eigenschaften: borderRadius: whiteSquare.width / 2,
Zeit: 2, // Dauer ist zwei Sekunden Kurve: "Easy-In-Out" // Anwenden einer Lockerung); "
Hier ist ein weiteres Beispiel, das zeigt, wie der Schatten von animiert wird whiteSquare wenn es angeklickt wird.
"Javascript // Animate Shadow
whiteSquare.on ("click", function ()
Accentsconagua
// Setze zuerst die Schattenfarbe whiteSquare.shadowColor = "# 555555"; whiteSquare.animate ("properties": shadowBlur: 40, shadowSpread: 10,); ); " Beachten Sie, dass nur die Eigenschaften animiert werden können, deren Werte Zahlen sind. Wie shadowColor Ist keine Nummer, sollte sie vor dem Anruf eingestellt werden animieren.
Wenn Sie Framer verwenden, versuchen Sie wahrscheinlich, einen sehr interaktiven Prototyp mit vielen Animationen zu erstellen. Anrufen der animieren Methode mehrmals auf einem Schicht kann langweilig werden. Stattdessen können Sie eine Liste von Zuständen mit einem verknüpfen Schicht und wechseln Sie bei Bedarf einfach zwischen den Status.
Jeden Schicht hat ein Zustände Eigenschaft, die eine Instanz von ist Schichtzustände Klasse. Hinzufügen neuer Zustände zu einem Schicht, Sie nennen das hinzufügen Methode auf der Zustände Eigentum. Im folgenden Code-Snippet fügen wir der Datei zwei neue Status hinzu pic Objekt.
"javascript // füge zwei Staaten hinzu
pic.states.add ("myState1": borderRadius: 100),
"myState2": borderRadius: 200); "
Das Hinzufügen eines Status führt nicht zu einer sofortigen visuellen Änderung. Wenn jedoch a Schicht Wenn Sie von einem Zustand in einen anderen wechseln, können Sie die Animation sehen. So ändern Sie den Status von a Schicht, Sie nennen das Schalter Methode auf der Zustände Eigentum der Schicht Objekt. Das folgende Codefragment zeigt, wie Sie den Status von ändern pic wenn es angeklickt wird.
"Javascript // Status beim Klicken ändern
pic.on ("click", function () // Zu myState2 wechseln pic.states.switch ("myState2");); "
Durch die Zustände von a Schicht, Sie können das anrufen Nächster Methode seiner Zustände Objekt.
Javascript pic.states.next ();
Um Ihrem Prototypen eine Hintergrundfarbe oder ein Bild hinzuzufügen, erstellen Sie ein Hintergrundschicht Objekt. EIN Hintergrundschicht ist ein Schicht deren Abmessungen den Abmessungen des Bildschirms des Geräts entsprechen. So fügen Sie ein Grau hinzu: Hintergrundschicht:
Javascript var bg = neuer BackgroundLayer (backgroundColor: "#BDBDBD");
Da der Framer-Prototyp nur eine gewöhnliche HTML-Seite ist, können Sie ihn auch mit CSS formatieren. Wenn Sie beispielsweise mit der weißen Farbe des Geräts nicht zufrieden sind, können Sie sie ändern, indem Sie einen neuen Stil auf die Webseiten anwenden Karosserie Etikett.
"html
"
Mit diesen Änderungen sieht der Prototyp nach Abschluss der Animationen so aus:
Ein ... machen Schicht Alles was Sie tun müssen, ist seine Einstellung draggable.enabled Eigentum an wahr.
"Javascript // Ziehen zulassen
pic.draggable.enabled = true; "
Wenn eine Schicht Sie können Ereignis-Listener hinzufügen, die auf verschiedene ziehende verwandte Ereignisse reagieren, z Dragend und Dragmove. Zum Beispiel hier ist ein Dragend Eventhandler, der zurückkehrt pic zu seiner ursprünglichen Position:
"Javascript // Handle Dragend
pic.on ("dragend", function () pic.animate ("Eigenschaften": x: Bildschirmbreite / 2 - Bildbreite / 2, // Stelle in der Mitte y: 440 // Original Y );); "
In diesem Lernprogramm haben Sie die Grundlagen zum Erstellen interaktiver Prototypen für mobile Apps mit Framer kennen gelernt. Da es sich bei Ihren Framer-Prototypen um statische Webseiten handelt, können Sie sie auf einen beliebigen HTTP-Server hochladen, um sie mit Ihren Freunden und Kunden zu teilen.
Ich möchte Ihnen auch sagen, dass Sie, wenn Sie mit Adobe Photoshop vertraut sind, die Benutzeroberflächenelemente Ihrer Prototypen nicht programmgesteuert erstellen müssen. Sie können das Layout in Photoshop entwerfen und die Ebenengruppen in Ihrer PSD in Framer konvertieren Schicht Objekte. Sie haben auch die Möglichkeit, Framer Studio zu erwerben und zu verwenden, eine IDE, die speziell für die Arbeit mit Framer-Projekten entwickelt wurde.
Weitere Informationen zum Framer-Framework finden Sie in der Framer-Dokumentation. Im zweiten Teil dieser Serie werde ich tiefer in die Navigation, den Bildlauf und die Animation eintauchen.
