D3.js - Animazione

D3.js supporta l'animazione attraverso la transizione. Possiamo fare animazione con un uso corretto della transizione. Le transizioni sono una forma limitata diKey Frame Animationcon solo due fotogrammi chiave: inizio e fine. Il fotogramma chiave iniziale è in genere lo stato corrente del DOM e il fotogramma chiave finale è un insieme di attributi, stili e altre proprietà specificate. Le transizioni sono adatte per la transizione a una nuova vista senza un codice complicato che dipende dalla vista iniziale.

Example - Consideriamo il seguente codice nella pagina "Transition_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>

Qui, il colore di sfondo del documento è cambiato da bianco a grigio chiaro e quindi a grigio.

Il metodo duration ()

Il metodo duration () consente di modificare le proprietà in modo fluido per una durata specificata anziché istantaneamente. Facciamo la transizione che richiede 5 secondi utilizzando il codice seguente.

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

Qui, le transizioni si sono verificate in modo regolare e uniforme. Possiamo anche assegnare il valore del codice colore RGB direttamente utilizzando il seguente metodo.

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

Ora, ogni numero di colore va lentamente, uniformemente e in modo uniforme da 0 a 150. Per ottenere la fusione accurata dei fotogrammi intermedi dal valore del fotogramma iniziale al valore del fotogramma finale, D3.js utilizza un metodo di interpolazione interno. La sintassi è data di seguito:

d3.interpolate(a, b)

D3 supporta anche i seguenti tipi di interpolazione:

  • interpolateNumber - supportare valori numerici.

  • interpolateRgb - colori di supporto.

  • interpolateString - stringa di supporto.

D3.js si occupa di utilizzare il metodo di interpolazione corretto e nei casi avanzati, possiamo utilizzare direttamente i metodi di interpolazione per ottenere il risultato desiderato. Possiamo persino creare un nuovo metodo di interpolazione, se necessario.

Il metodo delay ()

Il metodo delay () consente una transizione dopo un certo periodo di tempo. Considera il seguente codice in "Transizione_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 di vita della transizione

La transizione ha un ciclo di vita in quattro fasi:

  • La transizione è prevista.
  • La transizione inizia.
  • La transizione viene eseguita.
  • La transizione finisce.

Esaminiamo ciascuno di questi uno per uno in dettaglio.

La transizione è programmata

Una transizione è pianificata quando viene creata. Quando chiamiamoselection.transition, stiamo programmando una transizione. Questo è anche quando chiamiamoattr(), style() e altri metodi di transizione per definire il fotogramma chiave finale.

Inizia la transizione

Una transizione inizia in base al suo ritardo, che è stato specificato quando la transizione è stata pianificata. Se non è stato specificato alcun ritardo, la transizione inizia il prima possibile, generalmente dopo pochi millisecondi.

Se la transizione ha un ritardo, il valore iniziale deve essere impostato solo quando inizia la transizione. Possiamo farlo ascoltando l'evento di inizio -

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

La transizione funziona

Quando la transizione viene eseguita, viene invocata ripetutamente con valori di transizione compresi tra 0 e 1. Oltre al ritardo e alla durata, le transizioni hanno un rallentamento del tempo di controllo. L'allentamento distorce il tempo, come per il rallentamento e il rallentamento. Alcune funzioni di andamento possono temporaneamente fornire valori di t maggiori di 1 o minori di 0.

La transizione finisce

L'ora di fine della transizione è sempre esattamente 1, in modo che il valore di fine sia impostato esattamente quando termina la transizione. Una transizione termina in base alla somma del ritardo e della durata. Quando una transizione termina, viene inviato l'evento end.