Crea animaciones de degradado interactivas con Granim.js

Spanish (Español) translation by steven (you can also view the original English article)

Los degradados pueden mejorar instantáneamente la apariencia de un sitio web, si se usan con cuidado con la combinación de colores correcta. CSS también ha recorrido un largo camino cuando se trata de aplicar un degradado en cualquier elemento y animarlo. En este tutorial, nos alejaremos de CSS y crearemos animaciones de degradado utilizando una biblioteca de JavaScript llamada Granim.js.

Esta biblioteca dibuja y anima degradados en un lienzo determinado de acuerdo con los parámetros que estableciste al crear una instancia de Granim. Existen diferentes métodos que se pueden usar para hacer que tu degradado responda a diferentes eventos de usuario, como un clic en un botón. En este tutorial, aprenderemos sobre esta biblioteca en detalle y crearemos algunos efectos de animación de degradado simples pero agradables.

Crea animaciones de degradado de color sólido

Antes de comenzar a crear cualquier degradado, deberás incluir la biblioteca en tu proyecto. Para esto, puedes descargar Granim.js desde GitHub o enlazar directamente a un CDN. La versión de la biblioteca que estoy usando en este tutorial es 1.1. Algunos métodos que discutiremos aquí solo se agregaron en la versión 1.1, por lo que usar una versión de biblioteca anterior al seguir este tutorial no siempre dará el resultado esperado. Teniendo estos puntos en mente, creemos nuestro primer gradiente usando Granim.js.

Cada vez que creas una nueva instancia de Granim, puedes pasarte un objeto de pares clave-valor, donde la clave es el nombre de una propiedad en particular y el valor es el valor de la propiedad. La propiedad del element se utiliza para especificar el selector CSS o el nodo DOM que apuntará al lienzo en el que deseas aplicar un degradado particular.

Cuando creas una animación de degradado donde los colores cambian de un valor relativamente claro a un valor más oscuro, puede resultar imposible leer algún texto que hayas colocado en el lienzo. Por ejemplo, el degradado inicial aplicado a un elemento puede ser una combinación de amarillo y verde claro. En tales casos, el texto del lienzo debería ser más oscuro para que los usuarios puedan leerlo correctamente.

De manera similar, el degradado puede consistir en rojo oscuro y negro en algún otro punto y, en tales casos, el texto oscuro no sería fácil de leer. Granim.js resuelve este problema permitiéndote especificar un elemento contenedor en el que puedes agregar las clases oscuro y claro para diseñar el texto u otros elementos en consecuencia. El valor de la propiedad elToSetClassOn se establece en body de forma predeterminada, pero también puedes especificar cualquier otro elemento contenedor. Los nombres de las clases oscuras y claras se actualizan automáticamente en función del color medio del degradado.

La propiedad elToSetClassOn no funciona por sí sola. También deberás especificar un nombre para la instancia de Granim que creaste utilizando la propiedad de nombre. Si estableces el nombre en algo como first-gradient, el nombre de las clases aplicadas en el elemento contenedor se convertirá en first-gradient-light o first-gradient-dark en función de qué tan claro u oscuro sea el gradiente actualmente. De esta forma, cualquier elemento que necesites cambiar su color en función de la claridad u oscuridad del degradado podrás hacerlo con facilidad.

La dirección en la que se debe dibujar un degradado se puede especificar mediante la propiedad direction. Tiene cuatro valores válidos: diagonal, left-right, top-bottom y radial. Los degradados que crees no se moverán en esas direcciones particulares, simplemente se dibujarán de esa manera. La posición del degradado no cambia durante la animación; sólo lo hacen sus colores.

También hay una propiedad de states, que acepta un objeto como su valor. Cada estado especificado dentro del objeto de states tendrá un nombre y un conjunto de pares clave-valor. Puedes usar la propiedad de gradients para especificar diferentes colores que deben formar un degradado particular. Puedes establecer el valor de esta propiedad para que sea igual a una matriz de gradientes.

Granim.js creará automáticamente una animación donde los colores del degradado cambian de un conjunto a otro. La transición entre diferentes gradientes toma 5,000 milisegundos por defecto. Sin embargo, puedes acelerar o ralentizar la animación estableciendo un valor apropiado para la propiedad transitionSpeed.

Una vez que los degradados comiencen a animarse, tendrán que terminar en un punto u otro. Puede especificar si el degradado debe detenerse allí o comenzar a animar nuevamente desde el principio utilizando la propiedad loop. Esto se establece en true de forma predeterminada, lo que significa que el degradado se seguiría animando.

Cada color de un degradado puede tener una opacidad diferente, que se puede especificar mediante la propiedad de opacity. Esta propiedad acepta una matriz para determinar qué tan opaco será cada color. Para dos colores degradados, el valor puede ser [0.1, 0.8]. Para tres colores degradados, el valor puede ser [1, 0.5, 0.75], etc.

También tienes la opción de especificar el tiempo que tarda la animación de degradado en pasar de un estado a otro utilizando stateTransitionSpeed. Esto es diferente de la propiedad transitSpeed, que controla la velocidad de la animación dentro del mismo estado.

En el siguiente fragmento de código, he creado dos instancias de Granim diferentes para dibujar diferentes gradientes. En el primer caso, solo hemos especificado un degradado único, por lo que no hay ninguna animación real y los colores no cambian en absoluto.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  direction: "diagonal",
  opacity: [1, 1],
  states: {
    "default-state": {
      gradients: [["#8BC34A", "#FF9800"]]
    }
  }
});

var secondGranim = new Granim({
  element: "#second",
  name: "second-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

Please accept marketing cookies to load this content.

Anima degradados sobre una imagen

Otro uso común de la biblioteca Granim.js sería animar un degradado sobre una imagen dibujada en el lienzo. Puedes especificar diferentes propiedades para controlar cómo se dibuja la imagen en el lienzo utilizando la propiedad de image. Acepta un objeto con pares clave-valor como su valor. Puedes usar la propiedad source para especificar la ruta desde la cual la biblioteca debe obtener la imagen para dibujarla en el lienzo.

Cualquier imagen que dibujes en el lienzo se dibujará de modo que su centro coincida con el centro del lienzo. Sin embargo, puedes usar la propiedad de position para especificar una posición diferente para dibujar la imagen. Esta propiedad acepta una matriz de dos elementos como su valor. El primer elemento puede tener los valores left, center y right. El segundo elemento puede tener los valores top, center e bottom.

Estas propiedades son generalmente útiles cuando sabes que el tamaño del lienzo y la imagen no coincidirán. En estas situaciones, puedes utilizar esta propiedad para especificar la parte de la imagen que debería aparecer en el lienzo.

Si las imágenes y el lienzo tienen diferentes dimensiones, también puedes estirar la imagen para que encaje correctamente dentro del lienzo. La propiedad stretchMode también acepta una matriz de dos elementos como su valor. Tres valores válidos para estos dos elementos son stretch, stretch-if-smaller y stretch-if-larger.

Un degradado con el modo de fusión establecido en normal ocultará completamente la imagen debajo de él. La única forma de mostrar una imagen debajo de un degradado de colores sólidos sería elegir un modo de fusión diferente. Puedes leer sobre todos los posibles valores del modo de fusión para un lienzo en MDN.

Me gustaría señalar que la capacidad de animar un degradado sobre una imagen solo se agregó en la versión 1.1 de la biblioteca Granim.js. Por lo tanto, tendrás que usar cualquier versión superior a esa si deseas que esta función funcione correctamente.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  direction: "diagonal",
  opacity: [1, 1],
  image: {
    source: "path/to/rose_image.jpg",
    position: ["center", "center"],
    blendingMode: "lighten"
  },
  states: {
    "default-state": {
      gradients: [["#8BC34A", "#FF9800"], ["#FF0000", "#000000"]]
    }
  }
});

var secondGranim = new Granim({
  element: "#second",
  name: "second-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  image: {
    source: "path/to/landscape.jpg",
    stretchMode: ["stretch", "stretch"],
    blendingMode: "overlay"
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

Please accept marketing cookies to load this content.

Métodos para controlar la reproducción de animaciones de degradado

Hasta este punto, no teníamos ningún control sobre la reproducción de la animación de degradado una vez que se creó una instancia. No pudimos pausarlo/reproducirlo o cambiar su estado, dirección, etc. La biblioteca Granim.js tiene diferentes métodos que te permiten realizar todas estas tareas con facilidad.

Puedes reproducir o pausar cualquier animación utilizando los métodos play() y pause(). Del mismo modo, puedes cambiar el estado de la animación de degradado utilizando el método changeState('state-name'). El state-name aquí tiene que ser uno de los nombres de estado que definiste al crear una instancia de Granim.

Se agregaron más métodos en la versión 1.1 que te permiten cambiar la dirección y el modo de fusión de una animación sobre la marcha utilizando los métodos changeDirection('direction-name') y changeBlendingMode('blending-mode-name').

En el siguiente fragmento de código, estoy usando un evento de clic de botón para llamar a todos estos métodos, pero puedes usar cualquier otro evento para llamarlos.

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  isPausedWhenNotInView: true,
  image : {
        source: 'path/to/landscape.jpg',
        stretchMode: ["stretch", "stretch"],
        blendingMode: 'overlay'
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "green-state": {
      gradients: [["#4CAF50", "#CDDC39"], ["#FFEB3B", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "red-state": {
      gradients: [["#E91E63", "#FF5722"], ["#F44336", "#FF9800"]],
      transitionSpeed: 2000
    }
  }
});

$(".play").on("click", function(){
  firstGranim.play();
});

$(".pause").on("click", function(){
  firstGranim.pause();
});

$(".diagonal").on("click", function(){
  firstGranim.changeDirection('diagonal');
});

$(".radial").on("click", function(){
  firstGranim.changeDirection('radial');
});

$(".red-state").on("click", function(){
  firstGranim.changeState('red-state');
});

$(".green-state").on("click", function(){
  firstGranim.changeState('green-state');
});

$(".color-dodge").on("click", function(){
  firstGranim.changeBlendingMode('color-dodge');
});

$(".color-burn").on("click", function(){
  firstGranim.changeBlendingMode('color-burn');
});

$(".lighten").on("click", function(){
  firstGranim.changeBlendingMode('lighten');
});

$(".darken").on("click", function(){
  firstGranim.changeBlendingMode('darken');
});

Please accept marketing cookies to load this content.

Pensamientos finales

En este tutorial, he cubierto los conceptos básicos de la biblioteca Granim.js para que puedas comenzar con ella lo más rápido posible. Hay algunos otros métodos y propiedades que pueden resultarte útiles al crear estas animaciones de degradado. Debes leer la documentación oficial para conocerlos todos.

Si estás buscando recursos de JavaScript adicionales para estudiar o usar en tu trabajo, consulta lo que tenemos disponible en Envato Market.

Si tienes alguna pregunta relacionada con este tutorial, no dudes en hacérmelo saber en los comentarios.