Canvas 粒子线条动效

2017年5月11日

一、动效描述

​许许多多不同颜色、不同形状的图形在画布中随机运动，彼此的连线随着距离远近而变化。当点击画布上某一个图形时，所有该图形的同类图形都以它为中心汇聚起来，并显示一些文案信息。

canvas 粒子线条动效

二、要点

1. 粒子

• 生成一系列的随机粒子。
• 每个粒子拥有 X, Y, 形状, 颜色等信息。

a. 运动速度
​

对 X 方向 与 Y 方向分别定义增量：speedx , speedy ; 每帧动画都对粒子的 X,Y 的值，加上此增量，发生位移。

this.x = this.x + this.speedx;
this.y = this.y + this.speedy; 

​
b. 运动方向

speedx , speedy 的正负表示其方向，存在四种情况（上下左右）。

​c. 触壁反弹 ​

把粒子的 X,Y 值与画布的长宽比较，一旦超出范围就改变其方向。

2. 线条

两两相连，每两个粒子间都绘制一条直线，共 C(n, 2) 条。

但这样绘制出来的线条太多太密集，调整为透明度随着两点的距离增大而递减，当超过一定距离后，直接不绘制。

context.globalAlpha = (config.DISTANCE - d) / config.DISTANCE;

3. Canvas 交互

• 鼠标点击某个粒子后，与该粒子属于同组的粒子们，向中心靠拢
  • 数学公式：已知起点和终点，求直线上任一P点从终点向起点运动的过程。

使用 Canvas 技术展示动效时，交互上相对没有使用 CSS + HTML 那么灵活，因为在页面上只存在一个 DOM 节点，即 <canvas> 标签节点。但也可以通过记录下每个粒子的 X, Y 坐标值，与鼠标 mousemove 或者 click 时的坐标值对比，来控制粒子的下一步运动。

如以圆粒子为例：

• 当鼠标落在圆内时候，便认为选中此粒子。

var d = Math.sqrt(Math.pow(circle.x - clickX, 2)+ Math.pow(circle.y - clickY, 2));

if (d <= circle.radius) {
    ...
}

鼠标交互

三、总结与体会

“动效” 即 “变化”，可从三个角度来看：形状、材质、定位。

1. 形状：几何形状、不规则形状等；以及包括形变，如大小变化、拉伸缩短等；
2. 材质：如颜色、图案、透明度、阴影等；
3. 定位：坐标 X，Y

控制好每个属性的变化过程，则是完成一次动效过程。

尚有许多可优化之处，如目前粒子们都在各自做匀速随机运动，若想是的粒子运动更为真实，可能还需加上粒子之间的碰撞力以及碰撞带来的方向变化和速度变化等。