<aside> 💡 Animación es un término general que engloba todo el campo de elementos en movimiento (como imágenes o texto). Los gráficos de movimiento son un tipo de animación que describe el diseño gráfico en movimiento o animado. Las animaciones consisten en conjuntos de fotogramas que crean una ilusión de movimiento cuando se unen.

</aside>

Las animaciones pueden agregar carácter a tus diseños y mejorar la usabilidad al proporcionar retroalimentación a los usuarios sobre sus acciones. Comprender los conceptos básicos de la teoría de la animación es el primer paso para agregar movimiento de manera eficiente a tus diseños.

Las animaciones pueden ser entretenidas y encantadoras, pero exagerarlas es fácil. Algunas personas pueden encontrar un movimiento adicional molesto e intrusivo, y puede influir en su experiencia e impresión general de un producto.

Principios

Animaciones

Una animación es una serie de imágenes estáticas enlazadas para imitar el movimiento del mundo real. Su función principal es reflejar el estado del sistema y proporcionar retroalimentación sobre las acciones de los usuarios.

En general, hay 2 posibles desencadenantes para las animaciones:

• Cuando los usuarios realizan una acción. Por ejemplo, cuando los usuarios presionan un botón, aparece un loader para indicar que la acción ha sido registrada.
• Cuando cambia el estado del sistema. Por ejemplo, una vez que se lanza una aplicación, aparece una animación de bienvenida.

En general, la animación en el diseño mejora la presentación y la interactividad de un producto. Sin embargo, la moderación es clave. Algunos usuarios pueden encontrar el movimiento adicional molesto e intrusivo, lo que puede influir negativamente en su experiencia y en su impresión del producto.

Cronología de animación (timeline)

Una línea de tiempo es un componente fundamental del software de animación y herramientas, utilizado para organizar y manipular varios elementos para crear la ilusión de movimiento. Piénsalo como un lienzo digital donde puedes organizar y controlar diferentes elementos a lo largo del tiempo.

Una línea de tiempo típicamente consiste en varias capas, cada una representando un aspecto diferente de la animación, como el movimiento de personajes, cambios de fondo, efectos especiales y sonido. Cada capa contiene fotogramas clave, que son puntos específicos en el tiempo donde ocurre un cambio. Estos fotogramas clave definen el estado o la posición de los elementos en ese momento particular.