Post on 20-Jul-2020
Prototipos interactivoscon FramerJS
por Ismael González
miércoles, 11 de diciembre de 13
1 Estructura de la presentación
FramerJSRecorrido básico
Ejemplos realesFácil, medio y complejo
PreguntasBibliografía y enlaces
miércoles, 11 de diciembre de 13
2 About me - Ismael González
Pero antes...
miércoles, 11 de diciembre de 13
2 About me - Ismael González
He trabajado en:
Diseño y front-end en meets
-FirefoxOS-Tuenti-Ideup!-ELPAIS.com
miércoles, 11 de diciembre de 13
3 About meetsapp.com
meets
miércoles, 11 de diciembre de 13
3 About meetsapp.com
meets es la forma mas rápida, divertida y eficaz para hacer planes con tus amigos desde el móvil“ ”
miércoles, 11 de diciembre de 13
4 About meetsapp.com
miércoles, 11 de diciembre de 13
4 About meetsapp.com
miércoles, 11 de diciembre de 13
4 About meetsapp.com
miércoles, 11 de diciembre de 13
5 About meetsapp.com
miércoles, 11 de diciembre de 13
5 About meetsapp.com
miércoles, 11 de diciembre de 13
5 About meetsapp.com
miércoles, 11 de diciembre de 13
6 About meetsapp.com
meets
miércoles, 11 de diciembre de 13
6 About meetsapp.com
meets¡es gratis!
miércoles, 11 de diciembre de 13
7 FramerJS
Vamos al lío
miércoles, 11 de diciembre de 13
8 FramerJS, introducción
¿Qué es FramerJS?
miércoles, 11 de diciembre de 13
8 FramerJS, introducción
A prototyping tool for animation and interaction on desktop and mobile“ ”
miércoles, 11 de diciembre de 13
8 FramerJS, introducción
A prototyping tool for animation and interaction on desktop and mobile“ ”Herramienta de prototipado de animaciones e interacciónes para escritorio y móvil“ ”
miércoles, 11 de diciembre de 13
9 FramerJS, introducción
¿Por qué usarlo?
miércoles, 11 de diciembre de 13
9 FramerJS, introducción
Es necesario poder crear prototipos navegables para móvil que nos ayuden a validar y testear las decisiones que tomamos
miércoles, 11 de diciembre de 13
10 FramerJS, introducción
¿Cómo funciona?
miércoles, 11 de diciembre de 13
10 FramerJS, introducción
FramerJS, es una librería de Javascript y una aplicación para escritorio que se integra con Photoshop
miércoles, 11 de diciembre de 13
11 FramerJS, introducción
Integración con Photoshop
FramerJS en “crudo”
miércoles, 11 de diciembre de 13
12 FramerJS, integración con Photoshop
miércoles, 11 de diciembre de 13
13 FramerJS, integración con Photoshop
PSD[“mi-capa”]
miércoles, 11 de diciembre de 13
14 FramerJS, Photoshop VS “en crudo”
con Photoshop- Exporta la imágenes y las posiciona- Genera el objeto PSD en Javascript
“en crudo”- Exporta la imágenes y las posiciona- Genera el objeto PSD en Javascript
miércoles, 11 de diciembre de 13
15 FramerJS, API
API
miércoles, 11 de diciembre de 13
Contenedores o “Views”
Presentación y posición
Animaciones
16 FramerJS, API
miércoles, 11 de diciembre de 13
Contenedores o “Views”
17 FramerJS, API - Views
miércoles, 11 de diciembre de 13
18 FramerJS, API - Views
ViewEl contenedor básico
ScrollViewUna View que tiene scroll
ImageViewUna View que muestra una imagen
miércoles, 11 de diciembre de 13
19 FramerJS, API - Presentación y posición
Presentación y Posición
miércoles, 11 de diciembre de 13
20 FramerJS, API - Presentación y posición
View.x View.y
xy
xy
miércoles, 11 de diciembre de 13
21 FramerJS, API - Presentación y posición
View.width View.height
miércoles, 11 de diciembre de 13
22 FramerJS, API - Presentación y posición
View.visible
miércoles, 11 de diciembre de 13
23 FramerJS, API - Presentación y posición
View.opacity
miércoles, 11 de diciembre de 13
24 FramerJS, API - Presentación y posición
View .rotation
miércoles, 11 de diciembre de 13
25 FramerJS, API - Presentación y posición
View .scale
miércoles, 11 de diciembre de 13
26 FramerJS, API - Presentación y posición
View .html
View .style
View.destroy()
miércoles, 11 de diciembre de 13
27 FramerJS, API - Presentación y posición
View .animate({properties: {
opacity: 1,scale: 1
},curve: “ease-out”,time: 200
})
miércoles, 11 de diciembre de 13
28 FramerJS, ejemplos
Vamos con los ejemplos
miércoles, 11 de diciembre de 13
29 FramerJS, ejemplo-1
Ejemplo-1Trabajamos sobre app.js
PSD[“mi-capa”]
new View(config)
utils.delay(time, function)
Bezier y Spring
miércoles, 11 de diciembre de 13
30 FramerJS, ejemplo-1
BézierUna curva cúbica Bézier está definida por 2 puntos en el espacio, x1, y1, x2, y2 que definen la forma de una función de este tipo
SpringSon valores "naturales" que conforman una ecuación que da como resultado un movimientoTensión, fricción y velocidad
miércoles, 11 de diciembre de 13
31 FramerJS, ejemplo-1
BézierSe usa en CSS, cubic-bezier(0.25, 0.1, 0.25, 0.1)
http://matthewlein.com/ceaser/
Mas info en Mozilla Developer Network
miércoles, 11 de diciembre de 13
32 FramerJS, ejemplo-1
SpringTensión: Rigidez del objeto
Fricción: Esfuerzo necesario para mover el objeto
Velocidad: Velocidad inicial del objeto
Ejemplos de valores Spring con FramerJS
http://physics.info/springs/
miércoles, 11 de diciembre de 13
33 FramerJS, ejemplo-2
Ejemplo-2Capas ocultas no se exportan
No hay acceso por nombre asubViews
De “home” a “create”
Añadir html a un View
miércoles, 11 de diciembre de 13
34 FramerJS, ejemplo-3
Ejemplo-3ScrollView desde Photoshop
Hidden feature “draggable”
Exportar animaciones
Preload de imágenes
miércoles, 11 de diciembre de 13
35 Bibliografía
FramerJS website
FramerJS Overview video (25min)
FramerJS Spring examples
FramerJS FaceBook group
FramerJS Photoshop integration on Windows
Animation principles in UI Design
Draggable elements in FramerJS
12 principios básicos de la animación (Disney)
miércoles, 11 de diciembre de 13
36 Bola extra
SpringDocumentacióniOS
Bezier animations, CSS, iOS y AndroidCSS
Mozilla Developer NetworkGenerador visual
iOSApple developer centerSmooth and custom animations on iOS
AndroidAndroid developer centerStackoverflow thread
miércoles, 11 de diciembre de 13
37 Preguntas
¿Preguntas?meetsapp.com/talks/framerjs
@basiclines
@meetsapp
miércoles, 11 de diciembre de 13
38 Thx!
GraciasWow!
<3
FramerJSThx!
miércoles, 11 de diciembre de 13