Share
In meinem vorherigen Tutorial zu Framer haben Sie gelernt, wie Sie Ebenen, Status und Ereignisse verwenden, um einfache Modelle für Ihre iOS- und Android-Apps zu erstellen. Framer hat aber noch viel mehr zu bieten. In diesem Lernprogramm werde ich mich auf einige erweiterte Funktionen des Frameworks konzentrieren, mit denen Sie komplexere Interaktionen und Effekte in Ihre Modelle einfügen können.
Da eine Ebene in eine andere Ebene eingebettet werden kann, können Sie mit Framer komplexe Ebenenhierarchien erstellen. Eine eingebettete Ebene wird als Sublayer bezeichnet, und die Ebene, in die sie eingebettet ist, wird als Superlayer bezeichnet. Das folgende Code-Snippet zeigt, wie Sie eine Ebene in eine andere Ebene mit einbetten SuperLayer Eigentum.
"Javascript var layer1 = neue Ebene (Breite: 200, Höhe: 200);
var layer2 = neue Ebene (width: 100, height: 100, superLayer: layer1 // macht diese Ebene zu einem untergeordneten Element von layer1); "
Sie können Layer-Hierarchien verwenden, um mehrere Bildschirme in Ihren Modellen zu simulieren. Lassen Sie mich Ihnen anhand eines Beispiels zeigen, wie das geht. Betrachten Sie ein Modell mit zwei Bildschirmen, einem Anmeldebildschirm und einem Begrüßungsbildschirm.
Der Anmeldebildschirm enthält Eingabefelder für den Benutzernamen und das Kennwort sowie eine Schaltfläche zum Senden. Der Begrüßungsbildschirm enthält ein Bild und einige Textzeilen.
Um ein solches Modell zu erstellen, können Sie die Anmelde- und Begrüßungsbildschirme als Superlayers und die darin enthaltenen Benutzeroberflächenelemente als Sublayer betrachten. Beginnen wir damit, zuerst die Superlayers zu erstellen.
"Javascript var loginScreen = neue Ebene (width: Screen.width, height: Screen.height,);
var welcomeScreen = neue Ebene (width: Screen.width, height: Screen.height,); "
Wie du siehst, Anmeldebildschirm und welcomeScreen sind leer Schicht Objekte für jetzt. Fügen wir einige untergeordnete Ebenen hinzu Anmeldebildschirm Schicht.
"javascript // Die CSS-Stile, die auf die Ebenen angewendet werden sollen var style = paddingTop:" 25px ", Farbe:" # 999 ", Hintergrund:" #FFF ";
// Erzeuge das Feld "Benutzername" var usernameField = new Layer (width: 500, height: 100, y: 100, html: "Username", Stil: Stil, superLayer: loginScreen // child von loginScreen); usernameField.centerX ();
// Erstelle das Passwortfeld var passwordField = new Layer (width: 500, height: 100, y: 220, html: "Password", Stil: Stil, superLayer: loginScreen // child von loginScreen); passwordField.centerX ();
// Erzeuge den Submit-Button var submitButton = new Layer (width: Screen.width, height: 100, y: Screen.height - 100, html: "LOGIN", Stil: paddingTop: "25px", Farbe: "# FFFFFF ", fontWeight:" fett ", backgroundColor:" # 2196F3 ", superLayer: loginScreen // Kind von LoginScreen);"
Auf dieselbe Weise fügen wir jetzt einige Unterebenen hinzu welcomeScreen Schicht.
"javascript // Eine Ebene erstellen, um ein Profil anzuzeigen pic var profilePic = neue Ebene (Breite: 400, Höhe: 400, borderRadius: 200, Bild: 'profile.jpg', y: 100, superLayer: welcomeScreen // unter welcomeScreen); profilePic.centerX ();
// Erstelle eine Ebene für den Begrüßungstext var text = new Ebene (width: 400, height: 100, y: 600, html: "Welcome Jenny", backgroundColor: "", Stil: color: "#FFFFFF") , superLayer: welcomeScreen // Kind von WelcomeScreen); text.centerX (); "
Wenn Sie jetzt versuchen, Ihren Prototyp in einem Browser anzuzeigen, wirkt er etwas unordentlich. Beide Überlagerungen (Anmeldebildschirm und welcomeScreen) sind gleichzeitig sichtbar.
Um eine Ebene auszublenden, legen Sie ihre Ebene fest sichtbar Eigentum an falsch. So behalten Sie die welcomeScreen Ebene ausgeblendet, wenn das Mockup beginnt:
Javascript welcomeScreen.visible = false;
Um die Ansicht vom Anmeldebildschirm zum Begrüßungsbildschirm zu ändern, können Sie einfach die Ansicht ausblenden Anmeldebildschirm Ebene und schalten Sie die Sichtbarkeit der ein welcomeScreen Schicht. Das folgende Code-Snippet zeigt Ihnen, wie Sie dies im klicken Handler von submitButton:
javascript submitButton.on ("click", function () loginScreen.visible = false; welcomeScreen.visible = true;);
Gehen Sie zurück zum Browser und aktualisieren Sie die Seite, damit Ihr Modell jetzt sinnvoller erscheint. Denken Sie daran, dass der Browser, den Sie zum Anzeigen des Modells verwenden, webKit-basiert sein muss, z. B. Chrome oder Safari.
Wenn Sie den Instant-Schalter nicht mögen, können Sie den Übergang mit dem animieren animieren Funktion, um beispielsweise die zu animieren Opazität der Schichten.
"Javascript submitButton.on (" click ", function ()
welcomeScreen.opacity = 0; welcomeScreen.visible = true; // welcomeScreen ist immer noch nicht sichtbar //, weil seine Deckkraft gleich null ist loginScreen.animate (properties: opacity: 0); welcomeScreen.animate (Eigenschaften: Deckkraft: 1, Zeit: 2 // Dauer der Animation beträgt 2 Sekunden); ); "
So sieht der Übergang jetzt aus:
Mit Framer können Sie verschiedene Bildeffekte wie Gaußsche Unschärfe, Farbtonrotation, Helligkeits- / Kontrastanpassung, Farbumkehrung, Sepia-Ton-Addition und mehr auf Ihr Bild anwenden Schicht Objekte.
Das folgende Codefragment zeigt, wie Sie das verwenden verwischen Effekt, um einen unscharfen Hintergrund zu erzeugen:
"javascript // Erstelle eine Hintergrundebene var bg = new BackgroundLayer (image:" bg.jpg ");
Bl.-Unschärfe = 5; // Setze die Gaußsche Unschärfe auf 5 Pixel "
So sieht das Ergebnis aus:
Die übrigen Effekte werden auf ähnliche Weise verwendet. Zum Beispiel, um den Kontrast des zu reduzieren bg Ebene müssen Sie die Kontrast Eigentum:
Javascript bg.contrast = 50;
Um eine Ebene scrollbar zu machen, müssen Sie sie in die Inhaltsebene von a einbetten ScrollComponent Objekt. Ein ... Erstellen ScrollComponent ähnelt dem Erstellen eines Schicht Objekt:
Javascript var scroll1 = new ScrollComponent (width: Screen.width, height: Screen.height,);
Der folgende Codeblock zeigt Ihnen, wie Sie a einbetten Schicht Objekt innerhalb der Inhalt von scroll1:
Javascript var layer3 = neue Ebene (width: 2000, height: 2000, image: "pattern.jpg", superLayer: scroll1.content // Einbetten von Inhalten in scroll1);
Hier ist was für ein ScrollComponent sieht aus wie in Aktion:
Beachten Sie, dass das Scrollen nur möglich ist, wenn die Abmessungen der Ebene größer als die Abmessungen der Ebene sind ScrollComponent es ist eingebettet in.
Anstelle eines kontinuierlichen Bildlaufs möchten Sie Ihre Daten manchmal als eine Reihe von Seiten darstellen. Beispielsweise möchten Sie möglicherweise eine Benutzeroberfläche erstellen, über die ein Benutzer eine Reihe von Bildern durchblättert. Dies kann mit einem PageComponent. Das PageComponent Klasse wird von abgeleitet ScrollComponent Klasse und hat einen identischen Konstruktor.
Hinzufügen eines Schicht zu einem PageComponent, Sie müssen das verwenden Seite hinzufügen Funktion. Der folgende Code zeigt Ihnen, wie Sie eine PageComponent und fügen Sie ein paar Bildebenen hinzu:
"javascript // Erstellen Sie eine PageComponent, die den Bildschirm ausfüllt. var pageComponent = new PageComponent (width: Screen.width, height: Screen.height);
// Erstelle drei Bildebenen var image1 = neue Ebene (width: Screen.width, height: Screen.height, image: "pink.jpg");
var image2 = neue Ebene (width: Screen.width, height: Screen.height, image: "grey.jpg");
var image3 = neue Ebene (width: Screen.width, height: Screen.height, image: “blue.jpg”);
// Hinzufügen aller Bildebenen zu pageComponent pageComponent.addPage (image1); pageComponent.addPage (image2); pageComponent.addPage (image3); "
Das Ergebnis sieht so aus:
Sie wissen bereits, dass Sie die verwenden können animieren Funktion zum Animieren der Eigenschaften von a Schicht Objekt. Jedoch anrufen animieren startet die Animation sofort. Wenn Sie steuern möchten, wann eine Animation startet oder stoppt, können Sie verwenden Animation stattdessen Objekte.
So erstellen Sie eine Animation Objekt:
"javascript var animation1 = neue Animation (Layer: Mylayer, // Name des Layers, der // animiert werden soll)
// Eigenschaften, die Eigenschaften ändern sollten: x: 400); "
Sie können dann das intuitiv benannte verwenden Start, halt, und umkehren Funktionen zum Verwalten der Animation. Um zum Beispiel die Animation zu starten, rufen Sie die Start Funktion:
Javascript animation1.start ();
Sie können auch Event-Handler hinzufügen Animation Objekte mit der auf Funktion. Mit dieser Funktion können Sie verkettete Animationen erstellen. Hier ist zum Beispiel ein Codeausschnitt, der umgekehrt wird Animation1 Wenn die Animation endet:
"Javascript animation1.on (Events.AnimationEnd, function ()
// Erstellen Sie eine umgekehrte Kopie von animation1 und spielen Sie sie ab. Animation1.reverse (). Start (); ); "
Die Animation würde so aussehen:
Alle Beispiele, die ich Ihnen bis jetzt gezeigt habe, rendern das mobile Gerät im Hochformat. Wenn Sie die Querformatausrichtung verwenden möchten, müssen Sie den Wert zuweisen 90 zum Orientierung Eigentum der DeviceComponent.
Javascript device.orientation = 90;
Im Browser sieht das Gerät jetzt so aus:
Um die Orientierungsänderung zu animieren, verwenden Sie die setOrientation Methode, vorbei wahr als zweiten Parameter.
Javascript device.setOrientation (90, true);
In diesem Lernprogramm haben Sie gelernt, wie Sie die weiterentwickelten Funktionen von Framer wie verschachtelte oder eingebettete Ebenen, Ebeneneffekte, Bildlaufcontainer und Animationsereignisse nutzen können. Mit etwas Kreativität und Aufwand können Sie jetzt mit dem Framer-Framework beeindruckende Prototypen erstellen. Hier sind einige schöne Modelle, die Sie inspirieren.
In der Framer-Dokumentation finden Sie weitere Informationen zu diesem leistungsstarken Prototyping-Framework.
Accentsconagua