2016-05-12

用 Canvas 绘制飞线

背景

上一周完成了地图与飞线的实现，使用的是 d3.js + svg，后发现可能存在性能隐患。

当飞线数量多的时候，页面上则有多个 svg <path> 结点，并且每条飞线有头部、结束圆圈、蒙板等效果，则页面上的结点数是 飞线数*其他部件数。将会是一个较大的值。

Canvas 飞线动画

动画飞线

画布罩在整个 HTML 上，共两层 Canvas 画布，底层绘制世界地图，表层绘制飞线。

layer

与 SVG 飞线 对比

• SVG 飞线：
  1. 一条飞线是一个 SVG <path> 结点；
  2. 使用 d3.js 中 .transition() 下的子方法 .attrTween()，对于中间帧每一个状态，改变其 <path> 结点里的 d 属性；
• Canvas 飞线：
  1. 底下的地图绘制在一张画布中，而飞线绘制在另一张画布中；
  2. 每一帧都重新清除掉飞线画布，重新绘制每一条飞线；

两者共同点：

1. 通过不断计算飞线 p 点（起、终点之间的任一点）的位置，一次次绘制从起点到 p 的二次贝塞尔曲线；
2. 飞线的起点不变，p 点坐标不断改变

二次贝塞尔曲线公式

二次贝塞尔曲线公式

（其中 起始点 p0, 控制点 p1, 终点 p2）

t 从 0 变到 1，每个 t 的变化时，就绘制一帧；
飞线的速度就取决于增量变化的大小，增量越小，动画就越细致。

如何表现 t ？
给每一个飞线对象单独一个 t 属性，每绘制完一帧，t = t + 增量(固定值)；

requestAnimationFrame 动画

飞线取数设计

• 总数据池: －不断轮询服务端，增加要绘制飞线的数据；
• 飞线数据: 存放的是每一帧要绘制在页面上的飞线。 只要有值，就用 requestAnimationFrame 不断调用动画；

飞线样式

与 SVG 飞线 相比:

• SVG 飞线：

  • 使用蒙板跟随飞线尾部的方式

• Canvas 飞线

  • 使用渐变填充色，对每一条飞线，都重新生成该飞线起点到 p 点的线性渐变；

渐变色

渐变消失: ctx.globalAlpha

另一种飞线动画的实现方式

使用 globalAlpha 和 临时 Canvas；

但有两个弊端：

1. 无法做停留：飞线飞完之后，想停留个几毫秒再消失
2. 尾巴长度难控制，太长的话有明显的间隔。

• CANVAS绘制运动的轨迹效果
• echarts(baidu)-地图－模拟迁徙

飞线性能测试

一、同等情况下，svg 飞线与 canvas飞线的性能比较。

模拟数据来源于B2B 外贸单日询盘量，总数共 596 条， 单次同时绘制 50 条 飞线情况下：

	动画帧数 fps	cpu 占用率	JS Heap 内存情况	说明
svg	12 fps ～ 43 fps	高于 100%	11 mb 左右	视觉上仔细看略有卡顿
canvas	42 fps ～ 60 fps	20% ～ 30% 浮动	9.3 mb 左右	动画流畅

具体如下：

1. 动画帧数

Canvas

动画帧数保持在 42-60 左右，动画流畅；

fps-canvas
fps-chrome-canvas

SVG

动画帧数保持在 12-43 左右，视觉上仔细看略有卡顿；

fps-svg
fps-chrome-svg

2. CPU 占用率

Canvas

CPU 占用率在 20%-30% 浮动

cpu-canvas

SVG

CPU 占用率高于 100%

cpu-svg

3. JS Heap 快照

皆无内存泄漏问题。 SVG 飞线的 JS heap 总大小略高于 Canvas 飞线。

Canvas

js heap

SVG

js heap

二、Canvas飞线峰值测试

canvas飞线峰值测试

测试了 Canvas 飞线，在同时绘 50 条、100 条、200 条、300 条、400 条 时的动画流畅度。

峰值帧数

• 在50-100 时候动画流畅
• 200 时， fps 低，视觉上勉强可接受
• 300 时，有卡顿，有明显漏帧行为；
• 400 时，卡顿非常严重，几乎无法完整看到飞线动画

参考资料：

1. HTML 5 Canvas 参考手册
2. stackoverflow: I want to do animation of an object along a particular path
3. paulirish:requestAnimationFrame for Smart Animating