Contenido
- Importar desde Sketch
- Crea capas de máscara y avatar
- Definir estados
- Animar entre estados
- Pruébelo en un dispositivo móvil real
El razonamiento detrás de la creación de prototipos de diseño no es nuevo, es el mismo que todos los rumores sobre el diseño en el navegador. Cuando ves un diseño en su contexto real, es totalmente diferente. Usted toma mejores decisiones cuando no tiene que hacer suposiciones sobre cómo funcionará y se sentirá una interfaz. Esto puede parecer un trabajo adicional, pero los conocimientos que puede obtener al ver que su diseño funciona son invaluables.
Framer es una nueva herramienta de creación de prototipos basada en código. Puede crear maquetas en Sketch (o Photoshop) como lo haría normalmente, e importarlas a Framer. Luego, escriba un poco de CoffeeScript y podrá lograr mucho.
Voy a enseñarle los conceptos básicos de la creación de prototipos en Framer, utilizando el ejemplo de un prototipo de aplicación de iOS con dos vistas: una vista de perfil y una vista ampliada de la imagen del avatar del usuario. Crearemos un prototipo de cómo se abrirá y cerrará la vista de fotos ampliada, y también la animaremos. Vea la demostración en línea aquí (para ver el código fuente, simplemente haga clic en el ícono en la esquina superior izquierda). También necesitará la prueba gratuita de Framer, que puede obtener en framerjs.com.
Importar desde Sketch
El primer paso es importar capas de Sketch a Framer. Simplemente haga clic en el botón Importar en Framer mientras el diseño está abierto en Sketch y elija el archivo correcto en el cuadro de diálogo que sigue. Framer importará automáticamente imágenes de cada capa y las hará accesibles mediante un código como este:
sketch = Framer.Importer.load "importado / perfil"
Utilice esa variable para acceder a las capas importadas. Por ejemplo, para hacer referencia a la capa llamada "contenido" en el archivo de Sketch, debe escribir sketch.content en Framer.
Crea capas de máscara y avatar
La función principal de este prototipo es expandir la imagen del avatar cuando se toca y luego cerrarla cuando se vuelve a tocar. Primero, crearemos dos capas de máscara: una máscara anidada o una máscara dentro de otra máscara. Animaremos ambas máscaras a la vez para crear un efecto de apertura y cierre agradable y sutil. La capa headerMask recortará la foto del avatar a un rectángulo cuando esté expandida, y la capa de máscara la recortará a un pequeño círculo en la vista de perfil.
Crea la capa headerMask así:
headerMask = new Layer width: Screen.width, height: 800 backgroundColor: "transparente"
La primera línea de código crea y nombra la nueva capa. Luego, usando la sintaxis de sangría de CoffeeScript, establecemos las propiedades de ancho, alto y fondo. Usaremos un fondo transparente para que las capas inferiores se muestren cuando se expande la foto del avatar.
A continuación, cree la capa de máscara:
mask = new Layer width: 1000, height: 1000 backgroundColor: "transparente", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, originY: 0
Creamos una nueva capa y establecemos propiedades de la misma manera. El borderRadius grande hace que esta capa sea un círculo. Colocamos la capa de máscara de modo que se superponga a la capa de encabezado, que se importó de Sketch. También lo reduciremos al 20 por ciento, o al 0,2. Un origen Y de cero establece el punto de anclaje o registro de la imagen en el borde superior.
La propiedad restante, superLayer, establece la capa headerMask que creamos como padre de esta nueva capa. Así es como funciona el enmascaramiento en Framer. Simplemente establezca la propiedad superLayer y la capa principal enmascarará al niño.
A continuación, debemos crear el gráfico de avatar y colocarlo dentro de esas nuevas máscaras. Para hacer zoom y animar los límites de recorte, crearemos manualmente la capa de avatar. Copie una foto en la subcarpeta "imágenes" de la carpeta del proyecto. Luego crea una capa usando esa imagen:
avatar = nueva Imagen de capa: "images / avatar.png" width: mask.width, height: mask.height superLayer: mask, force2d: true
Observe que configuramos la supercapa del avatar para que sea la capa de máscara. Ambos ahora están anidados dentro de headerMask. También configuramos el ancho y el alto para que la imagen llene completamente el área enmascarada.
Por último, crearemos una variable para almacenar la posición Y de la máscara que usaremos para la animación. Lo centraremos horizontalmente, ya que es más grande que la pantalla.
maskY = mask.y mask.centerX ()
Definir estados
El primer paso para crear una animación es definir los estados inicial y final. En Framer, los estados son como fotogramas clave escritos en código. Un estado es solo una colección de propiedades. Cada capa tiene un estado predeterminado. Para este prototipo, ese valor predeterminado servirá como punto de inicio para la animación, por lo que solo necesitamos establecer un segundo estado para cada capa.
La sintaxis de los estados es muy sencilla. Haga referencia a la capa, use el método layer.states.add () y luego enumere las propiedades que se incluirán.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
El segundo estado de la capa de contenido, que se importó de Sketch y contiene todos los demás elementos de la pantalla de perfil, debe ser completamente transparente. De esta manera, cuando el avatar se expanda, tendremos un fondo negro y los íconos y elementos importados restantes se mostrarán.
La segunda línea de código crea un estado para headerMask, que simplemente lo moverá hacia abajo a una posición Y de 120. Esto permitirá que el título y el botón de cierre se muestren en la parte superior de la pantalla cuando se amplíe la foto del avatar. También animará los límites de recorte de la foto del avatar.
Por último, un nuevo estado para la capa de máscara lo escalará y lo moverá hacia arriba, usando la variable maskY que creamos anteriormente. Debido a que el origen Y (o punto de anclaje) de la capa de máscara es su borde superior, necesitamos moverlo hacia arriba en 420 píxeles para que el centro de la imagen sea visible.
Animar entre estados
Para animar entre los estados predeterminados y los nuevos que acabamos de crear, solo necesitamos cuatro líneas más de código. Configuraremos un controlador de clics en la capa de avatar. Cuando un usuario lo toca en la pantalla de perfil, pasaremos a la vista expandida por estados de ciclo. Cuando se toca de nuevo, regresaremos a los estados predeterminados para que vuelva a ser un círculo pequeño. Las mismas líneas de código manejan ambas interacciones:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
La primera línea de este bloque configura el controlador de clic en la capa de avatar. Cada vez que se pulsa, no importa cómo se recorta o qué tamaño tiene, se ejecutarán las declaraciones que siguen.
Luego, simplemente hacemos referencia a cada capa y usamos el método layer.states.next () para alternar estados. Cuando usa layer.states.next (), Framer usará su configuración de animación interna predeterminada. Esto es extremadamente conveniente, pero puede crear animaciones aún mejores afinando las curvas de animación.
Cuando use estados como estamos aquí, puede cambiar fácilmente cada curva de animación por separado usando la propiedad layer.states.animationOptions. Con solo tres pequeños ajustes, la animación se siente completamente diferente:
sketch.content.states.animationOptions = curva: "facilidad", tiempo: 0.3 headerMask.states.animationOptions = curva: "primavera (150, 20, 0)" mask.states.animationOptions = curva: "primavera (300, 30, 0) "
Para la capa de contenido que se está desvaneciendo y entrando, elegiremos un ajuste preestablecido de curva simple, facilidad y configuraremos la duración de la animación en 0.3 para que sea muy rápido.
Para las capas headerMask y mask, use una curva de resorte. Para nuestros propósitos, solo necesita saber que los valores de la curva de resorte cambian la velocidad y el rebote de la animación. Los valores de la capa de máscara harán que su animación sea mucho más rápida que headerMask y content. Para obtener más detalles sobre la configuración de la curva de resorte, consulte la documentación de Framer en framerjs.com/docs.
Pruébelo en un dispositivo móvil real
Ver el diseño en un dispositivo real es mucho más efectivo que usar emuladores, y verá los beneficios en su trabajo. Framer incluye una función de espejo, que es un servidor integrado que ofrece una URL a su prototipo a través de su red local. Simplemente visite la URL con su dispositivo.
Ha aprendido todo lo que necesita saber para crear prototipos de sus propios diseños en Framer. ¿Que estas esperando?
Palabras: Jarrod Drysdale
Jarrod Drysdale es autor, consultor de diseño y creador de productos digitales. Este artículo se publicó originalmente en el número 270 de la revista net.
¿Me gusto esto? ¡Lee esto!
- Cree prototipos en vivo en los que se pueda hacer clic en Sketch
- Cómo iniciar un blog
- Los mejores editores de fotos
