基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果

写在最前

本次分享一个用canvas粒子渲染文字的“完整”版实现，功能包括：随机粒子缓动动画，粒子汇聚、发散，并拼出你想要的文字。本文继续上面一节基于canvas使用粒子拼出你想要的文字的基础效果，完善了在文字拼接过程中的粒子效果。

欢迎关注我的博客，不定期更新中——

上节回顾

自上次的分享基于canvas使用粒子拼出你想要的文字，我们实现了一个可配置的用粒子拼出想要的文字效果，不过这个效果是静态的，就像这样：

这次我们试图对它进行了一些完善，让其可以尽量完整的实现我们的诉求。

效果图

惯例直接看下效果图：

这是一个事先配置好的动画效果用来展示一下粒子的完整运动轨迹。在这个例子中我们做了以下几件事：
- 初始化一定数量的粒子，开始缓动
- 监听到输入事件后，拼出相应文字。其拼接的粒子是从缓动中的随机粒子抽取，如果不够则新加粒子
- 当再次监听到输入事件后，原文字散开到随机位置，新文字按照上一步进行绘制，以此往复

故本次我们讨论的重点则围绕缓动动画与粒子的汇聚与散开进行展开

整体逻辑

先来分析一下整体的实现思路

1、首先为了增加粒子的重用性，不需要每次拼新的文字都new一堆新的粒子。故选择维护了两个数组进行存放相应粒子。即随机缓动数组与展示效果数组

2、初始化一定数目粒子，粒子位置随机，半径随机，加入到随机粒子数组

3、对加入到随机粒子数组中的对象执行缓动动画

4、监听事件被触发，清空展示粒子数组，将当前页面所有粒子全部加入到随机粒子数组，同时更新粒子状态，让每个粒子重新出现在各个随机位置

5、当拼接文字开始，每次需要绘制一个粒子到拼接的地点时则从随机粒子数组中pop出一个粒子对象，更新粒子的位置等信息，push到展示粒子数组中，如果随机粒子数组数量不够，则新建对象添加到展示粒子数组。

6、展示粒子数组中的粒子收集完毕后，遍历数组依次渲染到指定位置

新的监听事件被触发重复以上的4、5、6步骤

实现核心

• 随机粒子的缓动动画
• 从随机粒子变为展示粒子的过程中，需要绘制出粒子的运动轨迹以实现发散与汇聚的效果

缓动动画

就像下面这样：