【译】Learn D3 入门文档：Animation

引子

继 Learn D3: Shapes 第六篇，只是英文翻译，可修改代码的部分用静态图片替代了，想要实时交互请阅读原文。

• 原文：Learn D3: Animation

• 版本：Published Mar 24, 2020

• Origin

• My GitHub

正文

与在纸上绘制的图形不同，计算机图形不必是静态的；就像弗兰肯斯坦的怪物一样，他们可以通过动画活过来！✨

上面的折线图逐步显示。这个可有可无的效果，应该谨慎使用，因为它会引起注意，但它至少强化了 x 代表时间，并给一个原本枯燥的图表带来了一丝悬念。

这里的代码类似于我们前面看到的轴渲染：我们选择一个 SVG 路径元素，调用一个函数（reveal）来应用转换，最后将该元素嵌入 HTML 模板文本中。

在我们进入技术细节之前，让我们退一步，更全面地思考一下动画。

动画不是单个图形，而是随时间变化的一系列图形。该序列可以表示为返回给定时间 t 的图形的单元（或函数）。为简单起见，我们通常使用常规时间，其中 t=0 是动画的开始，t=1 是结束。