Innhold
- Importer fra skisse
- Lag maske- og avatarlag
- Definer tilstander
- Animer mellom stater
- Prøv det på en ekte mobilenhet
Resonnementet bak designprototyping er ikke nytt - det er det samme som alt suset om å designe i nettleseren. Når du ser et design i sin virkelige sammenheng, er det helt annerledes. Du tar bedre avgjørelser når du ikke trenger å gjøre antagelser om hvordan et grensesnitt vil fungere og føles. Dette kan høres ut som ekstra arbeid, men innsikten du kan få ved å se designen din fungerer er uvurderlig.
Framer er et nytt kodebasert prototypeverktøy. Du kan lage mockups i Sketch (eller Photoshop) akkurat som du pleier å gjøre, og importere dem til Framer. Deretter skriver du litt CoffeeScript, så kan du oppnå mye.
Jeg skal lære deg det grunnleggende om prototyping i Framer, ved å bruke eksemplet på en iOS-app-prototype med to visninger: en profilvisning og en zoomet inn visning av brukerens avatarbilde. Vi vil prototype hvordan den utvidede bildevisningen åpnes og lukkes, og vi vil også animere den. Se online demo her (for å se kildekoden, klikk bare på ikonet øverst til venstre). Du trenger også en gratis prøveversjon av Framer, som du kan få på framerjs.com.
Importer fra skisse
Det første trinnet er å importere lag fra Sketch til Framer. Bare klikk på Importer-knappen i Framer mens designet er åpent i Sketch, og velg riktig fil i dialogboksen som følger. Framer importerer automatisk bilder fra hvert lag og gjør dem tilgjengelige via kode som denne:
skisse = Framer.Importer.load "importert / profil"
Bruk den variabelen for å få tilgang til de importerte lagene. Hvis du for eksempel vil referere til laget med navnet 'innhold' i Sketch-filen, skriver du sketch.content i Framer.
Lag maske- og avatarlag
Kjernefunksjonen til denne prototypen er å utvide avatarbildet når det tappes, og deretter lukke det når det tappes igjen. Først lager vi to maskelag - en nestet maske eller en maske inne i en annen maske. Vi animerer begge maskene samtidig for å skape en fin, subtil åpnings- og lukkingseffekt. HeaderMask-laget beskjærer avatarbildet til et rektangel når det utvides, og maskelaget beskjæres til en liten sirkel i profilvisningen.
Lag headerMask-laget slik:
headerMask = ny lagbredde: Skjerm.bredde, høyde: 800 bakgrunnFarge: "gjennomsiktig"
Den første kodelinjen oppretter og navngir det nye laget. Deretter setter vi inn bredde, høyde og bakgrunnsegenskaper ved bruk av CoffeeScript's innrykkssyntaks. Vi bruker en gjennomsiktig bakgrunn slik at lagene under vises når avatarbildet utvides.
Deretter lager du maskelaget:
maske = ny Lagbredde: 1000, høyde: 1000 bakgrunnFarge: "gjennomsiktig", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMaskeskala: 0.2, originY: 0
Vi lager et nytt lag og setter egenskaper på samme måte. Den store borderRadius gjør dette laget til en sirkel. Vi plasserer maskelaget slik at det overlapper topplaget, som ble importert fra Sketch. Vi skalerer også ned til 20 prosent, eller 0,2. En opprinnelseY på null setter ankerpunktet eller registreringen av bildet til den øverste kanten.
Den gjenværende egenskapen, superLayer, angir headerMask-laget vi opprettet som overordnet for dette nye laget. Slik fungerer maskering i Framer. Bare sett inn superLayer-egenskapen, og foreldrelaget maskerer barnet.
Deretter må vi lage avatargrafikken og plassere den i de nye maskene. For å zoome og animere beskjæringsgrensene oppretter vi avatarlaget manuelt. Kopier et bilde til undermappen ’bilder’ i prosjektmappen. Lag deretter et lag med det bildet:
avatar = nytt lagbilde: "bilder / avatar.png" bredde: maskebredde, høyde: maskehøyde superlag: maske, force2d: sann
Legg merke til at vi setter superlaget til avataren til å være maskelaget. Begge er nå nestet i headerMask. Vi angir også bredde og høyde slik at bildet fyller det maskerte området helt.
Til slutt lager vi en variabel for å lagre Y-posisjonen til masken vi skal bruke til animasjonen. Vi sentrerer den horisontalt, siden den er større enn skjermen.
maskY = mask.y mask.centerX ()
Definer tilstander
Det første trinnet i å lage en animasjon er å definere begynnelsen og slutttilstandene. I Framer er stater som nøkkelbilder skrevet ut i kode. En stat er bare en samling av eiendommer. Hvert lag har en standardtilstand. For denne prototypen vil standardverdien fungere som startpunktet for animasjonen, så vi trenger bare å angi en ny tilstand for hvert lag.
Syntaksen for stater er veldig enkel. Henvis til laget, bruk metoden layer.states.add (), og oppgi deretter egenskapene som skal inkluderes.
sketch.content.states.add (skjul: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {skala: 1.1, y: maskY - 420})
Den andre tilstanden for innholdslaget, som ble importert fra Sketch og inneholder alle de andre profilskjermelementene, skal være helt gjennomsiktig. Når avataren utvides, vil vi ha en svart bakgrunn og de gjenværende importerte ikonene og elementene vises.
Den andre kodelinjen skaper en tilstand for headerMask, som ganske enkelt vil flytte den ned til en Y-posisjon på 120. Dette vil tillate at tittelen og lukkeknappen vises øverst på skjermen når avatarbildet forstørres. Det vil også animere beskjæringsgrensene til avatarbildet.
Til slutt vil en ny tilstand for maskelaget både skalere det opp og flytte det opp, ved hjelp av maskY-variabelen vi opprettet tidligere. Fordi opprinnelsen Y (eller ankerpunktet) til maskelaget er dens øverste kant, må vi flytte det opp med 420 piksler slik at midten av bildet blir synlig.
Animer mellom stater
For å animere mellom standardstatusene og de nye vi nettopp opprettet, trenger vi bare fire kodelinjer til. Vi setter en klikkebehandler på avatarlaget. Når en bruker trykker på den på profilskjermen, overgår vi til den utvidede visningen etter sykling. Når den tappes igjen, går vi tilbake til standardstatusene, slik at den går tilbake til en liten sirkel. De samme kodelinjene håndterer begge interaksjonene:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Den første linjen i denne blokken setter opp klikkbehandleren på avatarlaget. Hver gang det blir tappet, uansett hvordan det er beskåret eller hvilken størrelse det er, vil uttalelsene som følger, kjøre.
Deretter refererer vi bare til hvert lag, og bruker metoden layer.states.next () for å bytte tilstander. Når du bruker layer.states.next (), vil Framer bruke sine interne standard animasjonsinnstillinger. Dette er ekstremt praktisk, men du kan lage enda bedre animasjoner ved å finjustere animasjonskurvene.
Når du bruker tilstander som vi er her, kan du enkelt endre hver animasjonskurve separat ved å bruke egenskapen layer.states.animationOptions. Med bare tre små justeringer føles animasjonen helt annerledes:
sketch.content.states.animationOptions = kurve: "letthet", tid: 0,3 headerMask.states.animationOptions = kurve: "vår (150, 20, 0)" mask.states.animationOptions = kurve: "vår (300, 30, 0) "
For innholdslaget som falmer ut og inn, velger vi en enkel forhåndsinnstilt kurve, lette og setter animasjonens varighet til 0,3 slik at den er veldig rask.
For headerMask og maskelag, bruk en fjærkurve. For våre formål trenger du bare å vite at fjærkurveverdiene endrer hastigheten og spretten til animasjonen. Verdiene for maskelaget vil gjøre animasjonen mye raskere enn headerMask og innhold. For mer informasjon om vårkurveinnstillingene, se Framer-dokumentasjonen på framerjs.com/docs.
Prøv det på en ekte mobilenhet
Å se designet på en ekte enhet er så mye mer effektivt enn å bruke emulatorer, og du vil se fordelene i arbeidet ditt. Framer inkluderer en speilfunksjon, som er en innebygd server som tilbyr en URL til din prototype over ditt lokale nettverk. Bare besøk URL-en ved hjelp av enheten.
Du har lært alt du trenger å vite for å prototype dine egne design i Framer. Hva venter du på?
Ord: Jarrod Drysdale
Jarrod Drysdale er forfatter, designkonsulent, produsent av digitale produkter. Denne artikkelen ble opprinnelig publisert i nummer 270 av nettmagasinet.
Likte dette? Les disse!
- Lag klikkbare, live prototyper i Sketch
- Hvordan starte en blogg
- De beste bildeditorene
