Content
- Importa des de Sketch
- Crea capes de màscara i avatar
- Definiu estats
- Animar entre estats
- Proveu-ho en un dispositiu mòbil real
El raonament darrere del prototipat de disseny no és nou: és el mateix que tot el que es fa al disseny al navegador. Quan veieu un disseny en el seu context real, és totalment diferent. Pren decisions millors quan no ha de fer supòsits sobre com funcionarà i se sentirà una interfície. Pot semblar un treball addicional, però les idees que podeu obtenir en veure funcionar el vostre disseny són inestimables.
Framer és una nova eina de prototipatge basada en codi. Podeu crear maquetes a Sketch (o Photoshop) tal com ho faríeu habitualment i importar-les a Framer. A continuació, escriviu una mica de CoffeeScript i podreu aconseguir molt.
T’ensenyaré els conceptes bàsics del prototipat a Framer, amb l’exemple d’un prototip d’aplicació per a iOS amb dues visualitzacions: una vista de perfil i una vista ampliada de la imatge d’avatar de l’usuari. Farem un prototip de com s’obrirà i tancarà la visualització de la foto ampliada i també l’animarem. Consulteu la demostració en línia aquí (per veure el codi font, feu clic a la icona de l'extrem superior esquerre). També necessitareu la prova gratuïta de Framer, que podeu obtenir a framerjs.com.
Importa des de Sketch
El primer pas és importar capes de Sketch a Framer. Simplement feu clic al botó Importa a Framer mentre el disseny està obert a Sketch i seleccioneu el fitxer correcte al quadre de diàleg següent. Framer importarà automàticament imatges de cada capa i les farà accessibles mitjançant un codi com aquest:
sketch = Framer.Importer.load "importat / perfil"
Utilitzeu aquesta variable per accedir a les capes importades. Per exemple, per fer referència a la capa anomenada "contingut" al fitxer Sketch, escriviu sketch.content a Framer.
Crea capes de màscara i avatar
La funció principal d’aquest prototip és ampliar la imatge de l’avatar quan es toca i, després, tancar-la quan es torna a tocar. En primer lloc, crearem dues capes de màscara: una màscara imbricada o una màscara dins d’una altra màscara. Animarem les dues màscares alhora per crear un efecte d’obertura i tancament agradable i subtil. La capa headerMask retallarà la foto de l’avatar en un rectangle quan s’ampliï i la capa de màscara la retallarà en un petit cercle a la vista de perfil.
Creeu la capa headerMask així:
headerMask = nou Amplada de la capa: Screen.width, altura: 800 backgroundColor: "transparent"
La primera línia de codi crea i posa nom a la nova capa. A continuació, mitjançant la sintaxi de sagnat de CoffeeScript, establim l'amplada, l'alçada i les propietats del fons. Utilitzarem un fons transparent perquè les capes de sota es mostrin quan s’ampli la foto de l’avatar.
A continuació, creeu la capa de màscara:
màscara = nou Amplada de la capa: 1000, alçada: 1000 de fons Color: "transparent", vora Radi: 500 a: sketch.header.height - 100 superCapa: capçalera Escala de màscara: 0,2, origen Y: 0
Creem una nova capa i establim propietats de la mateixa manera. El gran borderRadius fa que aquesta capa sigui un cercle. Posicionem la capa de màscara de manera que es superposi a la capa de capçalera, que s’ha importat de Sketch. També reduirem fins al 20%, o sigui, el 0,2. Un origen Y de zero estableix el punt d'ancoratge o el registre de la imatge a la vora superior.
La propietat restant, superLayer, defineix la capa headerMask que hem creat com a pare d'aquesta capa nova. Així és com funciona l’emmascarament a Framer. Simplement configureu la propietat superLayer i la capa pare emmascararà el fill.
A continuació, hem de crear el gràfic d’avatar i col·locar-lo dins d’aquestes noves màscares. Per ampliar i animar els límits de retall, crearem manualment la capa d’avatar. Copieu una foto a la subcarpeta "images" de la carpeta del projecte. A continuació, creeu una capa amb aquesta imatge:
avatar = nova imatge de capa: "images / avatar.png" ample: mask.width, height: mask.height superLayer: màscara, force2d: true
Fixeu-vos que configurem la super capa de l’avatar com a capa de màscara. Tots dos ara estan imbricats a headerMask. També definim l'amplada i l'alçada perquè la imatge ompli completament la zona emmascarada.
Per últim, crearem una variable per emmagatzemar la posició Y de la màscara que utilitzarem per a l’animació. El centrarem horitzontalment, ja que és més gran que la pantalla.
maskY = mask.y mask.centerX ()
Definiu estats
El primer pas per crear una animació és definir els estats inicial i final. A Framer, els estats són com fotogrames clau escrits en codi. Un estat és només una col·lecció de propietats. Cada capa té un estat per defecte. Per a aquest prototip, aquest valor predeterminat servirà com a punt inicial de l'animació, de manera que només cal establir un segon estat per a cada capa.
La sintaxi dels estats és molt senzilla. Feu referència a la capa, utilitzeu el mètode layer.states.add () i, a continuació, indiqueu les propietats que s’han d’incloure.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
El segon estat de la capa de contingut, que s’ha importat de Sketch i conté tots els altres elements de la pantalla de perfil, hauria de ser completament transparent. D’aquesta manera, quan s’ampli l’avatar, tindrem un fons negre i la resta d’icones i elements importats es mostraran.
La segona línia de codi crea un estat per a headerMask, que simplement el mourà cap avall fins a la posició Y de 120. Això permetrà que es mostri el títol i el botó de tancament a la part superior de la pantalla quan s'amplia la foto de l'avatar. També animarà els límits de retall de la foto de l’avatar.
Finalment, un nou estat per a la capa de màscara l’escalarà i el mourà cap amunt, mitjançant la variable maskY que hem creat anteriorment. Com que l’origen Y (o punt d’ancoratge) de la capa de màscara és la seva vora superior, hem de moure-la 420 píxels cap amunt perquè el centre de la imatge sigui visible.
Animar entre estats
Per animar entre els estats predeterminats i els nous que acabem de crear, només necessitem quatre línies de codi més. Establirem un gestor de clics a la capa d’avatar. Quan un usuari la toqui a la pantalla del perfil, passarem a la vista ampliada per estats de ciclisme. Quan es torna a tocar, tornarem als estats predeterminats per tornar a un petit cercle. Les mateixes línies de codi gestionen les dues interaccions:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
La primera línia d’aquest bloc configura el gestor de clics a la capa d’avatar. Sempre que es toqui, independentment de com es retalli o de la mida que tingui, s'executaran les declaracions següents.
A continuació, simplement fem referència a cada capa i fem servir el mètode layer.states.next () per alternar estats. Quan utilitzeu layer.states.next (), Framer utilitzarà la configuració d'animació predeterminada interna. Això és extremadament convenient, però podeu crear animacions encara millors millorant les corbes d’animació.
Quan utilitzeu estats com el que som aquí, podeu canviar fàcilment cada corba d'animació per separat mitjançant la propietat layer.states.animationOptions. Amb només tres ajustaments lleus, l'animació se sent completament diferent:
sketch.content.states.animationOptions = corba: "facilitat", temps: 0,3 headerMask.states.animationOptions = corba: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Per a la capa de contingut que s’esvaeixi i entrarà, escollirem una corba senzilla predeterminada, senzilla i definirem la durada de l’animació a 0,3 perquè sigui molt ràpida.
Per a les capes headerMask i mask, utilitzeu una corba de ressort. Per als nostres propòsits, només heu de saber que els valors de la corba de primavera canvien la velocitat i el rebot de l’animació. Els valors de la capa de màscara faran que la seva animació sigui molt més ràpida que headerMask i contingut. Per obtenir més informació sobre la configuració de la corba de primavera, consulteu la documentació de Framer a framerjs.com/docs.
Proveu-ho en un dispositiu mòbil real
Veure el disseny en un dispositiu real és molt més eficaç que utilitzar emuladors i veureu els avantatges del vostre treball. El marcador inclou una funció mirror, que és un servidor integrat que ofereix una URL al vostre prototip a la vostra xarxa local. Simplement visiteu l'URL mitjançant el dispositiu.
Heu après tot el que heu de saber per prototipar els vostres propis dissenys a Framer. A què estas esperant?
Paraules: Jarrod Drysdale
Jarrod Drysdale és autor, consultor de disseny, fabricant de productes digitals. Aquest article es va publicar originalment al número 270 de la revista net.
T'ha agradat això? Llegiu-los!
- Creeu prototips en directe que es puguin fer clic a Sketch
- Com començar un bloc
- Els millors editors de fotos
