Animaciones Basadas en JavaScript Usando Anime.js, Parte 2: Parámetros

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

En el primer tutorial de la serie Anime.js, aprendiste sobre diferentes maneras de especificar los elementos meta que quieres animar y los tipos de propiedades CSS y atributos DOM que pueden ser animados. Las animaciones en el tutorial previo eran muy básicas. Todos los elementos meta solo se estaban moviendo a una cierta distancia o cambiando el radio del borde a una velocidad fija.

Algunas veces, podrías necesitar animar los elementos meta en una manera más rítmica. Por ejemplo, podrías tener diez elementos diferentes que quieres mover de izquierda a derecha con un retraso de 500ms entre el comienzo de la animación para cada elemento. De manera similar, quisieras incrementar o decrementar la duración de la animación para cada elemento basado en su posición.

En este tutorial, aprenderás cómo usar Anime.js para cronometrar apropiadamente la animación de diferentes elementos usando parámetros específicos. Esto te permitirá controlar el orden en el cuál una secuencia de animación es reproducida para elementos individuales o todos los elementos.

Parámetros de Propiedad

Estos parámetros te permiten controlar la duración, retraso y suavizado de propiedades individuales o un grupo de propiedades a la vez. Los parámetros duration y delay están especificados en milisegundos. El valor por defecto para la duración es 1000ms o 1s.

Esto significa que a menos que se especifique de otro modo, cualquier animación aplicada a un elemento será reproducida por 1 segundo. El parámetro delay especifica la cantidad de tiempo que la animación toma para comenzar una vez que ya la has disparado. El valor por defecto para el retraso es 0. Esto significa que las animaciones comenzarán tan pronto como sean disparadas.

Puedes usar el parámetro easing para controlar la tasa a la cual una animación es reproducida para la duración que está activa. Algunas animaciones comienzan lento, aceleran a la mitad, y después van más despacio al final. Otras comienzan a un buen ritmo y después van más lento por el resto del tiempo.

Sin embargo, en todos los casos, la animación siempre se completa dentro del tiempo especificado usando el parámetro duration. Anime.js proporciona muchas funciones de suavizado que puedes aplicar a tus elementos directamente solo usando sus nombres. Para algunas funciones de suavizado, también puedes establecer un valor para el parámetro elasticity para controlar qué tanto del valor de un elemento rebota como un resorte.

Aprenderás más sobre diferentes funciones de suavizado en el tutorial final de la serie. El siguiente pedazo de código te muestra cómo aplicar todos estos parámetros a diferentes animaciones.

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000
});

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});

var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

Como puedes ver, estos parámetros pueden ser usados independientemente de otros parámetros o en combinación con ellos. La cubicAnimation tiene los parámetros duration y easing aplicados a este. Si la duración no ha sido especificada, la animación correría por 1 segundo. Ahora, correrá por 1,200 milisegundos o 1.2 segundos.

Una limitación mayor de parámetros de propiedad en el ejemplo de arriba era que todos los animadores del elemento meta tendrán los mismos valores de duration, delay y easing.

Este podría o no ser el comportamiento deseado. Por ejemplo, en lugar de traducir y cambiar el radio del borde del elemento meta al mismo tiempo, podrías querer primero traducir el elemento meta y después animar su radio de borde. Anime.js te permite especificar diferentes valores para los parámetros duration, delay, easing y elasticity. El siguiente código y demostración deberían hacerlo más claro.

var indiParam = anime({
  targets: '.square',
  translateY: {
    value: 250
  },
  rotate: {
    value: '2.125turn'
  },
  backgroundColor: {
    value: 'rgb(255,0,0)',
    duration: 400,
    delay: 1500,
    easing: 'linear'
  },
  duration: 1500
});

En el código de arriba, todas las propiedades que queremos animar tienen diferentes valores. La animación de color de fondo tiene una duración de 400ms, mientras que la rotación y traslación usan el valor global de duración de 1500ms.

La animación de color de fondo también tiene un retraso así que cualquier cambio en el colo solo comienza después de que han pasado 1500ms. Las propiedades rotate y translateY usan el valor por defecto para los parámetros delay y easing porque no hemos proporcionado un valor local o global para estos.

Parámetros Basados en Función

Los parámetros basados en propiedad son útiles cuando quieres cambiar el orden y duración para animar propiedades individuales. Sin embargo, la misma duration y delay aún serán aplicadas para propiedades individuales en todos los elementos meta. Los parámetros basados en función te permiten especificar por separado duration, delay, elasticity y easing para diferentes elementos meta en una forma compacta.

En este caso, estableces los valores de diferentes parámetros usando funciones en vez de números. Estas funciones aceptan tres parámetros: target, index, y targetCount. El parámetro target almacena la referencia al elemento meta actual. El parámetro index almacena el índice o posición del elemento meta actual. El parámetro targetCount almacena el número total de elementos meta.

El parámetro target es útil cuando los valores de animación necesitan ser establecidos basado en algunos atributos del elemento meta. Por ejemplo, puedes almacenar los valores delay, duration o easing para un elemento meta en datos de atributos y después acceder a ellos después.

De manera similar, podrías acceder al color de fondo de un elemento meta y después manipularlo para establecer un valor de color único final para elementos individuales. De este modo, podrías animar todos los elementos para tener un color de fondo que sea 20% más oscuro que su color actual.

El parámetro index te da la posición del objetivo actual en nuestra lista de elementos meta. Puedes usarlo para cambiar gradualmente el valor para parámetros como duration y delay para diferentes elementos.

Esto es generalmente útil cuando quieres establecer los elementos en orden ascendente. También puedes sustraer el index del targetCount para establecer los valores en orden descendente. El siguiente pedazo de código usa estos dos parámetros para especificar los valores en orden ascendente y descendente.

var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});

var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

El siguiente código establece un valor diferente de easing para cada elemento meta usando el parámetro index.

var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

Parámetros de Animación

El último conjunto de parámetros te permite especificar el número de veces que una animación debería ser reproducida y la dirección en la que debería ser reproducida. Puedes especificar el número de veces que una animación debería ser reproducida usando el parámetro loop. También hay un parámetro autoplay el cual puede ser establecido a true o false. Su valor por defecto es true, pero puedes prevenir que las animaciones comiencen solas estableciéndolo a false.

El parámetro direction controla la dirección en la cuál las animaciones son reproducidas. Puede tener tres valores: normal, reverse, y alternate. El valor por defecto es normal, el cuál mantiene en reproducción la animación normalmente desde los valores iniciales hasta los valores finales. Una vez que los elementos meta alcanzan el valor final, si el valor loop es mayor que 1, los elementos meta regresan de manera abrupta a los valores iniciales y después comienzan la animación otra vez.

Cuando direction es establecido a reverse y el valor loop es mayor a 1, la animación se revierte. En otras palabras, los elementos meta comienzan la animación desde su estado final y regresa para alcanzar el estado inicial. Una vez que están en el estado inicial, los elementos regresan al estado final y después comienzan la animación invertida. El valor de dirección alternate cambia la dirección de la animación después de cada ciclo.

var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

En la siguiente demostración, he establecido el número de ciclos a cuatro para que puedas notar fácilmente la diferencia en animación de los elementos en diferentes modos.

Ideas Finales

En este tutorial, aprendiste sobre diferentes tipos de parámetros que pueden ser usados para controlar la animación de elementos meta en Anime.js. Los parámetros de propiedad son usados para controlar la animación de propiedades individuales.

Puedes usarlas para controlar la secuencia en la cuál la animación es reproducida para elementos individuales. Los parámetros de función te permiten controlar el tiempo y ritmo de animación para elementos individuales con respecto al grupo entero. Los parámetros de animación te permiten controlar cómo la animación misma es reproducida para diferentes elementos.

Si tienes alguna pregunta relacionada a este tutorial, por favor déjame saber en los comentarios.