Share
Tegenwoordig hebt u geen beeldbewerkingssoftware zoals Adobe Photoshop of Gimp nodig om mock-ups voor gebruikersinterfaces te maken voor uw mobiele apps. Een app die voldoet aan de Material Design-taal van Google bestaat meestal alleen uit eenvoudige geometrische vormen, effen kleuren, pictogrammen en tekst. Een prototype van een gebruikersinterface voor een dergelijke app kan eenvoudig worden gemaakt met alleen code.
In deze tweedelige serie leer je de basis van Framer, een open source Javascript-raamwerk waarmee je programmatisch interactieve en realistische prototypen kunt maken met prachtige animaties voor iOS- en Android-apps.
Om deze tutorial te volgen, heb je nodig:
Omdat een Framer-prototype niets anders is dan een gewone webpagina geschreven in HTML, CSS en Javascript, laten we beginnen met het maken van een lege HTML-pagina. Ik ga deze pagina bellen index.html.
"html
"
Om gebruik te maken van de API van Framer op deze pagina, moet u een script tag die naar de verwijst framer.js bestand dat je hebt gedownload.
html
Omdat Framer gebruik maakt van protocol-relatieve URL's om verschillende bronnen te laden, kunt u niet eenvoudig dubbelklikken op het bestand dat u hebt gemaakt om het in een browser te openen. Dit zal leiden tot netwerkfouten. In plaats daarvan zou u toegang moeten hebben via een HTTP-server.
Als u snel een HTTP-server wilt maken die uw webpagina kan weergeven, kunt u Python's gebruiken SimpleHTTPServer module.
Open een terminal, ga naar de map met de webpagina die u hebt gemaakt en voer de volgende opdracht uit.
bash python -m SimpleHTTPServer 8000
Hiermee wordt een server gestart die op poort wordt uitgevoerd 8000 standaard. U kunt nu Google Chrome openen en uw webpagina bekijken door naar http: // localhost: 8000 / te gaan.
Als u uw prototype op een desktopbrowser realistisch wilt laten aanvoelen, moet u alle elementen binnen het frame van een mobiel apparaat weergeven. Met Framer kun je een verscheidenheid aan populaire mobiele apparaten maken, zoals iPhones, Nexus-telefoons en -tablets, iPads, Apple Watches en meer. Voor deze zelfstudie zal ik een roze iPhone 5c gebruiken.
Als u een apparaat wilt tekenen, moet u eerst een exemplaar van het apparaat maken DeviceComponent klasse en bel zijn setupContext methode. U kunt dan zijn veranderen soort apparaat naar het apparaat van uw keuze. Nog een toevoegen script tag naar de HTML-pagina die je eerder hebt gemaakt en voeg de volgende code eraan toe:
"javascript var device = nieuw Framer.DeviceComponent ();
device.setupContext (); device.deviceType = "iphone-5c-pink"; "
Wanneer u uw webpagina vernieuwt, ziet u het volgende in uw browservenster:
Als je wilt, kun je ook een hand maken die het apparaat vasthoudt door toe te voegen -hand- aan het einde van de soort apparaat draad. Als het apparaat er te groot of te klein uitziet, kunt u de setDeviceScale methode om de grootte te veranderen.
"javascript // Geef een hand weer met het apparaat device.deviceType =" iphone-5c-pink-hand ";
// Wijzig de grootte device.setDeviceScale (0.3); "
Hiermee is de eerste installatie voltooid. Het resultaat zou er als volgt uit moeten zien:
Bijna elk element in uw Framer-prototype is een instantie van de Laag klasse. EEN Laag lijkt erg op een HTML div element en kan worden gebruikt om rechthoeken, afbeeldingen en tekst te tekenen.
Om een te maken Laag je moet de constructor aanroepen en een JSON-object doorgeven dat verschillende eigenschappen van het object definieert Laag. Tijdens het maken van een Laag, u geeft meestal de afmetingen op (breedte en hoogte) en positie (X en Y). U kunt ook de centerX en Centery methoden om het horizontaal en verticaal te centreren. Hier is een voorbeeld van hoe je een kunt maken Laag.
"javascript // Teken een wit vierkant
var whiteSquare = nieuwe laag (backgroundColor: "#FFFFFF", width: 400, height: 400, y: 20);
// Centreer horizontaal witSquare.centerX (); "
Om een afbeelding weer te geven, moet u een Laag wiens beeld eigenschap verwijst naar het afbeeldingsbestand dat u wilt weergeven.
"javascript // Teken een afbeelding
var pic = new Layer (image: "painting.jpg", width: 400, height: 400, y: 440);
pic.centerX ();"
Om tekst (of HTML) weer te geven, kunt u de html eigendom. U kunt ook CSS-styling toevoegen aan een Laag het gebruiken van zijn stijl eigendom.
"javascript // Tekst schrijven
var text = new Layer (width: Screen.width, height: 100, y: 860, html: "This is a prototype", style: fontSize: "50px", textAlign: "center", color: "# f1f2f3 ", PaddingTop:" 18px ");"
Met de drie Laag objecten die we in deze stap hebben gemaakt, zou het prototype er als volgt uitzien:
U kunt gebeurtenishandlers koppelen aan een Laag de ... gebruiken op methode. De op methode lijkt veel op Javascript's addEventListener methode. Het neemt de naam aan van een gebeurtenis als zijn eerste parameter en een functie als zijn tweede parameter.
Zo voeg je een toe Klik handler voor de tekst laag die we in de vorige stap hebben gemaakt:
javascript text.on ("klik", functie () text.html = "Er werd op geklikt";);
Je zult meer eventhandlers later in deze tutorial zien.
Framer onderscheidt zich van zijn concurrentie dankzij de geavanceerde animatie-effecten. Met Framer kun je bijna elke eigenschap van je animeren Laag objecten met behulp van de bezielen methode. De bezielen methode neemt als invoer een JSON-object op dat de eigenschappen aangeeft die moeten worden geanimeerd.
Het JSON-object kan ook verschillende configuratiegegevens van de animatie bevatten, zoals de duur en het gedrag.
Laat me je bijvoorbeeld laten zien hoe je een animatie maakt die verandert whiteSquare in een cirkel door het te veranderen borderRadius.
"javascript // Animeer grensRadius
whiteSquare.animate (properties: borderRadius: whiteSquare.width / 2,
tijd: 2, // duur is twee seconden curve: "gemak in gebruik" // versoepeling toepassen); "
Hier is nog een voorbeeld dat laat zien hoe je de schaduw van kunt animeren whiteSquare wanneer erop wordt geklikt.
"javascript // Animate Shadow
whiteSquare.on ("klik", functie ()
Accentsconagua
// Stel de schaduwkleur eerst in whiteSquare.shadowColor = "# 555555"; whiteSquare.animate ("properties": shadowBlur: 40, shadowSpread: 10,); );" Merk op dat alleen die eigenschappen waarvan de waarden getallen zijn, geanimeerd kunnen zijn. Zoals schaduwkleur is geen nummer, het moet worden ingesteld voordat u belt bezielen.
Als u Framer gebruikt, probeert u waarschijnlijk een zeer interactief prototype te maken met veel animaties. Oproep aan de bezielen methode meerdere keren op een Laag kan vervelend worden. In plaats daarvan kunt u een lijst met toestanden koppelen aan een Laag en schakel gewoon tussen de toestanden wanneer dat nodig is.
elk Laag heeft een staten eigenschap die een instantie is van de LayerStates klasse. Om nieuwe toestanden toe te voegen aan een Laag, jij noemt het toevoegen methode op de staten eigendom. In het volgende codefragment voegen we twee nieuwe statussen toe aan de pic voorwerp.
"javascript // Twee toestanden toevoegen
pic.states.add ("myState1": borderRadius: 100,
"myState2": borderRadius: 200); "
Het toevoegen van een staat resulteert niet in een onmiddellijke visuele verandering. Echter, wanneer een Laag schakelt van de ene staat naar de andere, je zult de animatie kunnen zien. Om de status van een te wijzigen Laag, jij noemt het schakelaar methode op de staten eigendom van de Laag voorwerp. In het volgende codefragment ziet u hoe u de status van kunt wijzigen pic wanneer erop wordt geklikt.
"javascript // Status wijzigen wanneer erop wordt geklikt
pic.on ("klik", functie () // Schakel over naar myState2 pic.states.switch ("myState2");); "
Door de toestanden van a Laag, je kunt de volgende methode van zijn staten voorwerp.
javascript pic.states.next ();
Als u een achtergrondkleur of afbeelding aan uw prototype wilt toevoegen, maakt u een achtergrondlaag voorwerp. EEN achtergrondlaag is een Laag waarvan de afmetingen gelijk zijn aan de afmetingen van het scherm van het apparaat. Zo voeg je een grijs toe achtergrondlaag:
javascript var bg = new BackgroundLayer (backgroundColor: "#BDBDBD");
Omdat het Framer-prototype slechts een gewone HTML-pagina is, kunt u CSS ook gebruiken om het te stylen. Als u bijvoorbeeld niet tevreden bent met de witte kleur rondom het apparaat, kunt u dit wijzigen door een nieuwe stijl toe te passen op de webpagina's. lichaam label.
"html
"
Met deze wijzigingen ziet het prototype er als volgt uit wanneer de animaties zijn voltooid:
Om een te maken Laag sleepbaar, alles wat je hoeft te doen is zijn draggable.enabled eigendom aan waar.
"javascript // Slepen toestaan
pic.draggable.enabled = true; "
Als een Laag is versleepbaar, u kunt gebeurtenislisteners toevoegen die reageren op verschillende gebeurtenissen met betrekking tot slepen, zoals dragend en dragmove. Dit is bijvoorbeeld een dragend gebeurtenishandler die terugkeert pic naar de oorspronkelijke positie:
"javascript // Gebruik dragend
pic.on ("dragend", function () pic.animate ("properties": x: Screen.width / 2 - pic.width / 2, // Place at Center y: 440 // Original Y );); "
In deze zelfstudie hebt u de basisbeginselen geleerd voor het maken van interactieve prototypen voor mobiele apps met Framer. Omdat uw Framer-prototypen statische webpagina's zijn, kunt u deze naar elke HTTP-server uploaden om ze met uw vrienden en klanten te delen.
Ik zou u ook willen vertellen dat als u bekwaam bent met Adobe Photoshop, u de elementen van de gebruikersinterface van uw prototypen niet programmatisch hoeft te maken. U kunt de lay-out in Photoshop ontwerpen en de laaggroepen in uw PSD in Framer's omzetten Laag voorwerpen. U hebt ook de mogelijkheid om Framer Studio aan te schaffen en te gebruiken, een IDE die speciaal is gebouwd voor het werken met Framer-projecten.
Voor meer informatie over het Framer-framework kunt u de documentatie van Framer raadplegen. In het tweede deel van deze serie ga ik dieper in op navigatie, scrollen en animatie.
