CN112184860A - 一种粒子动画实现方法 - Google Patents
一种粒子动画实现方法 Download PDFInfo
- Publication number
- CN112184860A CN112184860A CN202011020288.0A CN202011020288A CN112184860A CN 112184860 A CN112184860 A CN 112184860A CN 202011020288 A CN202011020288 A CN 202011020288A CN 112184860 A CN112184860 A CN 112184860A
- Authority
- CN
- China
- Prior art keywords
- animation
- particle
- canvas
- pixels
- width
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 239000002245 particle Substances 0.000 title claims abstract description 47
- 238000000034 method Methods 0.000 title claims abstract description 31
- 229920000136 polysorbate Polymers 0.000 claims abstract description 7
- 238000012163 sequencing technique Methods 0.000 claims description 3
- 238000006467 substitution reaction Methods 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/20—3D [Three Dimensional] animation
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明涉及前端开发领域，具体提供了一种粒子动画实现方法，具有如下步骤：S1、获取画布上所有像素的数据；S2、读取像素信息；S3、保存有用像素到画布；S4、使用Tween算法形成粒子动画；S5、使用requestAnimationFrame重绘并设置位置偏差。与现有技术相比，本发明利用canvas的图形绘制方法，结合物理知识，对图形的形状、运动速度、运动界限、角度、尺寸等进行计算，使用canvas的API绘制并得到最终的粒子动画。解决了开发中对于像素级动画实现的难题，不再局限于简单动画的实现方式，采用了更能体现科技感的方式进行动画的开发，为复杂动画及需要像素处理的动画开发提供了方法。
Description
技术领域
本发明涉及前端开发领域，具体提供一种粒子动画实现方法。
背景技术
动画开发是用来提高用户体验,满足商业宣传需求及增强用户粘合度的一种高效方法,在传统的开发方式中,一个网站或应用的界面只能满足最基本需求的简单动画,复杂动画的实现非常困难。当需要实现一个较为复杂的动画时，首先需要写一套完整的逻辑，且对动画的每一部分进行不同的控制，对动画的每一帧进行逻辑判断，当有不同轨迹或动画变换时，更是需要一连串的逻辑进行解析控制，最终形成的动画却也不能保证流畅度等视觉效果。
随着技术提升，出现了很多的绘制图形的方式，但是，也很难做出一个流畅、美观、具有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不断重绘并设置随机位置偏差，保持动画播放。
上述具体的实施方式仅是本发明具体的个案，本发明的专利保护范围包括但不限于上述具体的实施方式，任何符合本发明的一种粒子动画实现方法权利要求书的且任何所述技术领域普通技术人员对其做出的适当变化或者替换，皆应落入本发明的专利保护范围。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (8)
1.一种粒子动画实现方法，其特征在于，具有如下步骤：
S1、获取画布上所有像素的数据；
S2、读取像素信息；
S3、保存有用像素到画布；
S4、使用Tween算法形成粒子动画；
S5、使用requestAnimationFrame重绘并设置位置偏差。
2.根据权利要求1所述的一种粒子动画实现方法，其特征在于，在步骤S1中，进一步包括：
S101、进行初始化操作；
S102、绘制当前画布；
S103、使用getImageData接口。
3.根据权利要求2所述的一种粒子动画实现方法，其特征在于，
S101、进行初始化操作：包含新建画布并获取其上下文、绘制环境，为之后的图形绘制做准备；
S102、绘制当前画布：使用drawImage将一个image对象或者canvas上指定位置和尺寸的图像，或video对象上的每一帧绘制到当前的画布上；
S103、使用getImageData接口：获取画布上指定位置的所有像素的数据，设置获取出的数组保存像素信息的排序规则。
4.根据权利要求1所述的一种粒子动画实现方法，其特征在于，在步骤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。
5.根据权利要求1所述的一种粒子动画实现方法，其特征在于，在步骤S3中，设定每行和每列要显示的粒子数，分别是cols和rows，每个粒子代表一个单元格，每个单元格的的宽高就是imageWidth/cols和imageHeight/rows，然后循环的判断每个单元格的第一个像素是否满足像素值的条件，如果满足了，就把这个单元格的坐标保存到数组里，用作后续绘制图案用；
保存有用的像素并绘制到画布上。
6.根据权利要求1所述的一种粒子动画实现方法，其特征在于，在步骤S4中，进一步包括：
S401、分析可用的缓动动画函数；
S402、找出适合本动画的函数并使用；
S403、制定粒子的起始点、终点以及动画执行持续时间。
7.根据权利要求6所述的一种粒子动画实现方法，其特征在于，在步骤S401中，分析可用的缓动动画函数，解决动画轨迹及每个粒子执行动画的时机；
在步骤S403中，使用Tween算法的缓动函数制定粒子的起始点、终点以及动画执行持续时间，形成粒子动画。
8.根据权利要求1所述的一种粒子动画实现方法，其特征在于，在步骤S5中，给每个粒子设置不同的时间间隔启动，根据一定的规律交错的执行动画，设置随机启动时间，使用requestAnimationFrame不断重绘并设置随机位置偏差，保持动画播放。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011020288.0A CN112184860A (zh) | 2020-09-25 | 2020-09-25 | 一种粒子动画实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011020288.0A CN112184860A (zh) | 2020-09-25 | 2020-09-25 | 一种粒子动画实现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112184860A true CN112184860A (zh) | 2021-01-05 |
Family
ID=73944804
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011020288.0A Pending CN112184860A (zh) | 2020-09-25 | 2020-09-25 | 一种粒子动画实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112184860A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113313793A (zh) * | 2021-06-17 | 2021-08-27 | 豆盟(北京)科技股份有限公司 | 动画播放方法、装置、电子设备和存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102866886A (zh) * | 2012-09-04 | 2013-01-09 | 北京航空航天大学 | 一种基于Web的算法动画可视化开发*** |
| WO2019123213A1 (en) * | 2017-12-18 | 2019-06-27 | Koppasoft | Display rendering method and system |
| CN109949398A (zh) * | 2019-04-18 | 2019-06-28 | 成都四方伟业软件股份有限公司 | 粒子渲染方法、装置及电子设备 |
| CN110704769A (zh) * | 2019-10-10 | 2020-01-17 | 深圳前海微众银行股份有限公司 | 流程图生成方法、装置、设备及计算机存储介质 |
-
2020
- 2020-09-25 CN CN202011020288.0A patent/CN112184860A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102866886A (zh) * | 2012-09-04 | 2013-01-09 | 北京航空航天大学 | 一种基于Web的算法动画可视化开发*** |
| WO2019123213A1 (en) * | 2017-12-18 | 2019-06-27 | Koppasoft | Display rendering method and system |
| CN109949398A (zh) * | 2019-04-18 | 2019-06-28 | 成都四方伟业软件股份有限公司 | 粒子渲染方法、装置及电子设备 |
| CN110704769A (zh) * | 2019-10-10 | 2020-01-17 | 深圳前海微众银行股份有限公司 | 流程图生成方法、装置、设备及计算机存储介质 |
Non-Patent Citations (6)
| Title |
|---|
| YEANA1: ""打造高大上的Canvas粒子动画"", 《CSDN》 * |
| 刘耀钦: "HTML5 Canvas绘图技术及其在图像裁剪中的应用研究", 《洛阳师范学院学报》 * |
| 台雯: "HTML5在WEB前端开发中的应用研究", 《天津职业院校联合学报》 * |
| 姚远等: "基于Animate的交互课件设计制作研究", 《计算机产品与流通》 * |
| 梁敦毫: "基于HTML5 Canvas绘图技术应用研究", 《数码世界》 * |
| 风雨后见彩虹: ""window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果"", 《术之多》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113313793A (zh) * | 2021-06-17 | 2021-08-27 | 豆盟(北京)科技股份有限公司 | 动画播放方法、装置、电子设备和存储介质 |
| CN113313793B (zh) * | 2021-06-17 | 2023-11-24 | 豆盟(北京)科技股份有限公司 | 动画播放方法、装置、电子设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20200372246A1 (en) | Hand pose estimation | |
| US10929648B2 (en) | Apparatus and method for data processing | |
| US10169084B2 (en) | Deep learning via dynamic root solvers | |
| US8917282B2 (en) | Separating water from pigment in procedural painting algorithms | |
| CN111080766B (zh) | 一种基于WebGL的GPU加速海量目标高效渲染方法 | |
| CN102147928B (zh) | 一种基于粒子***的火焰模拟加速改进算法 | |
| US9786083B2 (en) | Multipoint offset sampling deformation | |
| CN104200506A (zh) | 三维gis海量矢量数据渲染方法及装置 | |
| CN101046891A (zh) | 纹理映射设备和方法 | |
| CN105190701B (zh) | 基于原语的合成***及方法 | |
| US8676552B2 (en) | Methods and apparatus for simulation of fluid motion using procedural shape growth | |
| WO2021253640A1 (zh) | 阴影数据确定方法、装置、设备和可读介质 | |
| CN110246201B (zh) | 一种基于线程级并行的铅笔画生成方法 | |
| CN112184860A (zh) | 一种粒子动画实现方法 | |
| US20170249925A1 (en) | Method and device for switching playing mode of a mobile terminal, storage medium and program | |
| CN103116897A (zh) | 一种基于图像空间的三维动态数据压缩和平滑方法 | |
| CN113918249A (zh) | 一种背景模糊控件的实现方法及装置 | |
| WO2023169002A1 (zh) | 软光栅化的方法、装置、设备、介质及程序产品 | |
| CN106780716A (zh) | 历史文化遗产数字化展示方法 | |
| US11809701B2 (en) | Handwriting forming method and apparatus, and electronic device | |
| CN116129017A (zh) | canvas粒子动画的实现方法及*** | |
| CN112825197A (zh) | Unity中群集动画快速渲染的方法、存储介质 | |
| EP4369287A1 (en) | Systems and methods for anti-aliasing | |
| CN113238710B (zh) | 一种智能交互平板、其显示方法及可读存储介质 | |
| US20240020893A1 (en) | Handwriting Forming Method and Apparatus, and Electronic Device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210105 |