Indhold
- Import fra skitse
- Opret maske- og avatarlag
- Definer tilstande
- Animer mellem stater
- Prøv det på en rigtig mobilenhed
Ræsonnementet bag designprototyper er ikke nyt - det er det samme som al brummen om at designe i browseren. Når du ser et design i sin reelle sammenhæng, er det helt anderledes. Du træffer bedre beslutninger, når du ikke behøver at antage, hvordan en grænseflade fungerer og føles. Dette lyder måske som ekstra arbejde, men den indsigt, du kan få ved at se dit design fungere, er uvurderlig.
Framer er et nyt kodebaseret prototypeværktøj. Du kan oprette mockups i Sketch (eller Photoshop), som du normalt ville, og importere dem til Framer. Skriv derefter lidt CoffeeScript, så kan du opnå meget.
Jeg vil lære dig det grundlæggende i prototyping i Framer ved hjælp af eksemplet på en iOS-app-prototype med to visninger: en profilvisning og en zoomet ind visning af brugerens avatarbillede. Vi prototype, hvordan den udvidede fotovisning åbnes og lukkes, og vi animerer den også. Se online demo her (for at se kildekoden skal du blot klikke på ikonet i øverste venstre hjørne). Du skal også bruge den gratis prøveversion af Framer, som du kan få på framerjs.com.
Import fra skitse
Det første trin er at importere lag fra Sketch til Framer. Klik blot på knappen Importer i Framer, mens designet er åbent i Sketch, og vælg den korrekte fil i den følgende dialog. Framer importerer automatisk billeder fra hvert lag og gør dem tilgængelige via kode som denne:
sketch = Framer.Importer.load "importeret / profil"
Brug den variabel til at få adgang til de importerede lag. For eksempel for at henvise til laget med navnet 'indhold' i Sketch-filen skal du skrive sketch.content i Framer.
Opret maske- og avatarlag
Denne prototypes kernefunktion er at udvide avatarbilledet, når det tappes, og derefter lukke det, når det tappes igen. Først opretter vi to masklag - en indlejret maske eller en maske inde i en anden maske. Vi animerer begge masker på én gang for at skabe en dejlig, subtil åbnings- og lukningseffekt. HeaderMask-laget beskærer avatarfotoet til et rektangel, når det udvides, og masklaget beskærer det til en lille cirkel i profilvisningen.
Opret headerMask-laget som dette:
headerMask = ny lagbredde: Screen.width, height: 800 backgroundColor: "transparent"
Den første kodelinje opretter og navngiver det nye lag. Derefter indstiller vi bredde, højde og baggrundsegenskaber ved hjælp af CoffeeScript's indrykningssyntaks. Vi bruger en gennemsigtig baggrund, så lagene nedenfor vises, når avatarfotoet udvides.
Opret derefter masklaget:
maske = ny Lagbredde: 1000, højde: 1000 baggrundFarve: "gennemsigtig", borderRadius: 500 år: sketch.header.højde - 100 superLayer: headerMaskeskala: 0.2, oprindelseY: 0
Vi opretter et nyt lag og indstiller egenskaber på samme måde. Den store borderRadius gør dette lag til en cirkel. Vi placerer masklaget, så det overlapper headerlaget, som blev importeret fra Sketch. Vi skalerer også ned til 20 procent eller 0,2. En oprindelseY på nul indstiller ankerpunktet eller registreringen af billedet til den øverste kant.
Den resterende egenskab, superLayer, indstiller headerMask-laget, som vi oprettede, som overordnet for dette nye lag. Sådan fungerer maskering i Framer. Du skal blot indstille superLayer-ejendommen, og det overordnede lag maskerer barnet.
Dernæst skal vi oprette avatargrafikken og placere den inde i de nye masker. For at zoome og animere beskæringsgrænserne opretter vi manuelt avatarlaget. Kopiér et foto i undermappen 'billeder' i projektmappen. Opret derefter et lag ved hjælp af det billede:
avatar = nyt lagbillede: "images / avatar.png" bredde: mask.bredde, højde: mask.højde superLayer: maske, force2d: sand
Bemærk, at vi indstiller superLayer på avataren til at være masklaget. Begge er nu indlejret i headerMask. Vi indstiller også bredde og højde, så billedet udfylder det maskerede område fuldstændigt.
Til sidst opretter vi en variabel til at gemme Y-positionen for den maske, vi bruger til animationen. Vi centrerer det vandret, da det er større end skærmen.
maskY = mask.y maske.centerX ()
Definer tilstande
Det første trin i oprettelsen af en animation er at definere start- og sluttilstandene. I Framer er stater som nøglerammer skrevet ud i kode. En stat er kun en samling af egenskaber. Hvert lag har en standardtilstand. For denne prototype fungerer denne standard som startpunktet for animationen, så vi behøver kun at indstille en anden tilstand for hvert lag.
Syntaksen for stater er meget enkel. Henvis til laget, brug metoden layer.states.add (), og angiv derefter de egenskaber, der skal medtages.
sketch.content.states.add (skjul: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {skala: 1.1, y: maskY - 420})
Den anden tilstand for indholdslaget, som blev importeret fra Sketch og indeholder alle de andre profilskærmeelementer, skal være helt gennemsigtig. På denne måde får vi en sort baggrund, når avataren udvides, og de resterende importerede ikoner og elementer vises igennem.
Den anden kodelinje opretter en tilstand for headerMask, som simpelthen flytter den ned til en Y-position på 120. Dette gør det muligt for titlen og luk-knappen at vises øverst på skærmen, når avatarfotoet forstørres. Det vil også animere beskæringsgrænserne for avatarfotoet.
Endelig skal en ny tilstand for masklaget både skalere det op og flytte det op ved hjælp af den maskY-variabel, vi oprettede tidligere. Fordi masken, oprindelsesY (eller forankringspunktet) er dens øverste kant, skal vi flytte det op med 420 pixels, så midten af billedet er synligt.
Animer mellem stater
For at animere mellem standardtilstandene og de nye, vi lige har oprettet, behøver vi kun yderligere fire linier med kode. Vi indstiller en klikhåndterer på avatarlaget. Når en bruger trykker på den på profilskærmen, overgår vi til den udvidede visning efter cyklingstilstande. Når den tappes igen, skifter vi tilbage til standardtilstandene, så den vender tilbage til en lille cirkel. De samme kodelinjer håndterer begge interaktioner:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
Den første linje i denne blok opretter klikhåndtereren på avatarlaget. Hver gang det tappes, uanset hvordan det er beskåret, eller hvilken størrelse det er, vil udsagnene, der følger, køre.
Derefter henviser vi blot til hvert lag og bruger metoden layer.states.next () til at skifte tilstand. Når du bruger layer.states.next (), bruger Framer sine interne standardanimationsindstillinger. Dette er ekstremt praktisk, men du kan lave endnu bedre animationer ved at finjustere animationskurverne.
Når du bruger tilstande som vi er her, kan du nemt ændre hver animationskurve separat ved hjælp af egenskaben layer.states.animationOptions. Med kun tre små justeringer føles animationen helt anderledes:
sketch.content.states.animationOptions = kurve: "lethed", tid: 0,3 headerMask.states.animationOptions = kurve: "fjeder (150, 20, 0)" mask.states.animationOptions = kurve: "fjeder (300, 30, 0) "
For det indholdslag, der falmer ud og ind, vælger vi en simpel kurveforudindstilling, lethed og indstiller animationens varighed til 0,3, så det er meget hurtigt.
Brug en fjederkurve til headerMask og maskelag. Til vores formål skal du bare vide, at fjederkurveværdierne ændrer hastigheden og hoppet af animationen. Værdierne for masklaget vil gøre animationen meget hurtigere end headerMask og indhold. For yderligere oplysninger om fjederkurveindstillingerne henvises til Framer-dokumentationen på framerjs.com/docs.
Prøv det på en rigtig mobilenhed
At se designet på en rigtig enhed er så meget mere effektivt end at bruge emulatorer, og du vil se fordelene ved dit arbejde. Framer inkluderer en spejlfunktion, som er en indbygget server, der tilbyder en URL til din prototype over dit lokale netværk. Du skal blot besøge URL'en ved hjælp af din enhed.
Du har lært alt hvad du behøver at vide for at prototype dine egne designs i Framer. Hvad venter du på?
Ord: Jarrod Drysdale
Jarrod Drysdale er forfatter, designkonsulent, producent af digitale produkter. Denne artikel blev oprindeligt offentliggjort i nummer 270 af netmagasinet.
Kan du lide dette? Læs disse!
- Opret klikbare, live prototyper i Sketch
- Sådan startes en blog
- De bedste billedredaktører
