canvas粒子动画的实现方法及系统与流程

本发明涉及前端开发，具体地说是一种canvas粒子动画的实现方法及系统。

背景技术：

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

2、故如何提升粒子动画的开发效率，使动画开发更先进，同时提高用户的视觉感受是目前亟待解决的技术问题。

技术实现思路

1、本发明的技术任务是提供一种canvas粒子动画的实现方法及系统，来解决如何提升粒子动画的开发效率，使动画开发更先进，同时提高用户的视觉感受的问题。

2、本发明的技术任务是按以下方式实现的，一种canvas粒子动画的实现方法，该实现方法具体如下：

3、确定画布：在界面中新建画布，并定义画布的大小尺寸及位置信息；

4、获取画布上下文：在确定的画布上获取上下文信息及绘制环境，为绘制图像做准备；

5、绘制image和/或video对象的帧：使用drawimage(图像绘制)api将一个image对象或者canvas上指定位置和尺寸的图像或者video对象上的每一帧绘制到当前的画布上；

6、获取像素数据：根据图像或视频对象，通过对应api获取对象的像素数据；

7、获取像素信息：根据像素数据读取对应的像素信息；

8、根据条件判断是否满足绘制要求，并将满足要求的像素数据保存；

9、在画布中绘制粒子图案：使用保存的像素数据，在画布界限范围内绘制平面图案；

10、形成粒子动画：根据缓动函数计算粒子运动轨迹及位置坐标，并设定运动时间，形成缓动动画；

11、设置运动时间偏差：对粒子动画设置时间差，使粒子交错运动，形成层次感；

12、重绘：粒子运动完成后进行重绘，保证粒子运动的衔接。

13、作为优选，获取像素数据具体如下：

14、使用getimagedata(获取图像数据)api获取画布上指定位置的所有像素的数据，获取出的数组中所保存像素信息的排序规则为：

15、每一个像素点均由r、g、b、a组成，从第一个像素点的rgba值到第n个个像素点的rgba值按照递增规律排序。

16、更优地，获取像素信息具体如下：

17、图像中第i行第j列的r、g、b、a像素值信息为：

18、rij＝[(j-1)*imagedata.width+(i-1)]*4；

19、gij＝[(j-1)*imagedata.width+(i-1)]*4+1；

20、bij＝[(j-1)*imagedata.width+(i-1)]*4+2；

21、aij＝[(j-1)*imagedata.width+(i-1)]*4+3。

22、更优地，根据条件判断是否满足绘制要求，并将满足要求的像素数据保存具体如下：

23、设定每列和每行要显示的粒子数，分别是cols和rows，每个粒子代表一个单元格，每个单元格的宽高为imagewidth/cols和imageheight/rows；

24、循环的判断每个单元格的第一个像素是否满足像素值的条件：

25、若满足，则将对应的单元格的坐标保存到数组里，用于后续绘制图案。

26、更优地，形成粒子动画具体如下：

27、使用物体缓动算法(tween算法)的缓动函数制定粒子的起始点、终点(即最终展示的坐标位置)以及动画执行持续时间，形成粒子动画。

28、更优地，设置运动时间偏差具体如下：

29、给每个粒子设置不同的时间间隔启动，根据规律交错的执行动画；其中，规律交错采用时间规律，如间隔1s。

30、更优地，重绘具体如下：

31、设置随机启动时间，使粒子运动轨迹具有运动效果，使用requestanimationframe(帧动画)不断地重绘并设置随机位置偏差，保持动画播放。

32、一种实现canvas粒子动画的系统，该系统包括，

33、确定模块，用于在界面中新建画布，并定义画布的大小尺寸及位置信息；

34、获取模块一，用于在确定的画布上获取上下文信息及绘制环境，为绘制图像做准备；

35、绘制模块，用于使用drawimage(图像绘制)api将一个image对象或者canvas上指定位置和尺寸的图像或者video对象上的每一帧绘制到当前的画布上；

36、获取模块二，用于根据图像或视频对象，通过对应api获取对象的像素数据；

37、获取模块三，用于根据像素数据读取对应的像素信息；

38、判断模块，用于根据条件判断是否满足绘制要求，并将满足要求的像素数据保存；

39、绘制模块，用于使用保存的像素数据，在画布界限范围内绘制平面图案；

40、形成模块，用于根据缓动函数计算粒子运动轨迹及位置坐标，并设定运动时间，形成缓动动画；

41、设置模块，用于对粒子动画设置时间差，使粒子交错运动，形成层次感；

42、重绘模块，用于设置随机启动时间，使粒子运动轨迹具有运动效果，使用requestanimationframe(帧动画)不断地重绘并设置随机位置偏差，保持动画播放。

43、一种电子设备，包括：存储器和至少一个处理器；

44、其中，所述存储器上存储有计算机程序；

45、所述至少一个处理器执行所述存储器存储的计算机程序，使得所述至少一个处理器执行如上述的canvas粒子动画的实现方法。

46、一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如上述的canvas粒子动画的实现方法。

47、本发明的canvas粒子动画的实现方法及系统具有以下优点：

48、(一)本发明主要解决复杂动画实现问题，为可视动画及粒子拼接动画的最终效果提供解决方案，可实现复杂动画，使得动画效果绚丽，粒子运动多样，同时实现了动画流畅，像素级动画；

49、(二)本发明能够完成具有科技感的动画实体，使用像素粒子的展现形式，将既定的图形在规定范围、时间内按照设定的轨迹呈现出来，形成动画，以提高用户的视觉感受，提升开发人员的开发效率，使动画开发更先进；

50、(三)本发明通过在画布上绘制图形的方式，实现很多生动的图像以及复杂的动画，就如在纸上作画一样简单，在canvas出现之前，是很难做出一个流畅、美观、具有3d视感的粒子动画的，而使用canvas，只需要绘制好需要的图形和动画并加以控制和重绘即可，极大提高了开发人员效率，解决了粒子动画开发的难题；

51、(四)本发明解决了粒子动画开发的难题，不再局限于基础动画的实现，采用了极具科技感及立体感的方式进行动画的开发，为复杂动画及需要像素处理的动画开发提供了处理方案；

52、(五)本发明利用canvas提供的图形绘制方法，结合一定的物理知识，对图形的角度、形状、运动速度、运动界限、大小尺寸等进行计算，使用canvas提供的api进行绘制并得到理想的粒子动画效果；

53、(六)本发明通过canvas语言，实现css、js等常规语言难以达到的粒子动画效果。