5分钟用动效工厂实现粒子动画

本篇文章将使用动效工厂从0-1去搭建并生成各种各样的粒子动画， 利用可视化编辑的能力，而你通过简易的操作就可以实现， 下面我就带你一步一步如何去实现一个粒子Action ，准确的来说去根据一个业务实现一个自定义的action。

读完本篇文章你可以了解到下面这几点：

1.如何实现一个自定义action
2.如何使用动效工厂

动效工厂

在实现自定义action 之前， 我先简单的介绍下我们这个项目的背景。什么是动效工厂？

我们团队用的动效场景比较多，所以沉淀了一些动效，同时为了下次在遇到可以更好的复用。于是我们能支持多少动效，或者有哪些动效可以被复用，就可以在动效工厂的动效库里去找。

这时候就会有同学说这些东西都不满足需求、不通用，于是就有了接下来要讲的的自定义action，也就是实现一个动效库没有的动画，然后再提交到动效库里，后面有类似的动效，别人也就可以复用了。

粒子动画

这里的话我带大家实现一个粒子动画， 首先还是解释什么是粒子动画？？？？

粒子动画是由在一定范围内随机生成的大量粒子产生运动而组成的动画，被广泛运用于模拟天气系统、烟雾光效等方面。在电商平台的微型游戏化场景中，粒子动画主要 用于呈现在能量收集、金币收集时的特效。

这里我给大家准备了两段我们业务场景中使用的例子：

上面的粒子还是不够多，并且给粒子 贴上对应的贴图，再以某种动画的去展示，从而达到视觉上感觉非常爽的状态，就是有一种好多的感觉！

创建粒子类

其实无论什么样的粒子效果，你光看效果你都不知道如何分析这一个动画。其实分析动画，我们可以先看一个粒子是怎么变化的。我们看下面这张图:

粒子A在画布上，从A位置经过一定的动画 可能是线性变化， 也有可能是抛物线，或者是我们的三阶贝塞尔曲线变化。 但是万变不离其宗， 本质上都x 和 y 的变化， 但是x 从 x0 运行到 x1 , y方向 从y0 运动 y1， 那么其实对应当前这个一个粒子来说 也就是需要有vx 和vy 这两个属性。这样一个粒子最基本的属性 其实对于基本的动画已经满足了。 我们写下面这段代码：

class Particle { constructor(x = 0, y = 0) { this.x = x this.y = x this.radius = 1 this.vx = 0 this.vy = 0 this.color = 'hsla(197,100%,50%,80%)' } draw(ctx) { ctx.save() ctx.fillStyle = this.color ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); ctx.restore() } move() { this.x += this.vx this.y += this.vy } 
} 

这样其实我们就能构造出当前粒子 所需要的特性。但是这时候我们还是需要一个粒子manager去管理所有的粒子，主要是用来

1.控制粒子的数量
2.生成多个类型的粒子