Inhoud
- Importeren vanuit Sketch
- Maak masker- en avatarlagen
- Definieer staten
- Animeer tussen staten
- Probeer het op een echt mobiel apparaat
De redenering achter ontwerpprototyping is niet nieuw - het is hetzelfde als al het geroezemoes over ontwerpen in de browser. Als je een ontwerp in zijn echte context ziet, is het totaal anders. U neemt betere beslissingen als u geen aannames hoeft te doen over hoe een interface zal functioneren en aanvoelen. Dit klinkt misschien als extra werk, maar de inzichten die u kunt opdoen door uw ontwerp te zien werken, zijn van onschatbare waarde.
Framer is een nieuwe op code gebaseerde prototyping-tool. U kunt mockups maken in Sketch (of Photoshop), net zoals u dat gewend bent, en deze in Framer importeren. Schrijf dan een beetje CoffeeScript en je kunt veel bereiken.
Ik ga je de basisprincipes van prototyping in Framer leren, aan de hand van het voorbeeld van een iOS-app-prototype met twee weergaven: een profielweergave en een ingezoomde weergave van de avatarafbeelding van de gebruiker. We maken een prototype van hoe de uitgevouwen fotoweergave wordt geopend en gesloten, en we animeren deze ook. Bekijk hier de online demo (om de broncode te zien, klikt u op het pictogram in de linkerbovenhoek). Je hebt ook de gratis proefversie van Framer nodig, die je kunt krijgen op framerjs.com.
Importeren vanuit Sketch
De eerste stap is het importeren van lagen vanuit Sketch in Framer. Klik gewoon op de knop Importeren in Framer terwijl het ontwerp is geopend in Sketch, en kies het juiste bestand in het dialoogvenster dat volgt. Framer importeert automatisch afbeeldingen uit elke laag en maakt ze als volgt toegankelijk via code:
sketch = Framer.Importer.load "geïmporteerd / profiel"
Gebruik die variabele om toegang te krijgen tot de geïmporteerde lagen. Als u bijvoorbeeld in het Sketch-bestand naar de laag met de naam ’content’ wilt verwijzen, typt u sketch.content in Framer.
Maak masker- en avatarlagen
De kernfunctie van dit prototype is om de avatarafbeelding uit te breiden wanneer erop wordt getikt, en vervolgens te sluiten wanneer erop wordt getikt. Eerst maken we twee maskerlagen: een genest masker of een masker in een ander masker. We animeren beide maskers tegelijk om een mooi, subtiel openings- en sluiteffect te creëren. De headerMask-laag snijdt de avatarfoto bij tot een rechthoek wanneer deze wordt uitgevouwen, en de maskerlaag snijdt deze bij tot een kleine cirkel in de profielweergave.
Maak de headerMask-laag als volgt:
headerMask = new Layer breedte: Screen.width, hoogte: 800 backgroundColor: "transparant"
De eerste regel code maakt de nieuwe laag en geeft deze een naam. Vervolgens stellen we met behulp van de inspringingssyntaxis van CoffeeScript de eigenschappen voor breedte, hoogte en achtergrond in. We gebruiken een transparante achtergrond zodat de lagen eronder laten zien wanneer de avatarfoto wordt uitgevouwen.
Maak vervolgens de maskerlaag:
mask = new Layer breedte: 1000, hoogte: 1000 backgroundColor: "transparant", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask schaal: 0.2, originY: 0
We maken een nieuwe laag en stellen eigenschappen op dezelfde manier in. De grote borderRadius maakt van deze laag een cirkel. We plaatsen de maskerlaag zodat deze de koplaag overlapt, die uit Sketch is geïmporteerd. We schalen ook terug naar 20 procent of 0,2. Een oorsprongY van nul stelt het ankerpunt of de registratie van de afbeelding in op de bovenrand.
De resterende eigenschap, superLayer, stelt de headerMask-laag die we hebben gemaakt in als de bovenliggende laag van deze nieuwe laag. Dit is hoe maskering werkt in Framer. Stel eenvoudig de eigenschap superLayer in en de bovenliggende laag maskeert het kind.
Vervolgens moeten we de avatar-afbeelding maken en deze in die nieuwe maskers plaatsen. Om de bijsnijdgrenzen te zoomen en te animeren, maken we handmatig de avatarlaag. Kopieer een foto naar de submap ‘afbeeldingen’ van de projectmap. Maak vervolgens een laag met die afbeelding:
avatar = nieuwe Laagafbeelding: "images / avatar.png" breedte: mask.width, hoogte: mask.height superLayer: mask, force2d: true
Merk op dat we de superLayer van de avatar hebben ingesteld als maskerlaag. Beide zijn nu genest in headerMask. We stellen ook de breedte en hoogte in, zodat de afbeelding het gemaskeerde gebied volledig vult.
Als laatste maken we een variabele om de Y-positie op te slaan van het masker dat we voor de animatie gebruiken. We centreren het horizontaal, omdat het groter is dan het scherm.
maskY = mask.y mask.centerX ()
Definieer staten
De eerste stap bij het maken van een animatie is het definiëren van de begin- en eindtoestanden. In Framer zijn statussen als keyframes die in code zijn uitgeschreven. Een staat is slechts een verzameling eigenschappen. Elke laag heeft een standaardstatus. Voor dit prototype zal die standaard dienen als het beginpunt voor de animatie, dus we hoeven alleen voor elke laag een tweede status in te stellen.
De syntaxis voor staten is heel eenvoudig. Verwijs naar de laag, gebruik de methode layer.states.add () en maak een lijst van de op te nemen eigenschappen.
sketch.content.states.add (verbergen: {opacity: 0}) headerMask.states.add (verplaats: {y: 120}) mask.states.add (groeien: {scale: 1.1, y: maskY - 420})
De tweede status voor de inhoudslaag, die is geïmporteerd uit Sketch en alle andere profielschermelementen bevat, moet volledig transparant zijn. Op deze manier hebben we een zwarte achtergrond wanneer de avatar is uitgevouwen en de resterende geïmporteerde pictogrammen en elementen zijn zichtbaar.
De tweede regel code creëert een status voor headerMask, die het eenvoudig naar een Y-positie van 120 verplaatst. Hierdoor kunnen de titel en de knop Sluiten bovenaan het scherm worden weergegeven wanneer de avatarfoto wordt vergroot. Het zal ook de bijsnijdgrenzen van de avatarfoto animeren.
Ten slotte zal een nieuwe status voor de maskerlaag deze zowel opschalen als omhoog verplaatsen, met behulp van de maskY-variabele die we eerder hebben gemaakt. Omdat de oorsprong (of het ankerpunt) van de maskerlaag de bovenrand is, moeten we deze 420 pixels omhoog verplaatsen zodat het midden van de afbeelding zichtbaar is.
Animeer tussen staten
Om te animeren tussen de standaardstatussen en de nieuwe die we zojuist hebben gemaakt, hebben we nog maar vier regels code nodig. We stellen een klik-handler in op de avatarlaag. Wanneer een gebruiker erop tikt op het profielscherm, gaan we over naar de uitgevouwen weergave op basis van cyclustoestanden. Als er weer op wordt getikt, gaan we terug naar de standaardinstellingen, zodat het terugkeert naar een kleine cirkel. Dezelfde regels code verwerken beide interacties:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
De eerste regel van dit blok stelt de klik-handler op de avatarlaag in. Elke keer dat erop wordt getikt, ongeacht hoe het is bijgesneden of hoe groot het is, worden de volgende instructies uitgevoerd.
Vervolgens verwijzen we eenvoudig naar elke laag en gebruiken we de methode layer.states.next () om tussen staten te schakelen. Als u layer.states.next () gebruikt, gebruikt Framer de interne standaardanimatie-instellingen. Dit is buitengewoon handig, maar u kunt nog betere animaties maken door de animatiecurves te verfijnen.
Wanneer u states gebruikt zoals we hier zijn, kunt u eenvoudig elke animatiecurve afzonderlijk wijzigen door de eigenschap layer.states.animationOptions te gebruiken. Met slechts drie kleine aanpassingen voelt de animatie compleet anders aan:
sketch.content.states.animationOptions = curve: "gemak", tijd: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Voor de inhoudslaag die uit en in vervaagt, kiezen we een eenvoudige curve-preset, gemak en stellen we de animatieduur in op 0,3, zodat deze erg snel is.
Gebruik een veercurve voor de headerMask- en maskerlagen. Voor onze doeleinden hoeft u alleen te weten dat de waarden van de veercurve de snelheid en het stuiteren van de animatie veranderen. De waarden voor de maskerlaag maken de animatie veel sneller dan headerMask en inhoud. Raadpleeg de Framer-documentatie op framerjs.com/docs voor meer informatie over de instellingen voor de veercurve.
Probeer het op een echt mobiel apparaat
Het ontwerp op een echt apparaat zien is zoveel effectiever dan emulators gebruiken, en u zult de voordelen in uw werk zien. Framer bevat een spiegelfunctie, een ingebouwde server die een URL naar uw prototype biedt via uw lokale netwerk. Bezoek gewoon de URL met uw apparaat.
Je hebt alles geleerd wat je moet weten om een prototype van je eigen ontwerpen te maken in Framer. Waar wacht je op?
Woorden: Jarrod Drysdale
Jarrod Drysdale is een auteur, ontwerpadviseur en maker van digitale producten. Dit artikel is oorspronkelijk gepubliceerd in nummer 270 van net magazine.
Vond dit leuk? Lees deze!
- Maak klikbare, live prototypes in Sketch
- Hoe u een blog start
- De beste foto-editors
