D3 制作数字动效

本文假定读者有一定 javascript 和 D3 (《如何自学 D3》) 基础，若对 web 开发不太熟悉的同学，可先行了解下 js 中的高阶函数、this指向等知识，以便更容易理解代码。

Dashboard中经常会有数字动效的制作需求。

比如这种：

demo地址: https://github.com/mark0322/xCharts/tree/master/charts/Text

或者这种：

demo地址: https://github.com/mark0322/xCharts/tree/master/charts/Donut

今天，我们就来聊一下，如何用 D3 制作数字动效。

D3 中的动画效果通过 d3-transition 模块实现。

这里简述一下动画原理：我们小时候都见过下图的翻书动画，即短时间内出现多张"相近"的图片，人的视觉会将这些快速闪现的静态图片感知为动画。

图片来自网络

任何动画、视频都是基于此原理，d3-transition 的动画原理也是如此。

话不多说，我们先看下第一张动图 数字动画的核心代码：

// 定义 动画 的持续时间为 1.5S
const t = d3.transition().duration(1500);

// SVG 画布上添加文字，并加入动画
svg.append('text')
    .transition(t)
    .text(9999) // 设定数字的最终值
    .tween('d', function() {

        // [注1]：获得数字的终止值
        const val = d3.select(this).text();

        // [注2]：定义插值函数
        const i = d3.interpolateNumber(0, val);

        // [注3]："动画函数"
        return t => {

            // [注4]：通过 插值函数 与 tween() 结合，绘制动画
            d3.select(this).text((i(t) | 0);

            // console.log(t, i(t));
        }
    });

[注1]：获得数字的最终值：9999。

[注2]：因为数字动画为0 ~ 9999的动画，所以用插值函数将0 ~ 9999 “归一化”为0 ~ 1的映射，以便后续动画函数中调用。eg: i(0.1) -> 999.9 i(0.5) –> 4999.5

[注3] + [注4]：如上文所述的动画原理，.tween() 的原理为：将2s的动画切成2s内的很多个“时间切片”，每个“时间切片”均执行“动画函数”，该“动画函数”的参数 t 即为 0~1 (归一化) 的对应值。

很晕是不是？分别打印出t / i(t) 的值，你就会明白了~