10、D3过渡效果的高级应用与实现

D3过渡效果的高级应用与实现

1. D3过渡基础

1.1 缓动效果（Ease）

D3默认的缓动效果是 cubic-in-out 。若要查看支持的D3缓动函数列表，可参考 此链接 。当使用自定义缓动函数时，该函数需以范围在 [0, 1] 的当前参数化时间值作为参数。例如：

function(t){ 
  return t * t;
}

在示例中，实现了一个简单的二次缓动函数，实际上D3内置了名为 quad 的缓动函数。若想了解更多关于缓动和Penner方程的信息，可查看 此链接 。

1.2 补间动画（Tween）

“Tween”源自“inbetween”，在传统动画中，主动画师创建关键帧后，经验较少的动画师会生成关键帧之间的帧。在现代计算机生成动画中，它指的是控制“中间”帧生成的技术或算法。下面通过代码示例展示如何创建自定义补间函数来实现按钮标签在九个离散整数间的动画：

<script type="text/javascript">
    var body