TEORÍA BÁSICA
DE ANIMACIÓN WEB

Hay animaciones funcionales que hacen que la interfaz sea más intuitiva y fácil de usar. Este tipo de animación se utiliza en interfaces de productos y aplicaciones móviles. Y la animación decorativa, que se utiliza sobre todo en páginas de aterrizaje o proyectos especiales y sirve para atraer la atención del espectador, hacer el proyecto más interesante y ayudar a evocar ciertas emociones.

La velocidad de animación refleja la relación entre la distancia recorrida por un elemento y el tiempo que tarda en hacerlo. La velocidad también incluye todos los cambios que experimenta el elemento de principio a fin. Este es uno de los componentes clave de la animación, ya que es responsable de la dinámica general y del estado de ánimo que intentas crear. Hacer animaciones es un proceso bastante creativo, te darás cuenta rápidamente de que no es tan diferente de dirigir tu propia película.

A la hora de diseñar una animación, es importante pensar en:

• Cuánto durará
• La velocidad a la que se produce el efecto de animación
• A qué velocidad el elemento iniciará y finalizará el movimiento

¿Qué duración debes elegir para que la animación tenga un aspecto cuidado? No hay una respuesta exacta. Es importante no mantener al usuario esperando el resultado del movimiento, pero tampoco hacer la animación demasiado rápida. El espectador debe tener tiempo para entender dónde apareció el elemento en la pantalla y cómo llegó a un nuevo lugar. En general, la animación debe parecer natural.

Las animaciones más dinámicas son adecuadas para la aparición de elementos pequeños, como textos, listas, tarjetas o botones. Los elementos grandes suelen animarse con más suavidad. La duración también depende del espacio que ocupe la animación. La alta velocidad es más adecuada para micromovimientos, porque cuanto mayor es la velocidad, más atención requiere, distrayendo al usuario del resto del contenido.

La distancia de movimiento en la animación web suele ser corta:

• Elementos reveladores de la transparencia (tarjetas, listas, imágenes)
• Efectos hover (animación al pasar el ratón) para botones y tarjetas: Zoom, desplazamiento, cambio de color
• Pop-up (por ejemplo, ampliación de fotos)
• Pase de diapositivas animado

Aunque los parámetros de animación pueden variar en función del proyecto, la velocidad de animación tiende a seguir una serie de reglas universales. La animación es más cómoda de percibir dentro de los límites especificados a continuación, utilízalos como guía y no te equivocarás.

Este es el rango medio de valores para animar la mayoría de los elementos, ni demasiado rápido ni demasiado lento. Este intervalo es suficiente para animar texto, mosaicos, listas y elementos decorativos. Aumentemos el intervalo:

Un intervalo de 0,1 segundos se percibe como un instante, por lo que es adecuado para elementos y movimientos pequeños (pasar el ratón por encima, cambiar de pestaña, deslizar en galerías), mientras que las animaciones de más de un segundo parecerán pesadas. Conviene asegurarse de no aplicar esa animación a un elemento importante de la página web.

Estas cifras se desprenden de un estudio realizado por Neilson Norman Group (empresa de investigación y consultoría sobre la experiencia del usuario) y el Model Human Processor.

Cuando las propiedades de un elemento animado son similares a las de los objetos físicos, resultan más fáciles de percibir. Estas animaciones son más predecibles, por eso no causan molestias.

Ayudan a desencadenar ciertas asociaciones y emociones que resultan familiares al usuario. Una de las principales formas de conseguir una sensación de naturalidad es imaginar cómo se comportaría un objeto físico si se moviera como tu animación. ¿Cómo afecta esto a la velocidad?

• Por ejemplo, elementos idénticos se moverán de forma distinta si recorren distancias diferentes. Cuando los elementos se mueven, el que tiene la distancia más corta se detendrá primero.
• Los elementos que varían en masa también se mueven de forma diferente, los más grandes tienden a moverse más lentamente. Si fuera un objeto físico, su masa le impediría moverse más rápido.

Estas reglas están estrechamente relacionadas con nuestra percepción. Es importante recordar que los objetos físicos siempre tienen un principio y un final en su movimiento. En algún momento se aceleran (por ejemplo, al principio, si son empujados) y en algún momento se ralentizan (por ejemplo, al final del recorrido). La animación web transmite estas propiedades con la ayuda del Easing.

El aligeramiento es la técnica más importante en el diseño de animación, ya que confiere autenticidad, carácter y dinámica a los elementos.

El aligeramiento suele representarse mediante un gráfico de la relación entre la distancia del movimiento (eje Y) y el tiempo que se tarda en recorrerla (eje X). Si se aprende a leerlos y componerlos correctamente, ayudará a los diseñadores a explicar la tarea al desarrollador con mayor claridad.

El movimiento lineal es el que resulta más antinatural. Imagina que la velocidad del elemento no cambia en toda la animación, como si no hubiera gravedad ni fricción. Esta animación parecerá artificial y descuidada.

Existen varios tipos de efecto de flexión. Repasarlos y aprender a aplicarlos en tus proyectos te resultará sin duda útil. He aquí cómo son los ejemplos más comunes de easing y sus gráficos:

Este tipo de transición es el más habitual. Las transiciones Ease-In-Out consisten en acelerar suavemente un elemento al principio y ralentizarlo al final del movimiento. De este modo, las animaciones tienen un aspecto más natural: El elemento acelera, completa el movimiento y se detiene.

En este caso, el elemento acelera al principio y tiene una velocidad de animación constante. Este tipo de animación se parece al lanzamiento de un cohete.

En las animaciones Ease-Out, el elemento tiene un movimiento rápido pronunciado al principio y un movimiento de parada suave al final.

El easing asimétrico permite aplicar ajustes más sutiles para transmitir con precisión las propiedades físicas. En este caso, los puntos de aceleración y deceleración tienen su propia dinámica, y los gráficos con las curvas de animación pueden tener un aspecto completamente distinto. Por ejemplo, un elemento puede tener una aceleración suave al principio y una parada rápida al final.

Cuando los objetos chocan, pueden rebotar entre sí o estirarse en distintas direcciones. En diseño de animación, estos efectos se denominan rebote y elasticidad. Estos efectos hacen que el movimiento parezca natural.

La amplitud del movimiento depende de la idea general del proyecto. Cuando diseñes, compara tu elemento con un objeto físico para ver exactamente cómo construir la animación. Si quieres conseguir el efecto de una pelota ligera que salta, la aceleración del elemento tendrá que ser suave, mientras que su rebote en la superficie tendrá que ser grande. En cambio, si imaginas una bola metálica que cae, su descenso será mucho más rápido, mientras que su rebote apenas se notará.

La suavidad de la animación, el rebote y la velocidad aportan cierta dinámica. Si aprendes a utilizar estas herramientas, sabrás cómo dar el tono adecuado a tu animación.

Las curvas de Bézier se utilizan para trazar la aceleración de un elemento. Una curva de Bézier es una curva matemática en un gráfico que contiene los ejes Y (distancia) y X (velocidad), que reflejan la distancia recorrida por el elemento en el espacio y el tiempo que tardó en hacerlo. Ajustando la curva, puedes ajustar la velocidad a la que el elemento recorre las diferentes partes de su trayectoria.

Existen dos tipos de curvas de Bézier, la Cuadrática y la Cúbica. Las coordenadas del primer y último punto están claramente definidas, se encuentran en la curva. Los otros puntos son ajustables y se encuentran fuera de la línea. Moviendo los puntos se transforma la curva, creando una forma suave.

Para aprender a leer gráficos y entender cómo los ángulos de la curva muestran la dinámica del movimiento, vamos a dibujar dos gráficos similares pero ligeramente diferentes.

No existen valores universales para los puntos de una curva que hagan una animación perfecta. Lo importante aquí es experimentar y averiguar poco a poco qué dinámica de movimiento es la adecuada para cada caso. Una vez que aprendas a leer gráficos, podrás utilizar esos conocimientos de forma más profesional. Para hacerte la vida un poco más fácil, aquí tienes un par de servicios que ayudan a los diseñadores a visualizar las animaciones:

cubic-bezier
Este servicio ayuda a mover la curva, reproducir sus ajustes y guardar el resultado deseado. Para simplificar la transferencia del proyecto de animación al equipo de desarrollo, puedes copiar los valores de los puntos de coordenadas y compartirlos con el desarrollador.

easings.net
Este servicio contiene proyectos de animación terminados, que pueden resultar útiles como ejemplos ya listos que contienen los valores correctos.

Hay diferentes tipos de animaciones en Tilda. En Zero Block hay una herramienta avanzada para diseñadores en la que se pueden configurar efectos de animación personalizados, y hay bloques básicos con efectos de animación básicos preestablecidos.

Puedes obtener más información sobre la animación en Tilda aquí.

Queríamos dar a los diseñadores no profesionales la oportunidad de añadir animaciones chulas a sus proyectos, y por eso hemos añadido animaciones preestablecidas a los bloques. Los ajustes que hemos utilizado para ellas están, en nuestra opinión, perfectamente equilibrados sin dejar de ser universales. Todo lo que hay que hacer es activar la animación para el elemento deseado (encabezado, subencabezado, etc.) en el panel Configuración del bloque.

Las animaciones han sido elaboradas por nuestros diseñadores. La velocidad no es ni demasiado rápida ni demasiado lenta, y los elementos se suceden en armonía. Veamos cómo funcionan los ajustes de animación de Tilda utilizando una de las portadas como ejemplo:

En el ejemplo, hemos asignado el mismo estilo de animación -aparecer desde abajo- a todos los elementos para ver el movimiento con mayor claridad.

Hemos prestado atención a calcular a qué velocidad aparecerían los elementos uno tras otro, con qué retardo y con qué desplazamiento. Si te fijas bien en los valores de la portada de arriba, podrás comprobarlo:

• El primer elemento que aparece es el más grande (el encabezamiento es el más grande, de ahí que sea el elemento clave)
• El título va seguido de una descripción, que tiene una importancia secundaria. Aquí la velocidad de animación es mayor.
• El botón aparece en último lugar, y su velocidad de aparición es más rápida que la de ambos textos.

El estilo de animación es el mismo para todos los elementos con animación preestablecida:

El gráfico muestra que los elementos se aceleran rápidamente al principio y se desaceleran gradualmente al final.

La coreografía ayuda a crear ritmo en la animación. Es similar al ritmo musical, ya que determina el carácter de la obra en cuestión. Lo importante aquí es que los movimientos de la animación estén claramente definidos y no sean monótonos (con el mismo intervalo de tiempo entre uno y otro).

Animación paralela. Elementos de animación que tienen la misma velocidad y tiempo, lo que hace que parezcan un solo grupo.

Animación retardada. Se refiere a la animación que contiene un pequeño retraso entre los elementos que aparecen, con el siguiente elemento moviéndose un poco más rápido que el anterior. Para que los elementos sigan formando parte del mismo grupo, el intervalo de retardo debe ser pequeño (por ejemplo, 0,3 segundos).

Agrupación de elementos. Puede agrupar elementos y combinar animaciones paralelas y retardadas. Por ejemplo, puede hacer que todos los textos de la cabecera aparezcan al mismo tiempo y que los botones aparezcan con retardo.

La secuencia de animación depende de la importancia del elemento, ya que hay elementos iguales y elementos clave.

El énfasis visual se hará en el elemento clave, mientras que el resto se unificará en la medida de lo posible. Por ejemplo, el título de la página puede ser el elemento principal, mientras que los subtítulos y las imágenes serán secundarios. Una forma de destacar el elemento clave es mostrar primero el título, seguido de una pausa y la aparición de los elementos secundarios a un ritmo más lento.

En una página web, suelen ser listas, galerías de fotos, patrones, elementos con una finalidad similar. Pueden aparecer juntos o uno detrás de otro. Cuando aparecen uno detrás de otro, la animación de la aparición debe ser la misma.

Las fotos de una galería forman parte de la misma entidad. Es importante que la atención del espectador no se disperse. Hay que asegurarse de que la animación sea sencilla, uniforme y lo suficientemente rápida.

Este tipo de animación no pretende llamar la atención, ya que sólo añade dinamismo mientras la página se desplaza. Una buena técnica para reunir visualmente los diferentes elementos de un grupo consiste en iniciar la animación del segundo elemento antes de que finalice la del primero. Por ejemplo:

Los elementos clave, por su parte, marcan la pauta y centran la atención del usuario. Puede tratarse de un solo elemento o de varios (luego se agrupan). Por ejemplo, se puede hacer un encabezado grande y brillante, configurarlo para que aparezca rápidamente sin retardo, pero con una ralentización al final. Los demás elementos pueden aparecer suavemente y después del encabezamiento, pero con un retardo largo.

La animación es una herramienta para añadir expresión, énfasis y controlar la atención. Es una herramienta muy poderosa, que a menudo se utiliza de forma inepta. Cuando se trata de animación, suele haber una gran tentación de aplicar todas las técnicas que se conocen en un mismo proyecto. Esto suele salir mal, ya que el foco de atención del espectador queda desplazado por el movimiento de imágenes y textos, y sumergirse en el contenido se hace muy difícil. ¿Cómo saber si no se está exagerando?

El equilibrio de la animación en el proyecto se refiere al número de elementos animados que no provocan una sensación de controversia al ver la página. Añadir demasiada animación es un error común. Para no quitar animaciones innecesarias al final, es mejor determinar cuánta animación necesitas al principio, guiándote por las siguientes reglas:

No animes todos los elementos de tu proyecto. Una dinámica excesiva cansa y desenfoca al espectador. Para empezar, determine los elementos de énfasis, dos suelen ser suficientes. Por ejemplo, los títulos y las fotos de la galería.

Controle la calidad. Si está añadiendo animación a un proyecto, es importante asegurarse de que funciona correctamente y no se congela. La animación requiere muchos recursos del sistema, y será lenta o intermitente si tiene una gran carga de CPU. Los usuarios no quedarán impresionados y no habrá un factor "wow". Por lo tanto, es esencial que usted:

• No animes demasiados elementos
• Probar el sitio web en ordenadores poco potentes
• En lugar de la animación simultánea de varios elementos, utilice una secuencia con un breve retardo
• No subas imágenes pesadas al sitio web

Mantener la jerarquía. Aplique la misma animación a elementos del mismo valor en todo el sitio web. Por ejemplo:

• Mismo estilo de encabezamiento
• Mismo estilo hover (por ejemplo, el aspecto de la sombra bajo el botón al pasar el ratón)

Mantener el estilo. Aplique el mismo estilo de animación a la jerarquía. Por ejemplo, puede decidir que todos los encabezados de sección se desvanezcan desde abajo, mientras que las imágenes y los pies de foto entrarán por los lados.

Una cantidad limitada de animación te ayuda a evitar pasarte y confundirte en los estilos al principio. Asegúrate por completo de que la cantidad mínima de animación en la página no es suficiente para ti, y solo entonces intenta añadir más.

La animación hace que el proyecto sea más interesante y favorece su estilo, estado de ánimo y carácter. Pero puede ser perjudicial si no se siguen las reglas básicas: