Animación

Los 12 principios de la animación son un conjunto de reglas creadas por Disney para la animación de personajes, pero muchos de estos principios son muy útiles para ciertos aspectos de la animación de elementos de nuestras interfaces:

• Anticipación: Vamos a a preparar a los usuarios para la acción que viene a continuación, por ejemplo, antes de desconectar la señal de un teléfono podemos animar el icono del avión y transmitir que no señal durante algún tiempo.
• Estirar y encoger: Nos ayuda a generar drama sobre algún elemento, por ejemplo, para dramatizar la animación de un botón cuando el usuario ha cometido un error o alguna acción incorrecta.
• Entradas y salidas lentas: Nos permite introducir o remover elementos de la plataforma, tal vez conozcas estas animaciones como Fade In y Fade Out.
• Acciones secundarias: Todas las microinteracciones trabajan con este principio, estas animaciones nos ayudan a transmitir o dar información adicional como respuesta a alguna acción de los usuarios.
• Timing: Mientras más detalles añadimos a las animaciones, más rápidas o lentas se pueden percibir. Podemos utilizar estos efectos visuales para transmitir apuro o tranquilidad mientras la plataforma esta cargando.
• Exageración: Así como las acciones secundarias, podemos exagerar los movimientos de nuestros elementos para transmitir alguna sensación, por ejemplo, cuando el usuario quiere eliminar su cuenta.

También vamos a utilizar Animate.css, una librería para trabajar con todo tipo de animaciones sin mucho trabajo, también nos facilita el proceso de documentación de las reglas de animación de nuestro sistema.

Lecturas recomendadas

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. https://www.notion.so/Design-system-1bdbab2c4c354f80944c1fb93d3743ff

https://www.youtube.com/watch?v=uDqjIdI4bF4

Consejos para empezar a animar usando After Effects

Como parte de la clase de animación te quiero contar algunos detalles básicos sobre la animación para que puedas animar tú mismo en cualquier programa.

Para esta sección vamos a ocupar After Effects, puedes bajarlo de Adobe.

Lo primero que tienes que notar en cualquier programa de animación es el timeline (línea de tiempo), este controla el tiempo de animación y te dará la pauta de que es lo que quieres comunicar cuando animas algo en particular.