Colorful logo particle effect, colorful logo Particle

Colorful logo particle effect, colorful logo Particle
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

Yesterday we learned how to use requestAnimationFrame to optimize animation control, and then we couldn't help but be impulsive. On the basis of fork and other codepen, we achieved this colorful logo particle effect. The effect preview is as follows.

Highlight vote = colorful logo particle 1 ======= full screen preview === Online Editing === download favorites === sponsorship vote = Member vote ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Analysis of ideas

1. Draw an image using canvas

2. retrieve image pixels

3. The particle effect is appended to the pixel.

Steps

The html document structure and css are very simple. If you do not repeat them, you can directly use the code.

<canvas id='c'></canvas>

html, body {  height: 100%;}body {  background: black;  overflow: hidden;}canvas {  max-width: 100%;}

Then there is the core JS. Here we also use requestAnimationFrame, so we will not detail it in detail. Inaccurate students can participate in the previous article.

To avoid the cross-origin problem of canvas, the logo image is used in base64 mode. This can be used by the image-to-base64 tool. The base64 method occupies too much space. We put it in a variable, put it at the very beginning of the Code, set canvas, and load the image.

// Data storage, Base64 image information, too long to occupy too many screens, please pull down. Var picUrl = "data: image/png; base64 ,...... "; // Canvas Basic settings var canvas = document. getElementById ("c"), ctx = canvas. getContext ("2d"), w = canvas. width = window. innerWidth, h = canvas. height = window. innerHeight, logoParticles = [], participant Index = 0, logo = new Image (), hue = 0; // set the Image logo. src = picUrl;

After the image is loaded, draw the image, obtain the image pixel, traverse the pixel and bind the particle.

// After loading, obtain the image pixel and bind the particle to the image pixel logo. onload = function () {var posX = (w-this. width)/2, posY = (h-this. height)/2; // draw the image ctx. drawImage (this, posX, posY); // obtain the pixel var imgData = ctx. getImageData (0, 0, w, h), pixels = imgData. data; // traverse the pixel point and bind the particle for (var y = 0; y  0) {logoParticles. push (new Particle (x, y) ;}}// call animation animate ();};

Then, use the requestAnimationFrame animation mechanism to animated particles.

// Set the animation function animate () using requesetAnimationFrame {// call polyfillrequestAnimationFrame (animate); // In this case, the animation ctx. fillStyle = "rgba (0, 0, 0 ,. 1) "; ctx. fillRect (0, 0, w, h); for (var I in logoParticles) {logoParticles [I]. draw ();} hue + = 1 ;}

Attributes of the particle class: origX and origY represent the original coordinates, x and y represent the real-time coordinates, color represents the color, maxLife represents the maximum life cycle, and lift represents the life time, vx and vy represent the velocity in the direction of x and y, grav represents the gravity, and index represents the particle number.

Particle methods include the draw method, update animation mechanism, reset, and random number removal. The detailed code is as follows.

// Particle class defines function Particle (x, y) {this. origX = this. x = x; this. origY = this. y = y; this. color = "white"; this. maxLife = this. random (20); this. life = 0; this. vx = this. random (-1, 1); this. vy = this. random (-1, 1); this. grav =. 04; this. index = maid index; logoParticles [maid index] = this; maid index ++;} // Particle prototype, draw, update, reset, random method Particle. prototype = {constructor: Particle, // draw: function () {ct X. fillStyle = this. color; ctx. fillRect (this. x, this. y, 1, 1); this. update () ;}, // animation update: function () {if (this. life> = this. maxLife) {logoParticles [this. index]. reset ();} this. x + = this. vx; this. y + = this. vy; this. vy + = this. grav; this. life ++;}, // reset: function () {this. x = this. origX; this. y = this. origY; this. life = 0; this. color = "hsl (" + hue + ", 100%, 50%)"; this. vx = this. random (-1, 1); this. vy = thi S. random (-1, 1) ;}, // random number random: function () {var min = arguments. length = 1? 0: arguments [0], max = arguments. length = 1? Arguments [0]: arguments [1]; return Math. random () * (max-min) + min ;}};

Reading

1. Detailed description of requestAnimationFrame animation control

2. html5 fireworks

3.html

4. Click to control the explosive particles

5. Small box Particles

6. Colorful fold-back bullet Particles

7. Realistic flame effect

8. WebGL cool particle effect

Thank you for your patience. If you have any help, please support me

----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.

Bytes ---------------------------------------------------------------------------------------------------------