D3.js - 动画 Animation
D3.js通过过渡支持动画。 我们可以通过正确使用过渡来做动画。 转换是Key Frame Animation的有限形式，只有两个关键帧 - 开始和结束。 起始关键帧通常是DOM的当前状态，而结束关键帧是您指定的一组属性，样式和其他属性。 转换非常适合转换到新视图，而不需要依赖于起始视图的复杂代码。
Example - 让我们在“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>
这里，文档的背景颜色从白色变为浅灰色，然后变为灰色。
The duration() Method
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负责使用适当的插值方法，在高级情况下，我们可以直接使用插值方法来获得我们想要的结果。 如果需要，我们甚至可以创建一个新的插值方法。
The delay() Method
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的转换值重复调用。除了延迟和持续时间之外，转换还可以轻松控制时序。 缓和会扭曲时间，例如慢进和慢进。 某些缓动函数可能暂时给出t大于1或小于0的值。
转型结束
转换结束时间始终精确为1，因此在转换结束时准确设置结束值。 转换基于其延迟和持续时间的总和而结束。 转换结束时，将调度end事件。
