2019-04-25

2019-04-25 本文已影响0人广州芦苇科技web前端

最近在开发一个小程序，其中涉及动效需求，我们原先的计划是使用gif图实现该动效，但是gif图有如下三个缺点：

高质量的动效表现的gif图单个大小至少2MB。
动效细节过多难以实现无缝循环。
技术b格不高:)。

源码地址欢迎提issue

于是笔者开始着手利用canvas实现动效，首先第一步也是最重要的一步：打开github，搜索particle。在长达5分钟的搜索浏览后，发现实现一个粒子系统绝对是一个前无古人的创举。

repor
em....，容我想几个理由解释一下这种重复造轮子的心态：

thinking

大多数repository实现的并不是我们想要的效果。
有部分repository看demo好像能实现我们想要的效果，但是除了demo就没有其他了；好歹说一下怎么用吧。
无法兼容小程序：核心代码包含DOM API或者只支持webgl模式。

开始我们重复造轮子工作之前，说明一下这个轮子的由来。
在开发下述版本的粒子系统之前，其实笔者已经完成了一个JavaScript版本，但是回看代码时觉得API设计不合理、灵活性不够，所以决定用TypeScript重新写一个，期间也拜读了egret-libs的代码后，优化了API设计和粒子发射控制。项目地址

面向对象

简要说一下我们需要抽象的两个东西，粒子系统ParticleSystem和Particle。ParticleSystem借用物理引擎中的world概念，就是粒子存在的空间，假设空间中有两个属性，有纵向的重力加速度，有横向的加速度（横向的风）。Particle就是空间中存在的物体，物体有大小、质量、速度、位置、旋转角度等属性。

Particle类

先从简单的开始吧，构建一个Particle类

class Particle {
  // 生命周期
  public lifespan: number
  // 速度
  public velocityX: number
  public velocityY: number
  // 位置
  public x: number
  public y: number
  // 已经经历的时间
  public currentTime: number
  // 粒子大小
  private _startSize: number

  // 缩放比例
  public scale: number
  // 结束时的旋转角度
  public endRotation: number
  // 宽高比
  private ratio: number

  // 输入的图像宽高
  private _width: number
  private _height: number
  // 粒子纹理
  public texture: CanvasImageSource

  set startSize (size: number) {
    this._startSize = size;

    this._width = size;
    this._height = size / this.ratio;
  }

  // 获得粒子大小
  get startSize (): number {
    return this._startSize;
  }

  // 设置粒子纹理和纹理宽高信息
  public setTextureInfo (texture: CanvasImageSource, config: {
    width: number,
    height: number
  }) {
    this.texture = texture;
    this.ratio = config.width / config.height;
  }
}

由于篇幅原因，以上代码展示了绝大多数最重要的信息。其实在开发过程中，粒子的属性定义也不是一气呵成的，有些属性是后期需要再填补上去的，有些属性发现实现的功能是重复的需要精简的。
Particle中虽然有很多public属性和public方法，但是这不是对开发者开放的，实际上，整个Particle类都不对外开发，使用时也不需要手动实例化这个类，因为整个系统设计为Particle和ParticleSystem是高度耦合的。
粒子类中有一个成员方法setTextureInfo，设置粒子的纹理和宽高信息，texture即ctx.drawImage(..)时的第一个参数，后面会再次提到。需要手动设置宽高是基于兼容性的考虑，虽然这里可以把所有兼容情况都写出来，但是最后还是决定整个粒子系统中尽量不包含DOM API，选择将获取图片属性的操作留给开发者，而只需要传入宽高信息，聚焦核心功能，不实现有兼容问题的功能就是最好的兼容:)。

ParticleSystem类

ParticleSystem类无疑是粒子系统的核心，下面一步步剖析他的重要功能。

constructor

由传入的参数初始化粒子系统

constructor (
  texture: CanvasImageSource,
  textureInfo: {
    width: number,
    height: number
  },
  config: string | any,
  ctx?: CanvasRenderingContext2D,
  canvasInfo?: {
    width: number,
    height: number
  }
) {
  if (canvasInfo) {
    this.canvasWidth = canvasInfo.width;
    this.canvasHeight = canvasInfo.height;
  }
  // 保存canvas画布
  this.ctx = ctx;
  // 保存纹理信息
  this.changeTexture(texture, textureInfo);
  // 解析并保存配置信息
  this.changeConfig(config);
  // 创建粒子对象池
  this.createParticlePool();
}

从constructor的参数中就能看出是如何设计初始化API的，textureInfo的设计原因在上文说明过。ctx为可选的，这是分情况的，在需要粒子系统完成绘制画布时这是必须的，在只需要粒子系统提供绘制数据时，ctx是没必要传入的。canvasInfo也是可选的，他的作用是粒子系统清空画布时需要的数据，其实也是一个兼容性参数，后面会提到。

对象池

运行粒子系统时会有很多“粒子对象”，创建一个对象池的目的是减少运行过程中粒子创建和销毁的开销。
严格来讲，对象池应该独立于ParticleSystem，但是这里没有复用的需求且懒得去想分离的系统应该怎么设计，所以将对象池写为ParticleSystem自带的功能。
一个简单的对象池有以下三个关键的属性和方法，
pool： Array<Particle>可用的粒子对象集合
addOneParticle(): 从对象池中取出一个粒子加入渲染粒子集合
removeOneParticle(particle): 从渲染粒子集合去除一个粒子并回收到对象池
particleList: Array<Particle>渲染粒子集合，独立的对象池设计中应该不包含该属性。

addOneParticle

private addOneParticle () {
  let particle: Particle;

  if (this.pool.length) {
    particle = this.pool.pop();
  } else {
    particle = new Particle;
  }

  particle.setTextureInfo(this.texture, {
    width: this.textureWidth,
    height: this.textureHeight
  })
  // 初始化刚取出的粒子
  this.initParticle(particle);

  this.particleList.push(particle);
}

removeOneParticle

private removeOneParticle (particle: Particle) {
  let index: number = this.particleList.indexOf(particle);

  this.particleList.splice(index, 1);
  // 清除纹理引用
  particle.texture = null;

  this.pool.push(particle);
}

粒子状态初始化和更新

为了粒子系统更有表现力，粒子的某些属性应该具有随机性，结合API设计，我们封装一个获取随机数据的函数randRange(range)。

function randRange (range: number): number {
  range = Math.abs(range);
  return Math.random() * range * 2 - range;
}

粒子状态初始化和更新会用到简单的物理知识，主要是计算粒子速度和移动距离。

initParticle(particle)

粒子状态初始化方法设定粒子的初始状态，其中用到上述randRange方法来表现各个粒子的随机不同

private initParticle (particle: Particle): Particle {
  /* 省略了其他参数初始化 */

  let angle = this.angle + randRange(this.angleVariance);

  // 速度分解
  particle.velocityX = this.speed * Math.cos(angle);
  particle.velocityY = this.speed * Math.sin(angle);

  particle.startSize = this.startSize + randRange(this.startSizeVariance);

  // 缩放比例，后面的计算会用到
  particle.scale = particle.startSize / this.startSize;
}

updateParticle(particle)

public updateParticle (particle: Particle, dt: number) {
    // 上传更新状态到本次更新的时间间隔
    dt = dt / 1000;

    // 速度和位置更新
    particle.velocityX += this.gravityX * particle.scale * dt;
    particle.velocityY += this.gravityY * particle.scale * dt;
    particle.x += particle.velocityX * dt;
    particle.y += particle.velocityY * dt;
  }

更新方法

定义一个update方法控制粒子系统中的粒子是否应该被添加、删除、更新。

public update (dt: number) {
  // 是否需要新增粒子
  if (!this.$stopping) {
    this.frameTime += dt;

    // this.frameTime记录上次发射粒子到现在的时间与粒子发射间隔的差
    while (this.frameTime > 0) {
      if (this.particleList.length < this.maxParticles) {
        this.addOneParticle()
      }

      this.frameTime -= this.emissionRate;
    }
  }

  // 更新粒子状态或移除粒子
  let temp: Array<Particle> = [...this.particleList];

  temp.forEach((particle: Particle) => {
    // 如果粒子的生命周期未结束，更新该粒子的状态
    // 如果粒子的生命周期已经结束，移除该粒子
    if (particle.currentTime < particle.lifespan) {
      this.updateParticle(particle, dt);
      particle.currentTime += dt;
    } else {
      this.removeOneParticle(particle);

      if (this.$stopping && this.particleList.length === 0) {
        this.$stopped = true;

        // 粒子系统完全停止后的回调
        // 后期增加的功能，首次开发时可以不考虑
        this.onstopped && this.onstopped();
      }
    }
  })
}

update方法只涉及数据更新，并且该方法为public，这样设计是为了开发者能够通过update更新绘制数据后，自行控制粒子的绘制过程，从而将粒子系统嵌入到已有的程序中。

渲染和重绘

这里指的渲染指将粒子系统中的数据“画”到canvas画布上的过程，用到的canvas API也不多，如果你要涉及纹理的旋转，那就需要先理解一下canvas画布的transform是怎么回事了，快看这里传送门。

public render (dt: number) {
  this.update(dt);
  this.draw();
  // 兼容小程序
  (<any>this.ctx).draw && (<any>this.ctx).draw();
}

private draw () {
  this.particleList.forEach((particle: Particle) => {
    let {
      texture,
      x,
      y,
      width,
      height,
      alpha,
      rotation
    } = particle;

    let halfWidth = width / 2,
      halfHeight = height /2;

    // 保存画布状态
    this.ctx.save();

    // 将画布的右上角移动到纹理的中心位置
    this.ctx.translate(x + halfWidth, y + halfHeight);

    // 旋转画布
    this.ctx.rotate(rotation);

    if (alpha !== 1) {
      this.ctx.globalAlpha = alpha;
      this.ctx.drawImage(texture, -halfWidth, -halfHeight, width, height);
    } else {
      this.ctx.drawImage(texture, -halfWidth, -halfHeight, width, height);
    }

    // 还原画布状态
    this.ctx.restore();
  })
}

重绘画布包含两个步骤，时间控制和画布重绘，画布重绘又包含清除画布和调用render。

// dt表示循环调用的时间差
private circleDraw (dt: number) {
  if (this.$stopped) {
    return;
  }

  // 这里的处理也是为了兼容小程序（回看上面的constructor的参数）
  let width: number, height: number;
  if (this.canvasWidth) {
    width = this.canvasWidth;
    height = this.canvasHeight;
  } else if (this.ctx.canvas) {
    width  = this.ctx.canvas.width;
    height = this.ctx.canvas.width;
  }

  // 画布重绘
  this.ctx.clearRect(0, 0, width, height);
  this.render(dt);

  // 时间控制
  // 简单的兼容处理，requestAnimationFrame有更好的性能优势，
  // 当不支持时使用setTimeout代替
  if (typeof requestAnimationFrame !== 'undefined') {
    requestAnimationFrame(() => {
      let now = Date.now();
      // 计算时间差
      this.circleDraw(now - this.lastTime);
      this.lastTime = now;
    })
  } else {
    // setTimeout的缺点是程序进入后台回调依然会被执行
    setTimeout(() => {
      let now = Date.now();
      this.circleDraw(now - this.lastTime);
      this.lastTime = now;
    }, 17)
  }
}

开始和停止

启动非常简单，只要调用circleDraw就可以启动了。render方法是需要传入时间差的，所以这里需要一个this.lastTime来保存开始和上次重绘时间戳。

public start () {
  this.$stopping = false;

  if (!this.$stopped) {
    return;
  }

  this.lastTime = Date.now();

  this.$stopped = false;
  this.circleDraw(0);
}

public stop () {
  this.$stopping = true;
}

用法举例

如果你按着上述步骤或者看过项目源码或者自己写过一遍，用法部分基本没有难点了，下面是基础的用法举例。

import ParticleSystem from '../src/ParticleSystem'

// 创建canvas
const canvas: HTMLCanvasElement = document.createElement('canvas');
canvas.width = (<Window>window).innerWidth;
canvas.height = (<Window>window).innerHeight;
document.body.appendChild(canvas);

// 获取画布上下文
const ctx: CanvasRenderingContext2D = canvas.getContext('2d');

// 加载纹理
const img: HTMLImageElement = document.createElement('img');
img.src = './test/texture.png';
img.onload = () => {
  // 创建粒子系统
  const particle = new ParticleSystem(
    // 纹理资源
    img,
    // 纹理尺寸
    {
      width: img.width,
      height: img.height
    },
    // 粒子系统参数
    {
      gravity: {
        x: 10,
        y: 80
      },
      emitterX: 200,
      emitterY: -10,
      emitterXVariance: 200,
      emitterYVariance: 10,
      maxParticles: 1,
      endRotation: 2,
      endRotationVariance: 50,
      speed: 50,
      angle: Math.PI / 2,
      angleVariance: Math.PI / 2,
      startSize: 15,
      startSizeVariance: 5,
      lifespan: 5000
    },
    // 画布上下文
    ctx
  )

  particle.start();
}

在小程序平台上，有可能存在性能问题，导致粒子系统运行时FPS在15-60
之间波动很大。我们可以采用计算和渲染分离的方式实现。大致的思路是，将粒子系统运行到子线程worker中，粒子系统只负责粒子位置的计算，将计算好的数据发送给主线程，主线程调用canvas相关API，完成画布的绘制。你可以尝试实现该功能。目前项目中已用该思路实现，小程序运行粒子系统时FPS在45-60。

看这里demo

TODO

在粒子系统中加入“引力体”和”斥力体“，它们分别可以对粒子产生吸引力和排斥力，并且可以随时改变位置，这可以让粒子系统更具交互性。有兴趣的小伙伴可以自己尝试实现一下。

image

【作者简介】：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。一起并肩作战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多