[聚合文章] 一步步实现nest粒子特效

本文首发于 我的博客 ， 这是我的github ，欢迎star。

这篇博客是模仿 nest.js 实现一个 demo ，由简单到复杂，来一步步的实现它。 这里是效果预览 。 我的github 里边还有很多别的前端的 demo ，喜欢的话可以点个 star ，你的支持就是我的动力。

从一道面试题开始

实现一个半径 10px 的小球在 500px*500px 的方块中做直线运动，初始方向随机，速度保持不变，碰撞到墙壁后反弹。

   看下效果 ，思路很简单，将小球定位在方块中，设置 xy 方向上的速度，每帧动画给小球定位的值加上对应方向的速度值，在检测到小球碰撞墙壁的时候，将对应方向的速度置为反方向就可以了。 这里是实现的代码 ，没有用到 canvas ，但是思路一致。

尝试实现

画出一个弹射的小球很简单，那怎么用多个小球实现 nest.js 这样的效果呢。这样的特效肯定不能用 Dom 直接做，太耗费性能，也做不出来，这时就显露出 canvas 的强大之处了。

同样的，用 canvas 生成多个弹来弹去的小球。首先不要管鼠标如何吸附这些小圆点，只做小球之间的连线。在每次绘制小球之前，判断一下它和之前的小球的距离是不是小于极限距离，小于就以它俩为端点绘制一条线。代码如下，思路都写在注释里：

const theCanvas = document.getElementById('theCanvas'),
  ctx = theCanvas.getContext('2d'),
  mix = 6000;   //会产生连线的极限距离的平方

//将canvas铺满浏览器
let canvas_width = theCanvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
  canvas_height = theCanvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
  points = [];
theCanvas.style = "position: fixed; top: 0px; left: 0px;";

//绘制函数，用requestAnimationFrame调用实现动画
function draw() {
  //清屏
  ctx.clearRect(0, 0, canvas_width, canvas_height);
  let i,pi,x_dist,y_dist;

  //遍历点集合绘制线条
  points.forEach((p, index) => {
    p.x += p.xa,        //按指定速度移动
    p.y += p.ya,
    p.xa *= p.x > canvas_width || p.x < 0 ? -1 : 1,
    p.ya *= p.y > canvas_height || p.y < 0 ? -1 : 1,
    ctx.fillRect(p.x - 0.5, p.y - 0.5, 1, 1);        //绘制点，其实是小方块

    //类似于握手问题，两个点之间只绘制一次线
    for(i = index + 1; i < points.length; i++) {
      pi = points[i];
      x_dist = p.x - pi.x;
      y_dist = p.y - pi.y;
      dist = x_dist * x_dist + y_dist * y_dist;
      //判断点之间的距离是否小于极限距离
      if(dist < mix) {
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(pi.x, pi.y);
        ctx.stroke();
      }
    }
  }),requestAnimationFrame(draw);
}

//随机生成100个点
for(let i = 0; i < 100; i++ ) {

  let    x = Math.random() * canvas_width,    //初始坐标
    y = Math.random() * canvas_height,
    xa = 2 * Math.random() - 1,            //x速度
    ya = 2 * Math.random() - 1;            //y速度

  points[i] = {x, y, xa, ya};
}

draw();

看下效果，丑陋，和人家的不一样，很生硬。因为连线不是突然出现突然消失的，点和点之间的连线是渐渐的出现，然后渐渐消失的。给连线添加动态的属性，用点和点的之间的距离来计算连线的粗细、透明度，在两点距离比较远的时候线会变淡，这样看起来就舒服多了。

for(i = index + 1; i < points.length; i++) {
  pi = points[i];
  x_dist = p.x - pi.x;
  y_dist = p.y - pi.y;
  dist = x_dist * x_dist + y_dist * y_dist;
  //根据两点距离得到一个参数w
  w = (mix - dist) / mix;
  //判断点之间的距离是否小于极限距离
  if(dist < mix) {
    ctx.beginPath();
    //根据参数w设置连线宽度和透明度
    ctx.lineWidth = w / 2;
    ctx.strokeStyle = `rgba(110,110,110,${w + 0.2})`;
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(pi.x, pi.y);
    ctx.stroke();
  }
}

添加鼠标事件

先是加入对鼠标的响应。在鼠标进入浏览器时添加鼠标这个点，否则移除。

window.onmousemove = e => {
  e = e || window.event;
  current_point.x = e.clientX;
  current_point.y = e.clientY;
};
window.onmouseout = () => {
  current_point.x = null;
  current_point.y = null;
};
//将鼠标的点添加至点集合中
all_points = [...random_points,current_point];

要实现一个鼠标吸附粒子的效果，思路就是粒子和鼠标的距离在一定范围内时，给粒子添加一个向着鼠标的速度，结果就好像是粒子受到鼠标的吸附一样。这是一段鼠标吸附效果的核心代码：

//当两点距离小于极限距离时产生连线，当第二个点是鼠标所产生点时，粒子如果在范围内就会产生向鼠标点的速度，实现吸附效果
dist < pi.max && (pi === current_point && dist >= pi.max / 2 && (p.x -= 0.03 * x_dist, p.y -= 0.03 * y_dist));

加入鼠标的点之后再做一些调整，得到 最终的代码 。

其他的粒子特效

还可以利用 canvas 的 getImageData 属性，将图片粒子化，做成轮播图， 点击这里预览 ，主要思路是用 getImageData 取到图片像素点的信息，每隔一段取一个样本，以这个样本绘制粒子，绘制出类似于马赛克一样的图片，然后给粒子加上运动的效果就可以了， 这里是具体的代码实现 。

这篇博客到这就结束了， 这是我的github ，欢迎来访，欢迎star。