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) 的值,你就会明白了~

推荐阅读更多精彩内容

  • d3 (核心部分)选择集d3.select - 从当前文档中选择一系列元素。d3.selectAll - 从当前文...
    谢大见阅读 2,453评论 1 4
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 141,623评论 20 608
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 8,846评论 2 48
  • 洪崖洞里灯火, 怎么忍心错过? 隔岸江风习习, 满眼璀璨碧波。 ——【闹三闹万一】羊蹄甲与洪崖洞
    胖闲字画阅读 156评论 0 11
  • 摄影:高旭,摄影爱好者。
    河池印象阅读 32评论 0 1