5分钟用动效工厂实现粒子动画前端动效动画场景前端框架

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

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

动效工厂在实现自定义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去管理所有的粒子，主要是用来

控制粒子的数量
生成多个类型的粒子
执行渲染操作
控制粒子的 x 方向速度和 y方向的速度在哪一个区间

其实这些就是所谓的统一管理，代码就不展示了。其实上面所谓的这些操作就是构成了粒子action 的一些配置
ACTION编写我们打开到这个目录

文章图片

这里面有我们动效工厂所有的action，比如我这里其实就是新建一个 particle-action.ts
这里先看下一个action最基本的结构是如何实现的。

文章图片

就是actionConfig 这里的话其实就是对应到动效工厂可视化视图的哪些属性，我们会有一些默认属性，也就是每个action 固定的一些属性，但是同时也会有保持特殊的情况。然后你在导出一个Action 函数
【5分钟用动效工厂实现粒子动画】我们看下这里是如何写的，这里其实都是固定写法。但是我还是想讲的明白点：
首先action肯定是作用在视图上的，在动效工厂里其实就是对应的View
然后就是一些缓动动画，的一些参数，我们看下代码

export const particleAction: Action = ( view: View, { timing, color, radius, duration, ...config }, ) => { let ctx: CanvasRenderingContext2D | null return (time: number) => { const progress = useProgress(time, timing, duration, config) useOnce(() => { ctx = view.makeCanvas().getContext('2d') }) if (ctx) { view.addLayer(ctx.canvas) } } }

这里用到了 2个独立的钩子
useOnce 和 useProgress
这里要不得不提了，为啥要用钩子，最主要的目的是方便action在调用的时候和frame联动（这里借鉴了React hooks 的思想）
设置或者获取当前frame的duration，我简单给大家介绍几个
useCache
缓存变量，保持action的执行过程
useState
保存和修改action的状态
useOnce
在Frame的整个生命周期中只会被执行一次。
useFinish
在Frame被移除的时候执行
useContext
获取frame的当前的wind。
useProgress
获取当前的进度是多少
useOnce
其实有点类似于单例，我们只创建一次，因为上面的函数是每一帧都进行了调用, 所以为了避免重复创建所存在的问题
我这里简单的说一下，这行代码
ctx = view.makeCanvas().getContext('2d')
其实view 只是我们抽象出来的东西，无论你做什么操作，也就是渲染画面，都是依赖canvas。所以view 上都makeCanvas 实例的方法，后面所有的动作，都在这个canvas 上去渲染，从而形成动画。
2d 其实是一种最简单也是最常用的方法，但是canvas 不仅仅只有 2d 还有webgl 和 webgl2。
其实也就是说白了我们这个东西后面扩展 3d 能力是OK的，其实我也做了一些尝试，但是由于业务场景不是特别多，也是自己展示。
我这里可以给大家分享一下我用我们动效工厂 3D 做出的动画。

好了言归正传我们继续写我们的粒子action
我们看下这张图：

文章图片

一个粒子在固定的view 移动，如果移动边界，其实也就是这时候速度该怎么变化呢，其实也就是所谓的碰撞检测
我这里其实就是有一个弹力系数，当粒子运动到边界也就是粒子的vx 方向和 vy 方向变成相反方向，如果没有开启碰撞检测的话，其实就是去改变粒子的位置，设置粒子的 x 和 y 值在对应的位置。看下面这张图

文章图片

我这只是一个方向的。代码如下：
// 碰撞检测

checkWall(isWallCollisionTest = true, bounce = 1, W = 1000, H = 1000) { if (isWallCollisionTest) { if (this.x + this.radius > W) { this.x = W - this.radius; this.vx *= -bounce; } else if (this.x - this.radius < 0) { this.x = this.radius; this.vx *= -bounce; } if (this.y + this.radius > H) { this.y = H - this.radius; this.vy *= -bounce; } else if (this.y - this.radius < 0) { this.y = this.radius; this.vy *= -bounce; } } else { if (this.x - this.radius > W) { this.x = 0; } else if (this.x + this.radius < 0) { this.x = W; } if (this.y - this.radius > H) { this.y = 0; } else if (this.y + this.radius < 0) { this.y = H; } } }

我们我设置100 的粒子我们看下碰撞检测的效果：

文章图片

这里的卡顿是录制视频的时候卡顿和我们其他没关系的。canvas 粒子数量不够多的时候是不会卡顿的。
文字粒子然后我们在当前的粒子上进行了扩充，扩充下文字粒子。这里其实简单说下，canvas整个画布其实就是像素点，我们可以实现原理其实很简单，Canvas中有个getImageData的方法，可以得到一个矩形范围所有像素点数据。那么我们就试试来获取一个文字的形状吧。
data属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。像素从左到右被处理，然后往下，遍历整个数组
我这里使用的画布大小是 1000 * 1000，用坐标系来表示就是x轴1000，y轴1000
其实就是RGBA(255,255,255,0) 这四个类似的数字表示一个像素，那10001000这个画布用Uint8ClampedArray数组表示，总共由多少个元素呢？就是1000 1000 * 4 个元素
第一步，用 measureText 的方法来计算出文字适当的尺寸和位置。

const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d'); canvas.setAttribute('width', 1000); canvas.setAttribute('height', 1000); ctx.clearRect(0, 0, 1000, 1000) ctx.font = 'bold 10p Arial' const measure = ctx.measureText(this.text) const size = 0.15 const fSize = Math.min(1000 * size * 10 / 7, 1000 * size * 10 / measure.width); // 10像素字体行高 lineHeight=7 magic ctx.font = `${fSize}px Arial`; let left = (1000 - measure.width) / 2 - measure.width / 2; const bottom = (1000 + fSize / 10 * 7) / 2; ctx.fillText(this.text, left, bottom) const imageData = https://www.it610.com/article/ctx.getImageData(0, 0, 1000, 1000).data for (let x = 0; x < 1000; x += 4) { for (let y = 0; y < 1000; y += 4) { const fontIndex = (x + y * 1000) * 4 + 3; if (imageData[fontIndex]> 0) { this.points.push({ x, y }) } } }

其实这里我们就获得像素，获得文字所组成的像素点。然后我们就可以渲染了，这里我们看下下面这个视频：

为什么用动效工厂？？这些你都不需要去重新写，你只要会用我们的动效工厂、简单配置就可以生成上面的粒子动画。