D3 4.x数据可视化实战手册（第2版）

第6章　优雅变换

本章涵盖以下内容：

• 单元素动画
• 多元素动画
• 使用缓动函数
• 使用中间帧计算
• 使用级联过渡
• 使用选择性过渡
• 监听过渡事件
• 使用定时器

6.1　简介

“一图胜千言。”

这句古老的谚语大概是数据可视化最重要的基石之一。动画是由一系列静止图像的快速播放而形成的。人类的眼睛和大脑是借助正后像（positive afterimage），飞现象（phiphenomenon，是一种错视现象，描述一连串静态图片会造成移动的错觉）和beta运动（beta movement）产生连续影像的错觉。正如Rick Parent在他的杰作《计算机动画算法与技术》（Computer Animation Algorithms and Techniques）中指出的：

由于人类视觉系统是一个精妙的信息处理器，因此图像可以传递海量信息，并且移动的图像能在短时间内传达更多的信息。的确，在世界不断的演变过程中，人类的视觉系统也在不断地进化，对于移动的物体，它能够更好地聚焦。

——R. Parent（2012年）

这正是数据可视化中动画效果的目的所在。在本章中，我们将集中介绍D3的动画机制，它包括基础知识和一些进阶内容（如自定义插值器和基于定时器的过渡效果）。过渡不仅能将视觉效果由枯燥变得炫目，更增添了D3的表现力。一些原本难以视觉化的元素（例如趋势和区别），都能够很好地可视化。

什么是过渡

D3的过渡特性使我们可以在网页上用HTML和SVG创造计算机动画。D3过渡实现了一种基于插值的动画（Interpolation-based Animation）。受计算机本身特性影响，大多数计算机动画是基于插值的。顾名思义，这种动画技术的基础是插值。

读者肯定还记得，本书第4章中详细讲解过D3的插值器和插值函数。过渡是基于插值和尺度的，它能随着时间不断变换相应的值，从而形成动画。每个过渡都有起始和结束值（在动画中也称关键帧），然后使用不同的算法和插值器，在帧与帧之间插入中间值（这称为in-betweening或简称tweening）。这样看来，似乎如果对算法和技术不够熟悉，那么创建动画时会很吃力。然而，事实并非如此，基于插值的过渡可以对每一帧运动轨迹提供期望，因此能够强有力地控制整体动画效果。事实上，D3过渡效果API具有良好的设计，在大多数情况下，寥寥几行代码就足以实现数据可视化项目所需的动画效果。现在，就让我们通过几个例子来深入探讨这一主题。 ...