一种粒子动画实现方法

技术领域

本发明涉及前端开发领域，具体提供一种粒子动画实现方法。

背景技术

动画开发是用来提高用户体验,满足商业宣传需求及增强用户粘合度的一种高效方法,在传统的开发方式中,一个网站或应用的界面只能满足最基本需求的简单动画,复杂动画的实现非常困难。当需要实现一个较为复杂的动画时，首先需要写一套完整的逻辑，且对动画的每一部分进行不同的控制，对动画的每一帧进行逻辑判断，当有不同轨迹或动画变换时，更是需要一连串的逻辑进行解析控制，最终形成的动画却也不能保证流畅度等视觉效果。

随着技术提升，出现了很多的绘制图形的方式，但是，也很难做出一个流畅、美观、具有3d视感的粒子动画，如何解决这种问题，是本领域技术人员亟待解决的事情。

发明内容

本发明是针对上述现有技术的不足，提供一种实用性强的粒子动画实现方法。

本发明解决其技术问题所采用的技术方案是：

一种粒子动画实现方法，具有如下步骤：

S1、获取画布上所有像素的数据；

S2、读取像素信息；

S3、保存有用像素到画布；

S4、使用Tween算法形成粒子动画；

S5、使用requestAnimationFrame重绘并设置位置偏差。

进一步的，在步骤S1中，进一步包括：

S101、进行初始化操作；

S102、绘制当前画布；

S103、使用getImageData接口。

进一步的，S101、进行初始化操作：包含新建画布并获取其上下文、绘制环境，为之后的图形绘制做准备；

S102、绘制当前画布：使用drawImage将一个image对象或者canvas上指定位置和尺寸的图像，或video对象上的每一帧绘制到当前的画布上；

S103、使用getImageData接口：获取画布上指定位置的所有像素的数据，设置获取出的数组保存像素信息的排序规则。

进一步的，在步骤S2中，读取像素信息，图像中第i行第j列的R、G、B、A像素值信息为：

Rij＝[(j-1)*imageData.width+(i-1)]*4，

Gij＝[(j-1)*imageData.width+(i-1)]*4+1，

Bij＝[(j-1)*imageData.width+(i-1)]*4+2，

Aij＝[(j-1)*imageData.width+(i-1)]*4+3。

进一步的，在步骤S3中，设定每行和每列要显示的粒子数，分别是cols和rows，每个粒子代表一个单元格，每个单元格的的宽高就是imageWidth/cols和imageHeight/rows，然后循环的判断每个单元格的第一个像素是否满足像素值的条件，如果满足了，就把这个单元格的坐标保存到数组里，用作后续绘制图案用；

保存有用的像素并绘制到画布上。

进一步的，在步骤S4中，进一步包括：

S401、分析可用的缓动动画函数；

S402、找出适合本动画的函数并使用；

S403、制定粒子的起始点、终点以及动画执行持续时间。

进一步的，在步骤S401中，分析可用的缓动动画函数，解决动画轨迹及每个粒子执行动画的时机；

在步骤S403中，使用Tween算法的缓动函数制定粒子的起始点、终点以及动画执行持续时间，形成粒子动画。

进一步的，在步骤S5中，给每个粒子设置不同的时间间隔启动，根据一定的规律交错的执行动画，设置随机启动时间，使用requestAnimationFrame不断重绘并设置随机位置偏差，保持动画播放。

本发明的一种粒子动画实现方法和现有技术相比，具有以下突出的有益效果：

本发明利用canvas的图形绘制方法，结合物理知识，对图形的形状、运动速度、运动界限、角度、尺寸等进行计算，使用canvas的API绘制并得到最终的粒子动画。解决了开发中对于像素级动画实现的难题，不再局限于简单动画的实现方式，采用了更能体现科技感的方式进行动画的开发，为复杂动画及需要像素处理的动画开发提供了方法。极大提高了开发人员效率，解决了粒子动画开发的难题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

附图1是一种粒子动画实现方法中像素信息排列规则图。

具体实施方式

为了使本技术领域的人员更好的理解本发明的方案，下面结合具体的实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本发明保护的范围。

下面给出一个最佳实施例：

如图1所示，本实施例中的一种粒子动画实现方法，具有如下步骤：

S1、获取画布上所有像素的数据：

进一步的包括：

S101、进行初始化操作：包含新建画布并获取其上下文、绘制环境，为之后的图形绘制做准备。

S102、绘制当前画布：使用drawImage将一个image对象或者canvas上指定位置和尺寸的图像，或video对象上的每一帧绘制到当前的画布上。

S103、使用getImageData接口：获取画布上指定位置的所有像素的数据，设置获取出的数组保存像素信息的排序规则。

存像素信息的排序规则为，第一个像素点的RGBA值、第二个像素点的RGBA值，……第N个像素点的RGBA值。

S2、读取像素信息：

读取像素信息，图像中第i行第j列的R、G、B、A像素值信息为：

Rij＝[(j-1)*imageData.width+(i-1)]*4，

Gij＝[(j-1)*imageData.width+(i-1)]*4+1，

Bij＝[(j-1)*imageData.width+(i-1)]*4+2，

Aij＝[(j-1)*imageData.width+(i-1)]*4+3。

S3、保存有用像素到画布：

设定每行和每列要显示的粒子数，分别是cols和rows，每个粒子代表一个单元格，每个单元格的的宽高就是imageWidth/cols和imageHeight/rows，然后循环的判断每个单元格的第一个像素是否满足像素值的条件，如果满足了，就把这个单元格的坐标保存到数组里，用作后续绘制图案用；

保存有用的像素并绘制到画布上。

S4、使用Tween算法形成粒子动画：

进一步包括：

S401、分析可用的缓动动画函数：

分析可用的缓动动画函数，解决动画轨迹及每个粒子执行动画的时机两个难题。

S402、找出适合本动画的函数并使用。

S403、制定粒子的起始点、终点以及动画执行持续时间：

使用Tween算法的缓动函数制定粒子的起始点、终点以及动画执行持续时间，形成粒子动画。

S5、使用requestAnimationFrame重绘并设置位置偏差：

给每个粒子设置不同的时间间隔启动，根据一定的规律交错的执行动画。设置随机启动时间，使粒子运动轨迹更具运动效果。

使用requestAnimationFrame不断重绘并设置随机位置偏差，保持动画播放。

上述具体的实施方式仅是本发明具体的个案，本发明的专利保护范围包括但不限于上述具体的实施方式，任何符合本发明的一种粒子动画实现方法权利要求书的且任何所述技术领域普通技术人员对其做出的适当变化或者替换，皆应落入本发明的专利保护范围。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。