用 Canvas 绘制飞线
2016-08-17 本文已影响1724人
HeyDelilah
2016-05-12
用 Canvas 绘制飞线
背景
上一周完成了地图与飞线的实现，使用的是 d3.js + svg，后发现可能存在性能隐患。
当飞线数量多的时候，页面上则有多个 svg <path> 结点，并且每条飞线有头部、结束圆圈、蒙板等效果，则页面上的结点数是 飞线数*其他部件数。将会是一个较大的值。
Canvas 飞线动画
动画飞线
画布罩在整个 HTML 上，共两层 Canvas 画布，底层绘制世界地图，表层绘制飞线。
layer
与 SVG 飞线 对比
- SVG 飞线：
- 一条飞线是一个 SVG
<path>结点； - 使用 d3.js 中
.transition()下的子方法.attrTween()，对于中间帧每一个状态，改变其<path>结点里的d属性；
- 一条飞线是一个 SVG
- Canvas 飞线：
- 底下的地图绘制在一张画布中，而飞线绘制在另一张画布中；
- 每一帧都重新清除掉飞线画布，重新绘制每一条飞线；
两者共同点：
- 通过不断计算飞线 p 点（起、终点之间的任一点）的位置，一次次绘制从起点到 p 的二次贝塞尔曲线；
- 飞线的起点不变，p 点坐标不断改变
二次贝塞尔曲线公式
二次贝塞尔曲线公式
（其中 起始点 p0, 控制点 p1, 终点 p2）
t 从 0 变到 1，每个 t 的变化时，就绘制一帧；
飞线的速度就取决于增量变化的大小，增量越小，动画就越细致。
如何表现 t ？
给每一个飞线对象单独一个 t 属性，每绘制完一帧，t = t + 增量(固定值)；
requestAnimationFrame 动画
飞线取数设计
- 总数据池: －不断轮询服务端，增加要绘制飞线的数据；
- 飞线数据: 存放的是每一帧要绘制在页面上的飞线。 只要有值，就用
requestAnimationFrame不断调用动画；
飞线样式
与 SVG 飞线 相比:
-
SVG 飞线：
- 使用蒙板跟随飞线尾部的方式
-
Canvas 飞线
- 使用渐变填充色，对每一条飞线，都重新生成该飞线起点到 p 点的线性渐变；
渐变色
渐变消失: ctx.globalAlpha
另一种飞线动画的实现方式
使用 globalAlpha 和 临时 Canvas；
但有两个弊端：
- 无法做停留：飞线飞完之后，想停留个几毫秒再消失
- 尾巴长度难控制，太长的话有明显的间隔。
飞线性能测试
一、同等情况下，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 时，卡顿非常严重，几乎无法完整看到飞线动画
