D3.js - Animação

D3.js suporta animação durante a transição. Podemos fazer animação com o uso adequado da transição. As transições são uma forma limitada deKey Frame Animationcom apenas dois quadros principais - início e fim. O quadro-chave inicial é normalmente o estado atual do DOM e o quadro-chave final é um conjunto de atributos, estilos e outras propriedades que você especifica. As transições são adequadas para fazer a transição para uma nova visualização sem um código complicado que depende da visualização inicial.

Example - Vamos considerar o seguinte código na página “transição_cor.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>

Aqui, a cor de fundo do documento mudou de branco para cinza claro e depois para cinza.

Método de duração ()

O método duration () permite que as mudanças de propriedade ocorram suavemente ao longo de uma duração especificada, em vez de instantaneamente. Vamos fazer a transição que leva 5 segundos usando o código a seguir.

<!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>

Aqui, as transições ocorreram de maneira uniforme e uniforme. Também podemos atribuir o valor do código de cor RGB diretamente usando o método a seguir.

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

Agora, cada número de cor vai lenta, suave e uniformemente de 0 a 150. Para obter a combinação precisa dos quadros intermediários do valor do quadro inicial ao valor do quadro final, o D3.js usa um método de interpolação interno. A sintaxe é fornecida abaixo -

d3.interpolate(a, b)

D3 também suporta os seguintes tipos de interpolação -

  • interpolateNumber - suporta valores numéricos.

  • interpolateRgb - cores de suporte.

  • interpolateString - string de suporte.

D3.js se encarrega de usar o método de interpolar adequado e, em casos avançados, podemos usar os métodos de interpolar diretamente para obter o resultado desejado. Podemos até criar um novo método de interpolar, se necessário.

O método delay ()

O método delay () permite que uma transição ocorra após um certo período de tempo. Considere o seguinte código em “transição_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 transição

A transição tem um ciclo de vida de quatro fases -

  • A transição está programada.
  • A transição começa.
  • A transição é executada.
  • A transição termina.

Vamos examinar cada um deles em detalhes.

A transição está agendada

Uma transição é agendada quando é criada. Quando ligamosselection.transition, estamos programando uma transição. Também é quando ligamosattr(), style() e outros métodos de transição para definir o quadro-chave final.

A transição começa

Uma transição começa com base em seu atraso, que foi especificado quando a transição foi agendada. Se nenhum atraso foi especificado, a transição começa o mais rápido possível, o que normalmente ocorre após alguns milissegundos.

Se a transição tiver um atraso, o valor inicial deve ser definido apenas quando a transição começar. Podemos fazer isso ouvindo o evento inicial -

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

A transição é executada

Quando a transição é executada, ela é invocada repetidamente com valores de transição que variam de 0 a 1. Além de atraso e duração, as transições têm atenuação para controlar o tempo. A atenuação distorce o tempo, como para aumentar e diminuir a velocidade. Algumas funções de atenuação podem fornecer temporariamente valores de t maiores que 1 ou menores que 0.

A transição termina

O tempo de término da transição é sempre exatamente 1, de modo que o valor final é definido exatamente quando a transição termina. Uma transição termina com base na soma de seu atraso e duração. Quando uma transição termina, o evento final é despachado.