Innehåll
- Importera från skiss
- Skapa mask- och avatarlager
- Definiera tillstånd
- Animera mellan stater
- Prova på en riktig mobil enhet
Resonemanget bakom designprototyper är inte nytt - det är detsamma som allt surr om att designa i webbläsaren. När du ser en design i sitt verkliga sammanhang är den helt annorlunda. Du fattar bättre beslut när du inte behöver göra antaganden om hur ett gränssnitt fungerar och känns. Det kan låta som extra arbete, men de insikter du kan få genom att se din design fungera är ovärderliga.
Framer är ett nytt kodbaserat prototypverktyg. Du kan skapa mockups i Sketch (eller Photoshop) precis som vanligt och importera dem till Framer. Skriv sedan lite CoffeeScript så kan du åstadkomma mycket.
Jag ska lära dig grunderna för prototyper i Framer, med exemplet på en iOS-app-prototyp med två vyer: en profilvy och en inzoomad vy av användarens avatarbild. Vi prototypar hur den utvidgade fotovyn öppnas och stängs, och vi animerar den också. Se online-demo här (för att se källkoden, klicka bara på ikonen i det övre vänstra hörnet). Du behöver också en gratis provperiod på Framer, som du kan få på framerjs.com.
Importera från skiss
Det första steget är att importera lager från Sketch till Framer. Klicka bara på Importera-knappen i Framer medan designen är öppen i Sketch och välj rätt fil i dialogrutan som följer. Framer importerar automatiskt bilder från varje lager och gör dem tillgängliga via kod så här:
skiss = Framer.Importer.load "importerad / profil"
Använd den variabeln för att komma åt de importerade lagren. Om du till exempel vill referera till skiktet med innehållet i skissfilen skriver du sketch.content i Framer.
Skapa mask- och avatarlager
Kärnfunktionen för denna prototyp är att utöka avatarbilden när den tappas och sedan stänga den när den tappas igen. Först skapar vi två masklager - en kapslad mask eller en mask inuti en annan mask. Vi animerar båda maskerna samtidigt för att skapa en fin, subtil öppnings- och stängningseffekt. HeaderMask-lagret beskärar avatarfotoet till en rektangel när det expanderas, och masklagret beskärs till en liten cirkel i profilvyn.
Skapa headerMask-lagret så här:
headerMask = ny lagerbredd: Screen.width, höjd: 800 backgroundColor: "transparent"
Den första kodraden skapar och namnger det nya lagret. Därefter ställer vi in bredd, höjd och bakgrundsegenskaper med hjälp av CoffeeScripts indragssyntax. Vi använder en transparent bakgrund så att lagren nedan visas när avatarfotoet expanderas.
Skapa sedan masklagret:
mask = ny lagerbredd: 1000, höjd: 1000 bakgrundFärg: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask skala: 0.2, originY: 0
Vi skapar ett nytt lager och ställer in egenskaper på samma sätt. Den stora borderRadius gör detta lager till en cirkel. Vi placerar masklagret så att det överlappar huvudlagret som importerades från Sketch. Vi skalar också ner till 20 procent, eller 0,2. Ett ursprung Y på noll ställer in ankarpunkten eller registreringen av bilden till överkanten.
Den återstående egenskapen, superLayer, ställer in headerMask-lagret som vi skapade som förälder för det nya lagret. Så här fungerar maskering i Framer. Ställ bara in superLayer-egenskapen, så kommer det överordnade lagret att maskera barnet.
Därefter måste vi skapa avatorgrafiken och placera den i de nya maskerna. För att zooma och animera beskärningsgränserna skapar vi manuellt avatarlagret. Kopiera ett foto till projektmappens ”undermapp”. Skapa sedan ett lager med den bilden:
avatar = new Layer image: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Lägg märke till att vi ställer in superlagret för avataren som masklager. Båda är nu kapslade i headerMask. Vi ställer också in bredd och höjd så att bilden fyller det maskerade området helt.
Slutligen skapar vi en variabel för att lagra Y-positionen för den mask vi ska använda för animeringen. Vi centrerar den horisontellt eftersom den är större än skärmen.
maskY = mask.y mask.centerX ()
Definiera tillstånd
Det första steget i att skapa en animering är att definiera start- och slutlägen. I Framer är stater som nyckelbilder som skrivs ut i kod. En stat är bara en samling fastigheter. Varje lager har ett standardläge. För denna prototyp kommer denna standard att fungera som startpunkten för animeringen, så vi behöver bara ställa in ett andra tillstånd för varje lager.
Syntaxen för tillstånd är mycket enkel. Referera lagret, använd metoden layer.states.add () och lista sedan egenskaperna som ska inkluderas.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {skala: 1.1, y: maskY - 420})
Det andra tillståndet för innehållsskiktet, som importerades från Sketch och innehåller alla andra profilskärmselement, bör vara helt transparent. På det här sättet, när avataren utvidgas, har vi en svart bakgrund och de återstående importerade ikonerna och elementen kommer att visas igenom.
Den andra kodraden skapar ett tillstånd för headerMask, som helt enkelt flyttar ner det till en Y-position på 120. Detta gör att titeln och stängningsknappen visas högst upp på skärmen när avatafotot förstoras. Det kommer också att animera beskärningsgränserna för avatarfotoet.
Slutligen kommer ett nytt tillstånd för masklagret att både skala upp det och flytta det upp med den maskY-variabel som vi skapade tidigare. Eftersom maskeringslagrets ursprung Y (eller ankarpunkt) är dess övre kant, måste vi flytta det upp med 420 pixlar så att bildens mitt syns.
Animera mellan stater
För att animera mellan standardtillstånden och de nya vi just skapade behöver vi bara ytterligare fyra rader kod. Vi ställer in en klickhanterare på avatarlagret. När en användare trycker på den på profilskärmen övergår vi till den utökade vyn efter cyklingstillstånd. När du trycker på den igen cyklar vi tillbaka till standardlägena så att den återgår till en liten cirkel. Samma kodrader hanterar båda interaktionerna:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Den första raden i detta block ställer in klickhanteraren på avatarlagret. Varje gång det knackas, oavsett hur det beskärs eller vilken storlek det är, kommer uttalandena som följer att köras.
Sedan refererar vi helt enkelt till varje lager och använder metoden layer.states.next () för att växla tillstånd. När du använder layer.states.next () använder Framer sina interna standardinställningar för animering. Detta är extremt bekvämt, men du kan skapa ännu bättre animationer genom att finjustera animationskurvorna.
När du använder tillstånd som vi är här kan du enkelt ändra varje animationskurva separat genom att använda egenskapen layer.states.animationOptions. Med bara tre små justeringar känns animationen helt annorlunda:
sketch.content.states.animationOptions = kurva: "lätthet", tid: 0,3 headerMask.states.animationOptions = kurva: "fjäder (150, 20, 0)" mask.states.animationOptions = kurva: "fjäder (300, 30, 0) "
För innehållsskiktet som tappar ut och in väljer vi en enkel kurvförinställning, lätthet och ställer animeringens varaktighet till 0,3 så att den blir väldigt snabb.
Använd en fjäderkurva för headerMask och masklager. För våra ändamål behöver du bara veta att fjäderkurvvärdena ändrar hastigheten och studsningen av animationen. Värdena för masklagret gör dess animering mycket snabbare än headerMask och innehåll. Mer information om vårkurvinställningarna finns i Framer-dokumentationen på framerjs.com/docs.
Prova på en riktig mobil enhet
Att se designen på en riktig enhet är så mycket effektivare än att använda emulatorer, och du kommer att se fördelarna med ditt arbete. Framer inkluderar en spegelfunktion, som är en inbyggd server som erbjuder en URL till din prototyp över ditt lokala nätverk. Besök bara webbadressen med din enhet.
Du har lärt dig allt du behöver veta för att göra din egen design i Framer. Vad väntar du på?
Ord: Jarrod Drysdale
Jarrod Drysdale är författare, designkonsult, tillverkare av digitala produkter. Den här artikeln publicerades ursprungligen i nummer 270 i tidningen net.
Gillade detta? Läs dessa!
- Skapa klickbara, live prototyper i Sketch
- Hur man startar en blogg
- De bästa fotoredigerarna
