Codeando Animaciones
Por Facundo Pepe
@turbofacuAnimación para el usuario
Tipos de animación
Every move has it's purpose
En un sitio web tenemos muchos recursos para comunicarnos con el usuario. Las animaciones forman parte de estos recursos y para lograr entablar una comunicación con el usuario tenemos los siguientes tipos de animaciones:
- - Animación de elemento de interfaz
- - Animación de espera
- - Animación de insinuación
- - Animación de storytelling
- - Animación de onboarding
Es importante que entendamos que la animación no debe ser utilizada a la ligera ya que si no nos encontraremos animando por placer y no por función, aunque algunas veces la función de una animación puede ser el impacto.
Animación de elemento de interfaz
Show some action!
La función de esta animación es hacer que el usuario pueda identificar los elementos de una UI como interactivos.
Animación de espera
Stop the users anxiety
La función de esta animación es la de dar feedback al usuario. Nos permite avisarle que algo está sucediendo en nuestro sitio.
Animación de insinuación
Guide the user's eye
La función de esta animación es la de indicar al usuario que es importante que note algo de nuestra interfaz.
Animación de storytelling
Let's hear a story
La función de esta animación es, mediante el uso del scroll del browser, contarle una historia al usuario.
Acá tenemos un ejemplo de Apple.
Animación de onboarding
Teach the user how to use it
La función de esta animación es la de enseñarle al usuario como funciona una feature de nuestro sitio.
Animación es secuencia
Transitions != Keyframes
The power to know when to use each one
Las transiciones son usadas cuando debemos animar un elemento en estado A para llegar al estado B. Son animaciones simples y que implican el cambio de una propiedad o más propiedades una sola vez.
Los keyframes son usados cuando debemos animar un elemento en estado A para llegar al estado E pasando por diferentes estados (B, C y D) hasta llegar al final. Son secuencias de animaciones concatenadas en una linea de tiempo destinadas a transitar un camino para llegar al punto final de la animación.
Transitions != Keyframes
The are lot's of forks down this path
Transitions != Keyframes
The proper grammar
transition: property duration easing delay, property duration easing delay;
transition: all 250ms, transform 500ms cubic-bezier(0.25, 0.1, 0.21, 1.53) 50ms;
- property: Propiedad a transicionar
- duration: Duración de la transición
- easing: Física de la transición
- delay: Tiempo de espera antes de empezar la transición
Transitions != Keyframes
The proper grammar
animation: name duration easing delay loop fill;
animation: move 250ms linear 1 forwards;
- name: Nombre de la animación
- duration: Duración de la animación
- easing: Física de la animación
- delay: Tiempo de espera antes de empezar la animación
- loop: Cantidad de veces a repetir la animación
- fill: Estado final de la animación
Duraciones
Don't overextend yourself
La duración es la cantidad de tiempo que va a tardar nuestra animación en completarse.
En un sitio web o una aplicación es importante que sean cortas, ya que el periodo de atención de los usuarios es bastante corto. Salvo que estemos haciendo un sitio 100% basado en animaciones (por lo cual el usuario sabría que esperar de nuestro sitio), es importante que nuestras animaciones no duren más de 1 segundo.
Esto es crucial para animaciones repetitivas que tengamos en nuestro sitio/app. Imaginen una animación de like que tarda más de 4 segundos, ningún usuario/a la vería completa porque ya estaría likeando otro post o foto.
La duración también nos puede servir para hacer que un elemento de nuestra UI se vea mucho más pesado cuando se está moviendo que otro. Si un cuadrado tarda más en dar la vuelta es probable que ese sea más pesado.
Easings
Watch out for the real world
Ningún ningún objeto pasa de 0 a 100 km/h en 0 segundos, todos los objetos tienen que tener un lapsus hasta llega a la velocidad máxima y hasta parar. Para realizar este trabajo tenemos las curvas de easing a nuestra disposición.
Utilizar easings nos permite especificar la velocidad con la cual nuestra animación va a progresar en distintas etapas de una línea de tiempo. Estas curvas sirven para que nuestra UI se vea más realista, permitiendo que nuestros elementos se comporten como un objeto del mundo real.
En CSS podemos usar easings predefidinos o podemos definir nuestras propias curvas de Cubic Bézier para llegar exactamente a la animación que queremos.
Easings
Control the time with your code!
Performance
Animations can also ruin the day
Una de las tareas más importantes que realiza el navegador al entrar a un sitio web es en convertir el DOM (Document Object Model), nuestro HTML, y el CSSOM (CSS Object Model), nuestro CSS, en pixeles renderizados en pantalla.
Este proceso es realizado por la GPU (Graphics Processing Unit), la placa de video de la computadora. Se llama paint (al primer pintado) y repaint cuando por ejemplo, scrolleamos y el navegador tiene que volver a pintar.
Cuanto menos tengamos que utilizar la GPU, más rápido cargará nuestro sitio. Esto es valido tanto para animaciones como para HTML en general. Por ejemplo si en nuestro HTML o como background-image de CSS utilizamos un SVG con muchos nodos (una textura), nuestro sitio web tendrá problemas de performance ya que al navegador le va a costar mucho procesar tantos nodos.
Propiedades costosas
Use your resources wisely!
En CSS hay ciertas propiedades que son muy costosas para la GPU. Estas producen mucho paint o repaint en el browser ya que pueden cambiar la geometría de nuestra web (el layout). Es importante fijarnos en que propiedades estamos utilizando en nuestro código ya que muchas de ellas no nos van a permitir unos fluidos 60fps
Siempre que puedan utilicen transforms en vez de propiedades como width, height o positions.
*Para el siguiente slide activar la función de Paint Flashing del navegador Chrome. Esta función se encuentra en el Inspector en Options > More Tools > Rendering > Paint Flashing *
Propiedades costosas
Always look for 60fps!
Propiedades costosas
It matters how you move it
will-change
Not to be confused with Will Smith
La propiedad will-change nos permite avisarle al navegador los cambios que va a sufrir un elemento de nuestra UI así, antes de que suceda la animación, preparar todas las optimizaciones para que esta se vea lo mejor posible.
Este tipo de optimizaciones mejora la respuesta de un sitio web haciendo que el browser trabaje antes de que las animaciones se produzcan.
Es importante no utilizar will-change todo el tiempo, solo cuando creamos que es realmente necesario ya que sino estaríamos forzando al browser a trabajar antes de tiempo, todo el tiempo.
*Muchas veces nuestra animación va a producir flickers o comportamientos extraños, para intentar solucionar esto podemos utilizar translateZ que fuerza en rendering de la GPU de la compu.
CSS vs Javascript
Round One: Fight!
La regla de oro es: Si podes solucionar la animación con CSS, utilizá CSS.
Animaciones simples como cambios de estado de un botón o abrir un menú podemos hacerlas con CSS.
Usaremos keyframes de CSS para generar animaciones complejas y cuando no podamos recurriremos a Javascript.
Javascript nos sirve también para controlar los estados de la animación mediante el agregado de clases a nuestros elementos HTML y aunque la animación siga siendo CSS.
Estados de la animación
Learning to go both ways
Las animaciones tienen tres estados, dos son estáticos y uno animado.
- El elemento previo a la animación.
- El elemento siendo animado.
- El elemento con la animación terminada.
Es importante saber que no siempre nuestras animaciones van a funcionar bien de ida y de vuelta. Muchas veces vamos a tener que hacer el proceso contrario utilizando delays para controlar cuando queremos que suceda cada cambio de propiedad en el caso de las transiciones y keyframes distintos en el caso de las animaciones.
Con cambios de clases y hovers podemos pisar la transición/animación predefinida del elemento y luego al sacar la clase o cambiar el estado volver a la transición/animación predefinida.
Estados de la animación
Back and forth
SVG
Welcome to the world of vectors
SVG
Super Vector Powered Graphics
SVG (Scalable Vector Graphics) es un formato de gráficos vectoriales bidimensionales, en formato XML.
La gran ventaja de este formato es su pequeño tamaño, no pierden calidad si son agrandados y son recomendados por la W3C :)
Todo elemento y atributo en un archivo SVG es animable con CSS de la misma forma que animamos elementos HTML.
SVG
Bring your own map!
En SVGS la propiedad transform-origin no toma el valor correcto si es declarada en formato texto.
Para sacar el centro de un SVG podemos usar el siguiente código en la consola:
const id = document.getElementById('id');
const rect = id.getBBox();
const x = rect.x + rect.width / 2;
const y = rect.y + rect.height / 2;
SVG
Draw draw draw
Los SVGS nos permiten animar la propiedad stroke de sus elementos generando así un efecto de dibujando.
SVG
Someone smart thought this
Para animar los strokes de un SVG debemos utilizar las siguientes propiedades:
stroke-dashoffset: la distancia entre punto y punto de nuestra línea punteada (en valores numéricos)
stroke-dasharray: el largo de cada punto de nuestra línea punteada (en valores numéricos)
Con stroke-dashoffset vamos a hacer que la distancia entre cada punto de nuestra línea punteada sea igual al largo del elemento a animar.
Con stroke-dasharray vamos a hacer que el largo cada punto de nuestra línea punteada sea igual al largo del elemento a animar.
Al hacer esto estaremos "desdibujando" la figura y no veremos stroke alguno ya que el largo y el offset de cada punto es igual al largo del elemento.
Para dibujarlo solo tenemos que animar a 0 la propiedad stroke-dashoffset!
Este ejemplo de CSS Tricks lo explica muy bien.
*El punto de inicio del dibujado será siempre el primer punto que se dibujó en el software de diseño.
SVG
IT'S ALIVE!
Las posibilidades con SVG son infinitas, por ejemplo acá tenemos a Robi animado!
