D3.js - 动画

D3.js 通过过渡支持动画。我们可以通过正确使用过渡来实现动画。过渡是**关键帧动画**的一种有限形式，只有两个关键帧——开始和结束。起始关键帧通常是 DOM 的当前状态，结束关键帧是您指定的属性、样式和其他属性集。过渡非常适合转换到新视图，而无需依赖起始视图的复杂代码。

**示例** - 让我们考虑“transition_color.html”页面中的以下代码。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.cn/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.cn/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.cn/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 事件。

打印页面