Animations

VeriTran

Jorge A López

Definición Funcional Animaciones

Presentación de propuesta para la incorporación de animaciones en el producto móvil de VeriTran

Framer

Herramienta de Prototipado

Que es?

Framer es una herramienta de diseño para Mac. Esta basado en la libreria Framer.js, un Framework open Source usado para la creacion de prototipos de alta fidelidad. Se puede utilizar para diseñar animaciones e interacciones sin limitaciones haciendo uso de "Spring Physics" para dar mas realismo y suavidad.

Como funciona?

Framer es una herramienta que permite la creacion de animaciones por medio de "Código", utiliza un motor de animaciones muy parecido al de iOS, lo que permite reutilizar en gran medida la parametria generada

Parámetros para lograr animaciones en Framer

Framer to Xcode (Handoff)

 

Animaciones en las plataformas móviles

  • Position: Permite desplazar un objeto (Animaciones de translacion)
  • Scale: Permite escalar un objeto, es decir aumentar o disminuir su tamaño inicial. (Animaciones de escalamiento)

Ejemplo:

Animaciones en las plataformas móviles

  • Rotation: Permite "rotar" un objeto (Animaciones de Rotación)
  • Alpha: Permite modificar la opacidad de un objeto. (Animaciones tipo FadeIn, Fade Out)

Ejemplo:

Ejemplo de animaciones que se pueden lograr

Definición funcional animaciones VeriTran

Con la definición funcional que se detalla en el documento "Propuesta_definicion_funcional_animaciones.pdf" se podrá lograr animaciones como las siguientes:

Formularios con sus componentes animados tanto al momento de cargarse la pagina, como al interactuar con ellos.

Otro ejemplo de formulario animado al cargarse.

Ejemplo de menú.

Otro ejemplo de carga de menú al iniciarse.

Animaciones complejas y/o efectos

Posibles animaciones, pendiente validar pruebas de concepto

Otras herramientas interesantes para tener en cuenta por parte del equipo de diseño