D3.js - Animación

D3.js admite la animación a través de la transición. Podemos hacer animación con el uso adecuado de la transición. Las transiciones son una forma limitada deKey Frame Animationcon solo dos fotogramas clave: inicio y final. El fotograma clave inicial suele ser el estado actual del DOM, y el fotograma clave final es un conjunto de atributos, estilos y otras propiedades que especifique. Las transiciones son adecuadas para la transición a una nueva vista sin un código complicado que depende de la vista inicial.

Example - Consideremos el siguiente código en la página "transición_color.html".

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.select("body").style("background-color", "lightblue") 
         // make the background-color lightblue.transition()
         .style("background-color", "gray");
         // make the background-color gray
      </script>
   </body>
</html>

Aquí, el color de fondo del documento cambió de blanco a gris claro y luego a gris.

El método duration ()

El método duration () permite que los cambios de propiedad se produzcan sin problemas durante una duración específica en lugar de instantáneamente. Hagamos la transición que toma 5 segundos usando el siguiente código.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.selectAll("h3").transition().style("color","green").duration(5000);
      </script>
   </body>
</html>

Aquí, las transiciones ocurrieron sin problemas y de manera uniforme. También podemos asignar el valor del código de color RGB directamente usando el siguiente método.

d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);

Ahora, cada número de color va lenta, uniforme y uniformemente de 0 a 150. Para obtener la combinación precisa de fotogramas intermedios desde el valor del fotograma inicial hasta el valor del fotograma final, D3.js utiliza un método de interpolación interno. La sintaxis se da a continuación:

d3.interpolate(a, b)

D3 también admite los siguientes tipos de interpolación:

  • interpolateNumber - Soporta valores numéricos.

  • interpolateRgb - colores de apoyo.

  • interpolateString - cuerda de soporte.

D3.js se encarga de utilizar el método de interpolación adecuado y, en casos avanzados, podemos utilizar los métodos de interpolación directamente para obtener el resultado deseado. Incluso podemos crear un nuevo método de interpolación, si es necesario.

El método delay ()

El método delay () permite que se lleve a cabo una transición después de un cierto período de tiempo. Considere el siguiente código en "transición_delay.html".

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Simple transitions </h3>
      <script>
         d3.selectAll("h3").transition()
            .style("font-size","28px").delay(2000).duration(2000);
      </script>
   </body>
</html>

Ciclo de vida de la transición

La transición tiene un ciclo de vida de cuatro fases:

  • La transición está programada.
  • Comienza la transición.
  • La transición se ejecuta.
  • Termina la transición.

Repasemos cada uno de estos uno por uno en detalle.

La transición está programada

Se programa una transición cuando se crea. Cuando llamamosselection.transition, estamos programando una transición. Esto es también cuando llamamosattr(), style() y otros métodos de transición para definir el fotograma clave final.

Comienza la transición

Una transición comienza en función de su retraso, que se especificó cuando se programó la transición. Si no se especificó ningún retraso, la transición comienza lo antes posible, que suele ser después de unos pocos milisegundos.

Si la transición tiene un retraso, entonces el valor inicial debe establecerse solo cuando comience la transición. Podemos hacer esto escuchando el evento de inicio:

d3.select("body")
   .transition()
   .delay(200)
   .each("start", function() { d3.select(this).style("color", "green"); })
   .style("color", "red");

La transición se ejecuta

Cuando se ejecuta la transición, se invoca repetidamente con valores de transición que van de 0 a 1. Además del retardo y la duración, las transiciones tienen facilidad para controlar la sincronización. Aliviar distorsiona el tiempo, como en el caso de la desaceleración y la desaceleración. Algunas funciones de aceleración pueden dar temporalmente valores de t mayores que 1 o menores que 0.

La transición termina

El tiempo de finalización de la transición es siempre exactamente 1, de modo que el valor final se establece exactamente cuando finaliza la transición. Una transición finaliza en función de la suma de su retraso y duración. Cuando finaliza una transición, se envía el evento final.