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 还支持以下插值类型-
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>
过渡的生命周期
Transition 具有四个阶段的生命周期-
已安排过渡。
过渡开始。
转换运行。
过渡结束。
让我们一一详细介绍。
已安排过渡
转换在创建时就已安排好。当我们调用
selection.transition 时，我们正在安排一个转换。这也是我们调用
attr()、style()等过渡方法定义结束关键帧的时候。
转型开始
转换根据其延迟开始，这是在安排转换时指定的。如果未指定延迟，则转换会尽快开始，通常在几毫秒后开始。
如果过渡有延迟，则应仅在过渡开始时设置起始值。我们可以通过监听开始事件来做到这一点-
d3.select("body")
.transition()
.delay(200)
.each("start", function() { d3.select(this).style("color", "green"); })
.style("color", "red");
过渡运行
当转换运行时，它会重复调用从 0 到 1 的转换值。除了延迟和持续时间之外，转换还可以轻松控制时间。缓动会扭曲时间，例如慢进和慢出。一些缓动函数可能会暂时给出大于 1 或小于 0 的 t 值。
过渡结束
过渡结束时间总是恰好为 1，因此结束值在过渡结束时设置。转换基于其延迟和持续时间的总和结束。当转换结束时，将调度结束事件。
