D3.js 中的动画

D3.js 通过 transition 提供对动画的支持。 我们可以结合 transition 创建动画。 Transition 是具有两个基本关键帧的**关键帧动画**的任何有限模式，这两个关键帧是**开始**和**结束**。

**关键帧开始**通常是 DOM 的当前状态，而**关键帧结束**是我们描述的样式、属性和其他属性的集合。 Transition 非常适合转换到任何新视图，而无需任何复杂代码来依赖于开始视图。

考虑下面的示例

示例

在以下示例中，文档背景颜色从白色修改为石灰绿，再到红色。

让我们通过以下说明来理解这个概念

输出

方法

下面列出了三种方法

1. Duration() 方法

此方法允许属性更改在任何指定持续时间内有效显示，而不是立即显示。

让我们使用以下示例创建一个将花费 5 秒的 transition

示例

输出

在上面的插图中，transition 均匀且有效地出现。 此外，我们可以使用以下代码直接分配 RGB 颜色的代码值

2. Interpolate() 方法

D3.js 支持以下基本插值类型

• **字符串插值：**它支持字符串。
• **InterpolateRGB：**它支持颜色。
• **interpolateNumber：**它支持数值。

D3 提供了使用适当的插值技术以及一些高级用例的功能。 此外，如果需要，我们可以直接应用插值技术来获得我们的基本结果。 我们甚至可以根据需要创建任何新的插值方法。

语法

3. delay() 方法

此方法允许 transition 在任何特定时间段后获取位置。

看下面的插图

示例

输出

Transition 生命周期

Transition 的生命周期分为四个阶段，如下所示

• Transition 已排定
• Transition 开始
• Transition 运行
• Transition 结束

Transition 已排定

创建 transition 时，会将其排定。 如果我们调用 selection.transition 方法，那么我们排定了一个 transition。 如果我们调用 style()、attr() 和另一个 transition 来描述关键帧结束，也会发生这种情况。

Transition 开始

任何 transition 都会根据其延迟开始，如果排定了 transition，则会描述该延迟。 如果未描述任何延迟，transition 将尽快开始，几毫秒后。

当 transition 包含延迟时，无论何时 transition 开始，都必须设置起始值。 因此，我们可以通过监听任何 start 事件来实现它

Transition 运行

如果 transition 执行，那么它将与 transition 的值一起重复调用，其范围从 0 到 1。 Transition 很容易管理时间，扭曲时间，例如慢出和慢入。 一些简单的函数可以临时提供 t 值小于 0 且大于 1。

Transition 结束

生命周期的这一阶段表示结束时间始终恰好为 1。 因此，如果在 transition 将要结束时设置结束值。 transition 将根据其持续时间和延迟结束。 当 transition 将要结束时，将分派一个 end 事件。