D3.js - 動畫

Created: November-04, 2018

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() 和其他轉換方法來定義結束關鍵幀時。

轉換開始

轉換基於其設定的延遲開始，該延遲是在安排轉換時指定的。如果未指定延遲，則轉換將盡快開始，通常在幾毫秒之後。

如果轉換有延遲，則應僅在轉換開始時設定起始值。我們可以通過偵聽開始事件來做到這一點 -

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

轉換執行

當轉換執行時，它會以 0 到 1 的轉換值重複呼叫。除了延遲和持續時間之外，轉換還可以輕鬆控制時序。緩和會扭曲時間，例如慢進和慢進。某些緩動函式可能暫時給出 t 大於 1 或小於 0 的值。

轉型結束

轉換結束時間始終精確為 1，因此在轉換結束時準確設定結束值。轉換基於其延遲和持續時間的總和而結束。轉換結束時，將排程 end 事件。

duration() 方法

delay() 方法