D3.js - 動畫

D3.js 透過過渡支援動畫。我們可以透過正確使用過渡來實現動畫。過渡是**關鍵幀動畫**的一種有限形式，只有兩個關鍵幀——開始和結束。起始關鍵幀通常是 DOM 的當前狀態，結束關鍵幀是您指定的屬性、樣式和其他屬性集。過渡非常適合轉換到新檢視，而無需依賴起始檢視的複雜程式碼。

**示例** - 讓我們考慮“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>

這裡，文件的背景顏色從白色變為淺灰色，然後變為灰色。

duration() 方法

duration() 方法允許屬性更改在指定持續時間內平滑發生，而不是瞬間發生。讓我們使用以下程式碼建立一個持續 5 秒的過渡。

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

這裡，過渡平滑且均勻地發生。我們也可以使用以下方法直接賦值 RGB 顏色程式碼值。

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

現在，每個顏色數值都會緩慢、平滑且均勻地從 0 變為 150。為了獲得從起始幀值到結束幀值的中間幀的精確混合，D3.js 使用內部插值方法。語法如下：

d3.interpolate(a, b)

D3 還支援以下插值型別：

**interpolateNumber** - 支援數值。
**interpolateRgb** - 支援顏色。
**interpolateString** - 支援字串。

D3.js 會負責使用正確的插值方法，在高階情況下，我們可以直接使用插值方法來獲得我們想要的結果。如果需要，我們甚至可以建立一個新的插值方法。

delay() 方法

delay() 方法允許過渡在一段時間後發生。考慮“transition_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>

過渡的生命週期

過渡具有四個階段的生命週期：

過渡被排程。
過渡開始。
過渡執行。
過渡結束。

讓我們逐一詳細瞭解這些階段。

過渡被排程

建立過渡時，會排程過渡。當我們呼叫**selection.transition**時，我們正在排程一個過渡。這也是我們呼叫**attr()、style()**和其他過渡方法來定義結束關鍵幀的時候。

過渡開始

過渡的開始時間基於其延遲，該延遲是在排程過渡時指定的。如果沒有指定延遲，則過渡會盡快開始，通常是在幾毫秒後。

如果過渡有延遲，則只有在過渡開始時才應設定起始值。我們可以透過監聽 start 事件來實現：

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

過渡執行

當過渡執行時，它會使用範圍從 0 到 1 的過渡值重複呼叫。除了延遲和持續時間外，過渡還具有緩動來控制時間。緩動會扭曲時間，例如慢入慢出。某些緩動函式可能會暫時給出大於 1 或小於 0 的 t 值。

過渡結束

過渡結束時間總是恰好為 1，以便在過渡結束時精確設定結束值。過渡結束基於其延遲和持續時間的總和。當過渡結束時，會排程 end 事件。

列印頁面