Empieza con la Animación Web

() translation by (you can also view the original English article)

El movimiento se ha convertido en una parte muy importante del campo del diseño web en los últimos años. El movimiento y la animación añaden capas de dimensión a una interfaz, ayudando al usuario, ofreciendo retroalimentación, satisfacción y más participación al mismo tiempo.

En este artículo, voy a repasar los pasos que forman parte del aprendizaje de la animación para la web, desde qué se trata, hasta transiciones sencillas, animaciones más complejas y recursos útiles. Habrá algunos ejercicios prácticos interactivos para reforzar los puntos aprendidos. Al final, tendrás una idea sólida sobre el panorama actual de la animación web y cómo puedes llegar a dominarla.

Veremos lo siguiente:

¿Qué, y Por qué?
Transiciones CSS
Animación CSS con Keyframes
Movimiento Auténtico
Funciones de Cúbica Bezier (Ritmo)
Librerías y Herramientas CSS
SVG
JavaScript
Prototipos

¿Qué, y Por qué?

La disciplina del diseño web está cambiando continuamente, y un aspecto que ha surgido en los últimos años es la capacidad de animar. Los navegadores se han vuelto más capaces, los procesadores más rápidos, y los dispositivos móviles han allanado el camino para los "gestos": deslizar, pellizcar y presionar.

El movimiento ofrece una serie de cosas que mejoran la experiencia de usuario con las interfaces, incluyendo:

Causalidad: resaltando la acción y la reacción, una cosa causa la otra.
Retroalimentación: indicando al usuario que ha completado una acción (con o sin éxito), como hacer clic en algo o introducir datos en un formulario.
Progresión: ilustrando que una cosa sigue a la otra, los eventos en barras de progreso de carga y en elementos rotatorios son ejemplos perfectos.
Satisfacción: el buen diseño se dice a menudo que es invisible, pero el movimiento bien implementado puede atraer y deleitar a tus usuarios.

El movimiento mejora la experiencia de usuario y da vida a la web. Con todo esto en mente, es importante que, como diseñador de interfaz, tengas en cuenta la animación. ¡Empezemos con los conceptos básicos!

Recursos de Aprendizaje

Why animate? por Donovan Hutchinson
Web Animation at Work por Rachel Nabors

Transiciones CSS

Las transiciones CSS son a menudo una entrada para el diseñador web al mundo del movimiento. Dan instrucciones al navegador para tomar el estado inicial de un elemento, después el estado final, y una suave transición entre los dos. La sintaxis es relativamente directa, se compone de cuatro propiedades y una versión abreviada.

transition-property
transition-duration
transition-timing-function
transition-delay

Empezemos con un botón. En este ejemplo tenemos un botón con algunos estilos de base para que parezca que está un poco elevado respecto a la página. Por defecto, si pasas el cursor sobre él, cambia de color. Además, si haces clic en él, parece que está presionado. Hemos hecho esto usando las propiedades background, position-top y position-left, pero el cambio en cada caso es instantáneo.

Ahora vamos a hacer el efecto más sutil, añadiendo transition al elemento .button. Añadiendo, por ejemplo, transition: all 1s; nos aseguramos de que todos los cambios de las propiedades se realizarán de forma fluida en el transcurso de 1 segundo.

Elimina el comentario de la primera regla en el panel CSS y verás como surte efecto.

Ahora que has visto que funciona, prueba en su lugar a desactivar el comentario de la segunda regla. En el segundo ejemplo, hemos hecho una lista con las propiedades que cambian de forma individual, de este modo podemos definir diferentes velocidades de transición para cada una.

Por último, prueba a desactivar el comentario del tercer ejemplo, donde verás que también se han añadido funciones de ritmo (timing) Estas afectan al ritmo en el que se desarrolla la transición, en breve hablaremos más sobre ello.

Recursos de aprendizaje

Up and Running With CSS Transitions

Animaciones CSS con Fotogramas

Con las transiciones CSS en tu haber, es hora de ir a un nivel superior. La animación CSS con fotogramas (keyframes) nos da mucho más control, permitiendo especificar cambios a lo largo de la línea de tiempo. Para la animación con fotogramas se necesitan dos pasos; definir los propios fotogramas, y asignar la animación al elemento de tu elección.

Pongamos que empezamos con una pelota.

Ahora podemos definir algunos fotogramas, estableciendo un estado from (desde) y un estado to (hasta). Aquí estamos indicando que la propiedad de posición left empezará en el 5%, animando hasta el 85%, moviendo efectivamente la bola a través de la pantalla.

@keyframes move {
    from {
        left: 5%;
    }
    to {
        left: 85%;
    }
}

Puedes ver que hemos anidado from y to dentro de una declaración @keyframes. Y hemos llamado a nuestra animación move. Ahora necesitamos asignar esta animación a nuestra bola, lo cual hacemos así:

1	.ball {
2	animation: 1s move;
3	}

Esto se implementa en su forma más simple y abreviada. Necesitamos definir cuanto tiempo queremos que dure la animación, y qué animación estamos aplicando. Ahora cuando carguemos la demostración, verás que tiene efecto la animación.

Nota: la animación se activa al cargar la página, por lo que tendrás que pulsar el botón rerun en la esquina del pen incrustado para ver que ocurre algo.

Más Control

Yendo más allá de los simples estados from y to, podemos definir puntos a lo largo de la línea de tiempo usando porcentajes. Usando 0% y 100% nos daría exactamente el mismo resultado que antes:

1	@keyframes move {
2	0% {
3	left: 5%;
4	}
5	100% {
6	left: 85%;
7	}
8	}

Vamos a añadir un paso extra en medio, y llevar la bola de nuevo a su posición inicial. También pondremos en infinite el contador de iteraciones, por lo que se mantendrá en un bucle continuo. Edita los valores en el pen de abajo y mira como surten efecto:

Es posible añadir múltiples animaciones a un solo elemento, cambiar la dirección de la animación, y alterar completamente los ritmos. Échale un vistazo a estos recursos para descubrir más!

Recursos de aprendizaje

Up and Running With CSS Keyframe Animations
A Beginner’s Introduction to CSS Animation
The CSS Animations Pocket Guide por Val Head
The UI Animation Newsletter

Movimiento Auténtico

El movimiento le da vida a los objetos, y la diferencia que el movimiento auténtico puede marcar en este aspecto es inmensa. El movimiento le da masa a un objeto, lo sitúa en el espacio, y de repente la física del mundo real se aplica a él. Si un objeto se mueve de forma que nos resulta familiar, es mucho más probable que nos conectemos emocionalmente con el. Es la diferencia entre un círculo moviéndose arriba y abajo, y una pelota que rebota.

La diferencia entre estas dos es clara (a pesar de que el rebote está lejos de ser perfecto). Aprender a dar autenticidad a tu animación es crucial.

"La mayor parte de la acción natural tiende a seguir una trayectoria en forma de arco, y la animación debería adherirse a este principio siguiendo 'arcos' implícitos para obtener mayor realismo." – Twelve Basic Principles of Animation

Recursos de aprendizaje

Material motion de Google’s Material Design Guidelines
Haciendo más atractivas tus animaciones en la web
Twelve Basic Principles of Animation de Disney

Funciones Cúbica de Bézier (Ritmo)

Ya hemos visto la propiedad "easing" un par de veces en este artículo; es el ritmo de velocidad al que algo se mueve, y puede expresarse como una curva a lo largo de dos ejes. En CSS hay algunas funciones de ritmo incluidas que puedes utilizar con sus palabras clave (linear, ease-in, ease-in-out etc.) pero puedes describir estos ritmos de forma más precisa con una función cúbica de bézier, que tiene el siguiente aspecto:

A medida que el tiempo se mueve constantemente a lo largo del eje x, la velocidad del movimiento se acelera y se ralentiza a lo largo del eje y. Este ejemplo de arriba es usado en nuestra anterior bola que rebota; puedes imaginar la bola moviéndose rápidamente hacia arriba, luego ralentizándose mientras alcanza la cima. Echa un vistazo a esta curva en cubic-bezier.com para ayudarte a visualizarla.

La curva está controlada por dos manejadores (con los que estarás familiarizado si alguna vez has utilizado la herramienta pluma en Adobe Illustrator o Sketch) y la función cúbica de bézier que podemos usar en CSS refleja estos manejadores. Por tanto, nuestra función se ve así:

1	cubic-bezier(.1,.25,.1,1)

Hay cuatro valores, cada uno variando (para simplificar) entre 0 y 1. Representan:

la coordenada x del manejador 1 (.1)
la coordenada y del manejador 1 (.25)
la coordenada x del manejador 2 (.1)
la coordenada y del manejador 2 (1)

Entender cómo funcionan las funciones de bézier mejorará radicalmente tus animaciones, sobre todo si tienes como objetivo el movimiento auténtico.

Recursos de aprendizaje

Librerías y herramientas de CSS

Codificar animaciones CSS atractivas a mano puede ser duro, pero existen una serie de librerías disponibles que realizan el trabajo pesado por ti. Animate.css, por Dan Eden, es una hoja de estilos llena de animaciones basadas en fotogramas (keyframes), todas con nombres de clases personalizadas, lista para su uso.

Recursos de aprendizaje

Mas librerías CSS

SVG

SVG (Scalable Vector Graphics o Gráficos Vectoriales Escalables) se han convertido en el mejor amigo del diseñador web en los últimos años, proporcionándonos gráficos nítidos, páginas más ligeras y elementos que se pueden animar. Algunas de las cosas que hemos analizado pueden aplicarse directamente a los elementos SVG, pero muchas propiedades se comportan de forma diferente.

Aquí tenemos un SVG en línea con una transición aplicada al color al pasar el cursor por encima. Sin embargo, notarás que estamos utilizando la propiedad fill, no la background-color como sería de esperar con un elemento HTML.

SVG se puede animar con CSS como hemos visto en el resto de este articulo. Si puedes transformarlo o trasladarlo con HTML, puedes hacer los mismo con SVG.

Pero SVG también se puede manipular a través de SMIL (Synchronized Multimedia Integration Language o Lenguaje de Integración Multimedia Sincronizada) ) que te permite usar cosas como el elemento animate, directamente dentro del SVG. Fíjate en este círculo SVG, moviéndose a través de la pantalla:

Este es un círculo que contiene un animate especificando qué atributo animar (en este caso la coordenada cx), desde una posición de 50px hasta 400px, una duración de 2 segundos, y repitiéndose indefinidamente.

1	<circle cx="0" cy="50" r="50" fill="#2098d1">
2	<animate attributeName="cx" from="50" to="400" dur="2s" repeatCount="indefinite" />
3	</circle>

SMIL es un conjunto de herramientas muy potente, empieza a leer a continuación!

Recursos de Aprendizaje

¿Te gusta la idea de animar SVG pero no estás seguro de qué animar? Echa un vistazo a vector illustration services en Envato Studio y mira las ofertas!

Characters Elements and Object ready for Video Animation — Personajes, Elementos y Objetos listos para la Animación en Vídeo.

JavaScript

Muchos desarrolladores front-end primero juegan con JavaScript (o jQuery) añadiendo animación a las páginas web. Allí donde el soporte para las alternativas CSS es incompleto, JS es una buena apuesta.

La librería jQuerys UI contiene una serie de ayudas para la interfaz de usuario, incluyendo el método effect(), que se muestra a continuación (selecciona un efecto de la lista desplegable y observa cómo se aplica al contenido:

Más allá de esto, JavaScript (en las manos adecuadas, no las mías) puede ofrecer animación seria, y desde que Adobe Flash renunció oficialmente han surgido algunas librerías de JavaScript excelentes. La Plataforma de Animación de GreenSock (GSAP) es, sin duda, la más potente y ofrece a los desarrolladores un conjunto completo de herramientas de línea de tiempo y de interpolación.

Echa un vistazo a nuestro beginner’s course y comprueba qué tal te va con GSAP!

Recursos de Aprendizaje

Prototipos

Los días de entregar diseños de producto estáticos han quedado atrás, las imágenes y los diagramas de flujo no transmiten suficiente información. Hoy en día los clientes inteligentes quieren ver y sentir lo que estás diseñando, experimentar el movimiento, por lo que los prototipos responden a muchas más preguntas.

"Si una imagen vale más que 1000 palabras, un prototipo vale más que 1000 reuniones." —dicho en @ideo
— John Maeda (@johnmaeda) Octubre 5, 2014

Los prototipos pueden ser muy básicos, o reflejar con bastante precisión el producto final, pero dondequiera que se sitúen dentro de esta escala, se deben crear de manera eficiente. En lo que respecta al movimiento y la animación existen una serie de aplicaciones que te ayudan a comunicar tus diseños.

Adobe Animate es Flash para la próxima generación, ofreciendo herramientas avanzadas de animación. Adobe After Effects es una herramienta de producción de vídeo, pero también ofrece movimiento avanzado basado en la línea de tiempo. Luego tenemos aplicaciones más simples, como Principle para Mac, e incluso Keynote:

Experimento de Movimiento de Gráficos con Keynote, por Linda Dong.

Una vez que el diseño de movimiento se ha convertido en una parte de lo que haces, encontrar las herramientas adecuadas para mostrarlo al mundo, es un paso importante!

Recursos de Aprendizaje

Conclusión

¡Y ya lo tenemos! Esta guía debería haberte dado una sólida comprensión del panorama actual de la animación web. Con todos estos recursos de aprendizaje en tu haber estarás armado con todo un nuevo conjunto de habilidades para explorar el mundo del diseño de movimiento.

Espero que lo hayas encontrado útil. Por favor, comparte tus propios consejos y recursos en los comentarios de abajo, o en el Envato community forum.