这是关于为Design Studio创建扩展组件的系列教程的一部分。

上一次，我们确保将数据绑定到形状。现在我们要开始制作动画。D3中的动画是通过过渡来完成的。简言之，大数据技术及数据分析培训，D3中的过渡会随时间改变现有组件上的属性。如果属性是路径的一部分，您可以随时间改变位置或形状。如果它是样式元素，您可以从一个样式属性滑动到另一个样式属性。可能性是无限的。此外，云服务器租用，如果您所做的是简单的，D3可以为您处理它，黑盒样式。如果它更复杂，你可以采取手动控制。

让我们举一个非常简单的例子。在下面的html代码中，我们使用D3绘制一个小的，红色的，半透明圆。

D3转换的生命周期非常简单。

调度可能是立即的（默认值），也可能是延迟的。通过选择要转换的内容并调用其transition（）函数，可以自动触发调度转换；在上述情况下，可能是：

上面的代码行在视觉上不会做任何事情，但它会触发整个转换生命周期。开始和结束是正确的事件，我们可以对它们附加回调，并对这些事件执行我们想要的任何操作。例如，我们可以触发浏览器警报，云从，告诉用户我们正在开始和结束转换：

这将在页面刷新后立即触发两个弹出窗口。我们还可以将转换的开始时间延迟几秒（2000miliseconds=2秒：

我们还可以定义转换持续的时间。因此在下面的示例中，计划在刷新后2秒开始（当开始提醒出现时），持续时间为5秒。因此结束提醒在页面刷新后7秒出现。

我们已经讨论了计划、开始和结束。现在让我们看看运行情况。

在手绘动画的日子里，迪士尼的经验更丰富的艺术家不会以每秒24帧的速度绘制所有帧。相反，他们会在动画中绘制点；通常点之间的移动相对简单。这些被称为关键帧。年轻、经验较少（且成本较低）的艺术家会填充关键帧之间的帧；这一过程被称为中间帧，或者简称tweening。这个过程也用于计算机动画，包括2D和3D类型。例如，在为计算机游戏准备动画时，3D艺术家将定义演员动作的关键帧。在运行时，图形引擎将通过计算执行tweening；提供关键帧之间的平滑运动。

D3中的变换也是基于关键帧的。始终有两个关键帧：开始关键帧和结束关键帧。D3使用内置的tweening功能来协调帧的计时和属性的更新。反过来，它使用插值函数来确定动画的时间间隔帧之间的瞬时值。插值函数每帧触发一次，并返回所讨论的属性或样式的计算值。D3包含许多内置插值函数，将尝试使用其中一个，阿里大数据，取决于转换的数据类型。

D3内置了内插器，用于处理以下情况：

如果您需要自定义内插器，您可以覆盖标准attrTween或styleTween并实现您自己的，随着自定义插值。

我们的规格旋转其原点，并借给自己一个简单的动画，使用D3的内置旋转插值。我们简单地添加一个属性更新到过渡（）函数，并要求它执行一个旋转转换，广西大数据，与指定的结束角：

不透明，由一个介于0和1之间的数字定义，这是另一件可以由内置的D3属性插值器处理的事情。在这里，我们将两个过渡链接在一起。第一个过渡会立即将仪表外圈的不透明度设置为0（完全透明）。第二个计划淡入，将"填充不透明度"恢复为1；使外圈完全不透明。

由于D3没有内置的圆弧径向插值器，标准的attrTween（）函数不知道如何处理它。因此，我们需要重写标准的attrTween（）函数。我们不需要重写标准的interpolate（）函数，因为我们将使用角度，让它作为一个标准的线性插值。attrTween（）函数将采取插值角度在每一帧和更新弧，arcDef.

这个视频显示动画（除了环淡入淡出）在行动：

下次，我们将把动画的组成部分。