本发明专利技术公开了canvas粒子动画的实现方法及系统，属于前端开发技术领域，本发明专利技术要解决的技术问题为如何提升粒子动画的开发效率，使动画开发更先进，同时提高用户的视觉感受，采用的技术方案为：该实现方法具体如下：确定画布：在界面中新建画布，并定义画布的大小尺寸及位置信息；获取画布上下文：在确定的画布上获取上下文信息及绘制环境，为绘制图像做准备；绘制image和/或video对象的帧：使用drawImage API将一个image对象或者canvas上指定位置和尺寸的图像或者video对象上的每一帧绘制到当前的画布上；获取像素数据；根据条件判断是否满足绘制要求，并将满足要求的像素数据保存；在画布中绘制粒子图案；形成粒子动画；设置运动时间偏差；重绘。重绘。重绘。
【技术实现步骤摘要】
canvas粒子动画的实现方法及系统
[0001]本专利技术涉及前端开发
，具体地说是一种canvas粒子动画的实现方法及系统。
技术介绍
[0002]动画开发是用来提升用户体验、增强用户黏合度及满足商业宣传需求的一种高效方法，在传统的动画开发方式中，一个网站或应用的相关界面只能满足基于简单需求的动画，复杂动画的实现显得非常困难。当需要实现一个较为复杂的动画时，首先需要一套完整的逻辑代码作为支撑，而且动画的每一部分需要进行不同的控制，还要对动画的每一帧进行不同的逻辑判断，当轨迹不同或动画变换时，则更需要一连串的逻辑进行解析控制，最终形成的动画经常不能保证流畅度等视觉效果。
[0003]故如何提升粒子动画的开发效率，使动画开发更先进，同时提高用户的视觉感受是目前亟待解决的技术问题。
技术实现思路
[0004]本专利技术的技术任务是提供一种canvas粒子动画的实现方法及系统，来解决如何提升粒子动画的开发效率，使动画开发更先进，同时提高用户的视觉感受的问题。
[0005]本专利技术的技术任务是按以下方式实现的，一种canvas粒子动画的实现方法，该实现方法具体如下：
[0006]确定画布：在界面中新建画布，并定义画布的大小尺寸及位置信息；
[0007]获取画布上下文：在确定的画布上获取上下文信息及绘制环境，为绘制图像做准备；
[0008]绘制image和/或video对象的帧：使用drawImage(图像绘制)API将一个image对象或者canvas上指定位置和尺寸的图像或者video对象上的每一帧绘制到当前的画布上；
[0009]获取像素数据：根据图像或视频对象，通过对应API获取对象的像素数据；
[0010]获取像素信息：根据像素数据读取对应的像素信息；
[0011]根据条件判断是否满足绘制要求，并将满足要求的像素数据保存；
[0012]在画布中绘制粒子图案：使用保存的像素数据，在画布界限范围内绘制平面图案；
[0013]形成粒子动画：根据缓动函数计算粒子运动轨迹及位置坐标，并设定运动时间，形成缓动动画；
[0014]设置运动时间偏差：对粒子动画设置时间差，使粒子交错运动，形成层次感；
[0015]重绘：粒子运动完成后进行重绘，保证粒子运动的衔接。
[0016]作为优选，获取像素数据具体如下：
[0017]使用getImageData(获取图像数据)API获取画布上指定位置的所有像素的数据，获取出的数组中所保存像素信息的排序规则为：
[0018]每一个像素点均由R、G、B、A组成，从第一个像素点的RGBA值到第n个个像素点的
RGBA值按照递增规律排序。
[0019]更优地，获取像素信息具体如下：
[0020]图像中第i行第j列的R、G、B、A像素值信息为：
[0021]Rij＝[(j
‑
1)*imageData.width+(i
‑
1)]*4；
[0022]Gij＝[(j
‑
1)*imageData.width+(i
‑
1)]*4+1；
[0023]Bij＝[(j
‑
1)*imageData.width+(i
‑
1)]*4+2；
[0024]Aij＝[(j
‑
1)*imageData.width+(i
‑
1)]*4+3。
[0025]更优地，根据条件判断是否满足绘制要求，并将满足要求的像素数据保存具体如下：
[0026]设定每列和每行要显示的粒子数，分别是cols和rows，每个粒子代表一个单元格，每个单元格的宽高为imageWidth/cols和imageHeight/rows；
[0027]循环的判断每个单元格的第一个像素是否满足像素值的条件：
[0028]若满足，则将对应的单元格的坐标保存到数组里，用于后续绘制图案。
[0029]更优地，形成粒子动画具体如下：
[0030]使用物体缓动算法(Tween算法)的缓动函数制定粒子的起始点、终点(即最终展示的坐标位置)以及动画执行持续时间，形成粒子动画。
[0031]更优地，设置运动时间偏差具体如下：
[0032]给每个粒子设置不同的时间间隔启动，根据规律交错的执行动画；其中，规律交错采用时间规律，如间隔1s。
[0033]更优地，重绘具体如下：
[0034]设置随机启动时间，使粒子运动轨迹具有运动效果，使用requestAnimati onFrame(帧动画)不断地重绘并设置随机位置偏差，保持动画播放。
[0035]一种实现canvas粒子动画的系统，该系统包括，
[0036]确定模块，用于在界面中新建画布，并定义画布的大小尺寸及位置信息；
[0037]获取模块一，用于在确定的画布上获取上下文信息及绘制环境，为绘制图像做准备；
[0038]绘制模块，用于使用drawImage(图像绘制)API将一个image对象或者canvas上指定位置和尺寸的图像或者video对象上的每一帧绘制到当前的画布上；
[0039]获取模块二，用于根据图像或视频对象，通过对应API获取对象的像素数据；
[0040]获取模块三，用于根据像素数据读取对应的像素信息；
[0041]判断模块，用于根据条件判断是否满足绘制要求，并将满足要求的像素数据保存；
[0042]绘制模块，用于使用保存的像素数据，在画布界限范围内绘制平面图案；
[0043]形成模块，用于根据缓动函数计算粒子运动轨迹及位置坐标，并设定运动时间，形成缓动动画；
[0044]设置模块，用于对粒子动画设置时间差，使粒子交错运动，形成层次感；
[0045]重绘模块，用于设置随机启动时间，使粒子运动轨迹具有运动效果，使用requestAnimationFrame(帧动画)不断地重绘并设置随机位置偏差，保持动画播放。
[0046]一种电子设备，包括：存储器和至少一个处理器；
[0047]其中，所述存储器上存储有计算机程序；
[0048]所述至少一个处理器执行所述存储器存储的计算机程序，使得所述至少一个处理器执行如上述的canvas粒子动画的实现方法。
[0049]一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如上述的canvas粒子动画的实现方法。
[0050]本专利技术的canvas粒子动画的实现方法及系统具有以下优点：
[0051](一)本专利技术主要解决复杂动画实现问题，为可视动画及粒子拼接动画的最终效果提供解决方案，可实现复杂动画，使得动画效果绚丽，粒子运动多样，同时实现了动画流畅，像素级动画；
[0052](二)本专利技术能够完成具有科技感的动画实体，使用像素粒子的展现形本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种canvas粒子动画的实现方法，其特征在于，该实现方法具体如下：确定画布：在界面中新建画布，并定义画布的大小尺寸及位置信息；获取画布上下文：在确定的画布上获取上下文信息及绘制环境，为绘制图像做准备；绘制image和/或video对象的帧：使用drawImage API将一个image对象或者canvas上指定位置和尺寸的图像或者video对象上的每一帧绘制到当前的画布上；获取像素数据：根据图像或视频对象，通过对应API获取对象的像素数据；获取像素信息：根据像素数据读取对应的像素信息；根据条件判断是否满足绘制要求，并将满足要求的像素数据保存；在画布中绘制粒子图案：使用保存的像素数据，在画布界限范围内绘制平面图案；形成粒子动画：根据缓动函数计算粒子运动轨迹及位置坐标，并设定运动时间，形成缓动动画；设置运动时间偏差：对粒子动画设置时间差，使粒子交错运动，形成层次感；重绘：粒子运动完成后进行重绘，保证粒子运动的衔接。2.根据权利要求1所述的canvas粒子动画的实现方法，其特征在于，获取像素数据具体如下：使用getImageData API获取画布上指定位置的所有像素的数据，获取出的数组中所保存像素信息的排序规则为：每一个像素点均由R、G、B、A组成，从第一个像素点的RGBA值到第n个个像素点的RGBA值按照递增规律排序。3.根据权利要求1或2所述的canvas粒子动画的实现方法，其特征在于，获取像素信息具体如下：图像中第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。4.根据权利要求3所述的canvas粒子动画的实现方法，其特征在于，根据条件判断是否满足绘制要求，并将满足要求的像素数据保存具体如下：设定每列和每行要显示的粒子数，分别是cols和rows，每个粒子代表一个单元格，每个单元格的宽高为imageWidth/cols...
【专利技术属性】
技术研发人员：李林萍，张峰，李照川，王冠军，常靓，郭凤，
申请(专利权)人：浪潮软件科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。