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

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

1. D3过渡基础

1.1 缓动效果

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

function(t){ 
  return t * t;
}

在示例中实现的简单二次缓动函数，实际上是D3内置的 quad 缓动函数。更多关于缓动和Penner方程的信息可查看 Penner方程 。

1.2 补间动画

补间（Tween）源于 “inbetween”，在传统动画中，主动画师创建关键帧后，经验较少的动画师负责生成关键帧之间的帧。在现代计算机生成动画中，补间指控制 “中间” 帧生成的技术或算法。以下是使用D3过渡支持补间动画的示例：

var body = d3.select("body"), duration = 5000;

body.append("div").append("input")
    .at