CN112184860A - Method for realizing particle animation - Google Patents
Method for realizing particle animation 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
The invention relates to the field of front-end development, and particularly provides a particle animation implementation method, which comprises the following steps: s1, acquiring data of all pixels on the canvas; s2, reading pixel information; s3, saving the useful pixels to the canvas; s4, forming a particle animation by using a Tween algorithm; and S5, redrawing and setting the position deviation by using the requestAnamationFrame. Compared with the prior art, the method utilizes the canvas graph drawing method and combines physical knowledge to calculate the shape, the movement speed, the movement limit, the angle, the size and the like of the graph, and uses the canvas API to draw and obtain the final particle animation. The method solves the problem of realizing the pixel-level animation in the development, is not limited to the realization mode of simple animation, adopts the mode which can embody the science and technology sense to develop the animation, and provides a method for developing complex animation and animation which needs pixel processing.
Description
Technical Field
The invention relates to the field of front-end development, and particularly provides a particle animation implementation method.
Background
Animation development is an efficient method for improving user experience, meeting commercial promotion requirements and enhancing user adhesion, in a traditional development mode, a website or an application interface can only meet simple animations with the most basic requirements, and complex animations are very difficult to realize. When a complex animation needs to be realized, a set of complete logic needs to be written, each part of the animation is controlled differently, each frame of the animation is judged logically, when different tracks or animation changes, a series of logics are needed to perform analysis control, and visual effects such as fluency cannot be guaranteed for the finally formed animation.
With the technology improvement, many ways for drawing graphics appear, but it is difficult to make a smooth and beautiful particle animation with 3d vision, and how to solve the problem is a matter that needs to be solved by those skilled in the art.
Disclosure of Invention
Aiming at the defects of the prior art, the invention provides a method for realizing the particle animation with strong practicability.
The technical scheme adopted by the invention for solving the technical problems is as follows:
a method for realizing particle animation comprises the following steps:
s1, acquiring data of all pixels on the canvas;
s2, reading pixel information;
s3, saving the useful pixels to the canvas;
s4, forming a particle animation by using a Tween algorithm;
and S5, redrawing and setting the position deviation by using the requestAnamationFrame.
Further, in step S1, the method further includes:
s101, carrying out initialization operation;
s102, drawing a current canvas;
s103, using a getImageData interface.
Further, in step S101, performing an initialization operation: the method comprises the steps of creating a new canvas, acquiring the context and drawing environment of the new canvas, and preparing for drawing a later graph;
s102, drawing a current canvas: drawing each frame on an image object or canvas at a specified location and size, or video object, onto the current canvas using a drawImage;
s103, using a getImageData interface: and acquiring data of all pixels at the designated position on the canvas, and setting the sequencing rule of the acquired array storage pixel information.
Further, in step S2, the pixel information is read, and the R, G, B, A pixel value information of the ith row and the jth column in the image is:
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。
further, in step S3, the number of particles to be displayed in each row and each column is set, i.e., cols and rows, each particle represents a cell, the width and height of each cell are imageWidth/cols and imageHeight/rows, and then the loop determines whether the first pixel of each cell satisfies the pixel value condition, if so, the coordinates of the cell are stored in an array for subsequent drawing;
the useful pixels are saved and drawn onto the canvas.
Further, in step S4, the method further includes:
s401, analyzing an available slow-motion animation function;
s402, finding out and using a function suitable for the animation;
and S403, establishing a starting point and an end point of the particle and animation execution duration.
Further, in step S401, an available slow-motion animation function is analyzed to solve the animation track and the time for each particle to execute the animation;
in step S403, a start point, an end point, and an animation execution duration of the particle are established using a slow motion function of the Tween algorithm, forming a particle animation.
Further, in step S5, different time intervals are set for each particle to start, the animation is executed in a staggered manner according to a certain rule, a random start time is set, a requestanimation frame is used to continuously redraw and set a random position deviation, and the animation is kept playing.
Compared with the prior art, the method for realizing the particle animation has the following outstanding beneficial effects:
the invention utilizes the canvas graph drawing method and combines physical knowledge to calculate the shape, the movement speed, the movement limit, the angle, the size and the like of the graph, and uses the canvas API to draw and obtain the final particle animation. The method solves the problem of realizing the pixel-level animation in the development, is not limited to the realization mode of simple animation, adopts the mode which can embody the science and technology sense to develop the animation, and provides a method for developing complex animation and animation which needs pixel processing. The efficiency of developers is greatly improved, and the problem of particle animation development is solved.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
FIG. 1 is a diagram of pixel information arrangement rules in a method for implementing a particle animation.
Detailed Description
The present invention will be described in further detail with reference to specific embodiments in order to better understand the technical solutions of the present invention. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
A preferred embodiment is given below:
as shown in fig. 1, a method for implementing a particle animation in this embodiment includes the following steps:
s1, acquiring data of all pixels on the canvas:
further comprising the following steps:
s101, carrying out initialization operation: the method comprises the steps of creating a canvas, acquiring the context and drawing environment of the canvas, and preparing for drawing of later figures.
S102, drawing a current canvas: each frame on an image object or canvas, or video object, is drawn to the current canvas using a drawImage, with the specified position and size.
S103, using a getImageData interface: and acquiring data of all pixels at the designated position on the canvas, and setting the sequencing rule of the acquired array storage pixel information.
The ordering rule of the stored pixel information comprises the RGBA value of the first pixel point, the RGBA value of the second pixel point and the RGBA value of the nth pixel point of … ….
S2, reading pixel information:
reading pixel information, wherein R, G, B, A pixel value information of the ith row and the jth column in the image is as follows:
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, saving useful pixels to the canvas:
setting the number of particles to be displayed in each row and each column, namely cols and rows, wherein each particle represents a cell, the width and the height of each cell are imageWidth/cols and imageHeight/rows, then circularly judging whether a first pixel of each cell meets the condition of a pixel value, and if so, storing the coordinate of the cell into an array for subsequent pattern drawing;
the useful pixels are saved and drawn onto the canvas.
S4, forming the particle animation by using a Tween algorithm:
further comprising:
s401, analyzing available slow-motion animation functions:
and analyzing an available slow-motion animation function, and solving two problems of an animation track and the time for executing the animation by each particle.
S402, finding out and using functions suitable for the animation.
S403, establishing a starting point and an end point of the particle and animation execution duration:
and establishing a starting point and an end point of the particle and the animation execution duration by using a slow motion function of a Tween algorithm to form the particle animation.
S5, redrawing and setting the position deviation by using a requestAnamationframe:
setting different time intervals for each particle to start, and executing the animation in a staggered mode according to a certain rule. And random starting time is set, so that the particle motion track has a motion effect.
Continuously redrawing and setting random position deviation by using a requestAnimationFrame, and keeping the animation playing.
The above embodiments are only specific examples of the present invention, and the scope of the present invention includes but is not limited to the above embodiments, and any suitable changes or substitutions that are required by a person of ordinary skill in the art and are in accordance with the claims of a method for implementing a particle animation according to the present invention should fall within the scope of the present invention.
Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that changes, modifications, substitutions and alterations can be made in these embodiments without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.
Claims (8)
1. A method for realizing particle animation is characterized by comprising the following steps:
s1, acquiring data of all pixels on the canvas;
s2, reading pixel information;
s3, saving the useful pixels to the canvas;
s4, forming a particle animation by using a Tween algorithm;
and S5, redrawing and setting the position deviation by using the requestAnamationFrame.
2. The method for implementing particle animation according to claim 1, further comprising, in step S1:
s101, carrying out initialization operation;
s102, drawing a current canvas;
s103, using a getImageData interface.
3. A method for implementing a particle animation according to claim 2,
s101, carrying out initialization operation: the method comprises the steps of creating a new canvas, acquiring the context and drawing environment of the new canvas, and preparing for drawing a later graph;
s102, drawing a current canvas: drawing each frame on an image object or canvas at a specified location and size, or video object, onto the current canvas using a drawImage;
s103, using a getImageData interface: and acquiring data of all pixels at the designated position on the canvas, and setting the sequencing rule of the acquired array storage pixel information.
4. The method for realizing particle animation according to claim 1, wherein in step S2, pixel information is read, and the R, G, B, A pixel value information of the ith row and the jth column in the image is:
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. the method for realizing particle animation as claimed in claim 1, wherein in step S3, the number of particles to be displayed in each row and each column is set, respectively cols and rows, each particle represents a cell, the width and height of each cell are imageWidth/cols and imageHeight/rows, and then the loop judges whether the first pixel of each cell satisfies the condition of pixel value, if yes, the coordinates of the cell are saved in an array for subsequent drawing;
the useful pixels are saved and drawn onto the canvas.
6. The method for implementing particle animation according to claim 1, further comprising, in step S4:
s401, analyzing an available slow-motion animation function;
s402, finding out and using a function suitable for the animation;
and S403, establishing a starting point and an end point of the particle and animation execution duration.
7. The method for realizing particle animation as claimed in claim 6, wherein in step S401, available slow motion animation functions are analyzed to solve animation tracks and the time for each particle to execute animation;
in step S403, a start point, an end point, and an animation execution duration of the particle are established using a slow motion function of the Tween algorithm, forming a particle animation.
8. The method of claim 1, wherein in step S5, each particle is set with a different time interval for starting, the animation is executed according to a certain rule and staggered, a random start time is set, and the animation is kept playing by continuously redrawing using a requestanimation frame and setting a random position offset.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011020288.0A CN112184860A (en) | 2020-09-25 | 2020-09-25 | Method for realizing particle animation |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011020288.0A CN112184860A (en) | 2020-09-25 | 2020-09-25 | Method for realizing particle animation |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112184860A true CN112184860A (en) | 2021-01-05 |
Family
ID=73944804
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011020288.0A Pending CN112184860A (en) | 2020-09-25 | 2020-09-25 | Method for realizing particle animation |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112184860A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113284218A (en) * | 2021-05-24 | 2021-08-20 | 康键信息技术（深圳）有限公司 | Particle animation realization method, device, equipment and storage medium |
| CN113313793A (en) * | 2021-06-17 | 2021-08-27 | 豆盟(北京)科技股份有限公司 | Animation playing method and device, electronic equipment and storage medium |
| CN113689529A (en) * | 2021-09-02 | 2021-11-23 | 王会 | Real-time animation generation method |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102866886A (en) * | 2012-09-04 | 2013-01-09 | 北京航空航天大学 | Web-based visual algorithm animation development system |
| WO2019123213A1 (en) * | 2017-12-18 | 2019-06-27 | Koppasoft | Display rendering method and system |
| CN109949398A (en) * | 2019-04-18 | 2019-06-28 | 成都四方伟业软件股份有限公司 | Particle renders method, apparatus and electronic equipment |
| CN110704769A (en) * | 2019-10-10 | 2020-01-17 | 深圳前海微众银行股份有限公司 | Flow chart generation method, device and equipment and computer storage medium |
-
2020
- 2020-09-25 CN CN202011020288.0A patent/CN112184860A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102866886A (en) * | 2012-09-04 | 2013-01-09 | 北京航空航天大学 | Web-based visual algorithm animation development system |
| WO2019123213A1 (en) * | 2017-12-18 | 2019-06-27 | Koppasoft | Display rendering method and system |
| CN109949398A (en) * | 2019-04-18 | 2019-06-28 | 成都四方伟业软件股份有限公司 | Particle renders method, apparatus and electronic equipment |
| CN110704769A (en) * | 2019-10-10 | 2020-01-17 | 深圳前海微众银行股份有限公司 | Flow chart generation method, device and equipment and computer storage medium |
Non-Patent Citations (6)
| Title |
|---|
| YEANA1: ""打造高大上的Canvas粒子动画"", 《CSDN》 * |
| 刘耀钦: "HTML5 Canvas绘图技术及其在图像裁剪中的应用研究", 《洛阳师范学院学报》 * |
| 台雯: "HTML5在WEB前端开发中的应用研究", 《天津职业院校联合学报》 * |
| 姚远等: "基于Animate的交互课件设计制作研究", 《计算机产品与流通》 * |
| 梁敦毫: "基于HTML5 Canvas绘图技术应用研究", 《数码世界》 * |
| 风雨后见彩虹: ""window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果"", 《术之多》 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113284218A (en) * | 2021-05-24 | 2021-08-20 | 康键信息技术（深圳）有限公司 | Particle animation realization method, device, equipment and storage medium |
| CN113313793A (en) * | 2021-06-17 | 2021-08-27 | 豆盟(北京)科技股份有限公司 | Animation playing method and device, electronic equipment and storage medium |
| CN113313793B (en) * | 2021-06-17 | 2023-11-24 | 豆盟(北京)科技股份有限公司 | Animation playing method, device, electronic equipment and storage medium |
| CN113689529A (en) * | 2021-09-02 | 2021-11-23 | 王会 | Real-time animation generation method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112184860A (en) | Method for realizing particle animation | |
| US20200372246A1 (en) | Hand pose estimation | |
| US8917282B2 (en) | Separating water from pigment in procedural painting algorithms | |
| CN111080766B (en) | GPU (graphics processing unit) acceleration mass target efficient rendering method based on WebGL | |
| US20180253817A1 (en) | Deep learning via dynamic root solvers | |
| CN102147928B (en) | Improved flame-simulation acceleration algorithm based on particle system | |
| US20050265453A1 (en) | Image processing apparatus and method, recording medium, and program | |
| CN104200506A (en) | Method and device for rendering three-dimensional GIS mass vector data | |
| CN101046891A (en) | Texture mapping apparatus and method | |
| CN105190701B (en) | Synthesis system based on primitive and method | |
| US8676552B2 (en) | Methods and apparatus for simulation of fluid motion using procedural shape growth | |
| CN110276823B (en) | Ray tracing based real-time interactive integrated imaging generation method and system | |
| WO2021253640A1 (en) | Shadow data determination method and apparatus, device, and readable medium | |
| Heiden et al. | Triangulation algorithms for the representation of molecular surface properties | |
| US20170249925A1 (en) | Method and device for switching playing mode of a mobile terminal, storage medium and program | |
| CN103116897A (en) | Three-dimensional dynamic data compression and smoothing method based on image space | |
| CN113918249A (en) | Method and device for realizing background fuzzy control | |
| US20030210243A1 (en) | Generating surface normals | |
| WO2023169002A1 (en) | Soft rasterization method and apparatus, device, medium, and program product | |
| CN106780716A (en) | Historical and cultural heritage digital display method | |
| US11809701B2 (en) | Handwriting forming method and apparatus, and electronic device | |
| Ke et al. | Efficient GPU computing framework of cloud filtering in remotely sensed image processing | |
| US10943323B2 (en) | Data processing systems | |
| CN116129017A (en) | Method and system for realizing canvas particle animation | |
| CN112825197A (en) | Method and storage medium for fast rendering of clustered animation in Unity |
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 |