游戏开发之粒子动画原理剖析

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

粒子的定义

所谓粒子，就是空间中看起来很小的点。

使用粒子动画可以创建:

1. 雨雪沙的效果
2. 星空效果
3. 特效

粒子动画原理

跟动画原理是一致的，都是利用了刷新帧。 随机的粒子动画是很简单的，使用Math.random()就可以了。 重点是要有规律地改变粒子运动轨迹。

常见的粒子效果有粒子聚集和粒子散开的效果。本文对粒子聚集效果作一个简单分析。

粒子聚集实现

初始化粒子位置

要想聚集粒子，首先粒子要是散开的先。怎么实现呢?

    const min = 1;
    const max = 10;
    particle.visible = false;
    const x = Math.random() > 0.5 ? 1 : -1;
    const z = Math.random() > 0.5 ? 1 : -1;
    particle.visible = true;
    particle.position.x = (min + (max - min) * Math.random()) * x;
    particle.position.y = min + (max - min) * Math.random();
    particle.position.z = (min + (max - min) * Math.random()) * z;
复制代码

首先要保证粒子是围绕一个物体散开的，这就需要一个最大最小值来限定范围。

然后x,y,z的值就是从1到10随机生成的或正或负的值，通过上面代码我们实际上生成了均匀分布在以物体原点建立的三维坐标系的众多粒子，均匀分布在8个三维象限空间。

粒子向物体原点聚集

有了上述粒子初始位置的基础，我们需要将粒子聚集到物体原点的位置。 怎么做呢?

    const min = 4;
    const max = 10;
    particle.visible = false;
    const x = Math.random() > 0.5 ? 1 : -1;
    const z = Math.random() > 0.5 ? 1 : -1;
    particle.visible = true;
    particle.position.x = min * Math.random() * x;
    particle.position.y = min * Math.random();
    particle.position.z = min * Math.random() * z;
复制代码

通过上述代码，我们将粒子无线接近于物体边缘。如果我们将min设置为1，粒子将进入物体里。这里就具体看你想要怎样的聚集效果呢。

开始粒子动画

初始位置和终止位置都有了，剩下的就是运行动画了。

通常我们都会有一个封装好的逐帧动画库。

    setTimeout(() => {
      if (!this.gathering) {
        return;
      } else {
        particle.visible = true;
        const duration = 500 + Math.random() * 400;
        console.log("animation");
        customAnimation.to(
          particle.position,
          {
            x: particle.position.x,
            y: particle.position.y,
            z: particle.position.z,
          },
          to,
          null,
          duration,
          (value) => {
            if (particle.gathering) {
              this._gatherParticle(particle);
            }
          }
        );
      }
    }, 500 * Math.random());
复制代码

通过在粒子聚集结束时重新调用聚集函数，我们实现不停的聚集效果。