D3.js-アニメーション

D3.jsは、遷移によるアニメーションをサポートしています。トランジションを適切に使用してアニメーションを作成できます。トランジションは、*キーフレームアニメーション*の限られた形式であり、開始と終了の2つのキーフレームのみがあります。通常、開始キーフレームはDOMの現在の状態であり、終了キーフレームは指定した属性、スタイル、およびその他のプロパティのセットです。遷移は、開始ビューに依存する複雑なコードなしで新しいビューに遷移するのに適しています。

例-「transition_colorl」ページで次のコードを考えてみましょう。

<!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_delayl」内の次のコードを検討してください。

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

移行のライフサイクル

移行には4段階のライフサイクルがあります-

移行が予定されています。
移行が開始されます。
移行が実行されます。 *移行は終了します。

これらのそれぞれを詳細に見ていきましょう。

移行が予定されています

遷移は、作成時にスケジュールされます。* 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であるため、終了値は遷移の終了時に正確に設定されます。遷移は、遅延と継続時間の合計に基づいて終了します。遷移が終了すると、終了イベントが送出されます。

D3js-animation

目次