HTML5炫酷流星动画特效

蚂蚁开元

源码演示：http://www.zzfriend.com/demo/canvas/html5lizi/

简要教程

---

这是一款HTML5炫酷光粒子动画特效。该特效通过js在页面中生成canvas元素，并通过算法在其中生成炫酷的光粒子动画特效。

使用方法

---

在页面中引入下面的文件。

1. <link rel="stylesheet" href="./style.css">
   
2. <script src='js/lvrjwz.js'></script>
   
3. <script src='https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js'></script>
   
4. <script  src="js/script.js"></script>

复制代码

javascript

---

javascript代码

1. "use strict";
   
2. 
   
3. const particleCount = 1000;
   
4. const particleProps = [
   
5. "x",
   
6. "y",
   
7. "z",
   
8. "vx",
   
9. "vy",
   
10. "vz",
    
11. "life",
    
12. "ttl",
    
13. "speed"];
    
14. 
    
15. const rangeY = 100;
    
16. const rangeZ = 200;
    
17. const baseTTL = 50;
    
18. const rangeTTL = 200;
    
19. const baseHue = rand(360);
    
20. const rangeHue = 100;
    
21. const xc = 0.0005;
    
22. const yc = 0.0005;
    
23. const zc = 0.0005;
    
24. const tc = 0.0005;
    
25. const noiseSteps = ceil(rand(4)) + 4;
    
26. const backgroundColor = "hsla(0,0%,0%,0.5)";
    
27. 
    
28. let canvas;
    
29. let ctx;
    
30. let center;
    
31. let tick;
    
32. let simplex;
    
33. let particles;
    
34. 
    
35. function setup() {
    
36.   createCanvas();
    
37.   resize();
    
38.   initParticles();
    
39. 
    
40.   draw();
    
41. }
    
42. 
    
43. function initParticles() {
    
44.   tick = 0;
    
45.   simplex = new SimplexNoise();
    
46.   particles = new PropsArray(particleCount, particleProps);
    
47. 
    
48.   let i = 0;
    
49. 
    
50.   for (; i < particles.length; i += particleProps.length) {
    
51.     initParticle(i);
    
52.   }
    
53. }
    
54. 
    
55. function initParticle(i) {
    
56.   let x, y, z, vx, vy, vz, life, ttl, speed, radius, hue;
    
57. 
    
58.   x = rand(canvas.a.width);
    
59.   y = center[1] + randIn(-rangeY, rangeY);
    
60.   z = rand(rangeZ);
    
61.   vx = 0;
    
62.   vy = 0;
    
63.   vz = 0;
    
64.   life = 0;
    
65.   ttl = baseTTL + rand(rangeTTL);
    
66.   speed = 0;
    
67. 
    
68.   particles.set([x, y, z, vx, vy, vz, life, ttl, speed], i);
    
69. }
    
70. 
    
71. function drawParticles() {
    
72.   let i = 0;
    
73. 
    
74.   for (; i < particles.length; i += particleProps.length) {
    
75.     updateParticle(i);
    
76.   }
    
77. }
    
78. 
    
79. function updateParticle(i) {
    
80.   let n, theta, phi, cosPhi, x2, y2, z2, width, hue;
    
81. 
    
82.   let [x, y, z, vx, vy, vz, life, ttl, speed] = particles.get(i);
    
83. 
    
84.   n = simplex.noise4D(x * xc, y * yc, z * zc, tick) * noiseSteps;
    
85.   theta = n * TAU;
    
86.   phi = (1 - n) * PI;
    
87.   cosPhi = cos(phi);
    
88.   vx = lerp(vx, cos(theta) * cosPhi, 0.0725);
    
89.   vy = lerp(vy, sin(phi), 0.0725);
    
90.   vz = lerp(vz, sin(theta) * cosPhi, 0.0725);
    
91.   x2 = x + vx * speed;
    
92.   y2 = y + vy * speed;
    
93.   z2 = z + vz * speed;
    
94.   width = 0.015 * z2 + 2;
    
95.   speed = lerp(speed, 0.05 * z2, 0.15);
    
96.   hue = baseHue + speed * 0.035 * rangeHue;
    
97. 
    
98.   drawParticle(x, y, z, x2, y2, life, ttl, width, hue);
    
99. 
    
100.   life++;
     
101. 
     
102.   particles.set([x2, y2, z2, vx, vy, vz, life, ttl, speed], i);
     
103. 
     
104.   (checkBounds(x, y, width) || life > ttl) && initParticle(i);
     
105. }
     
106. 
     
107. function drawParticle(x, y, z, x2, y2, life, ttl, width, hue) {
     
108.   ctx.a.save();
     
109.   ctx.a.lineWidth = width;
     
110.   ctx.a.strokeStyle = `hsla(${hue + clamp(z, 0, 180)},${clamp(z, 10, 60)}%,${clamp(z, 10, 50)}%,${fadeInOut(life, ttl) * (0.01 * clamp(z, 50, 100))})`;
     
111.   ctx.a.beginPath();
     
112.   ctx.a.moveTo(x, y);
     
113.   ctx.a.lineTo(x2, y2);
     
114.   ctx.a.stroke();
     
115.   ctx.a.closePath();
     
116.   ctx.a.restore();
     
117. }
     
118. 
     
119. function checkBounds(x, y, r) {
     
120.   return x > r + canvas.a.width || x < -r || y > r + canvas.a.height || y < -r;
     
121. }
     
122. 
     
123. function createCanvas() {
     
124.   canvas = {
     
125.     a: document.createElement("canvas"),
     
126.     b: document.createElement("canvas") };
     
127. 
     
128. 
     
129.   canvas.b.style = `
     
130.     position: fixed;
     
131.     top: 0;
     
132.     left: 0;
     
133.     width: 100%;
     
134.     height: 100%;
     
135.   `;
     
136.   document.body.appendChild(canvas.b);
     
137.   ctx = {
     
138.     a: canvas.a.getContext("2d"),
     
139.     b: canvas.b.getContext("2d") };
     
140. 
     
141. 
     
142.   center = [];
     
143. }
     
144. 
     
145. function resize() {
     
146.   const { innerWidth, innerHeight } = window;
     
147. 
     
148.   canvas.a.width = innerWidth;
     
149.   canvas.a.height = innerHeight;
     
150. 
     
151.   ctx.a.drawImage(canvas.b, 0, 0);
     
152. 
     
153.   canvas.b.width = innerWidth;
     
154.   canvas.b.height = innerHeight;
     
155. 
     
156.   ctx.b.drawImage(canvas.a, 0, 0);
     
157. 
     
158.   center[0] = 0.5 * canvas.a.width;
     
159.   center[1] = 0.5 * canvas.a.height;
     
160. }
     
161. 
     
162. function renderGlow() {
     
163.   ctx.b.save();
     
164.   ctx.b.filter = "blur(8px) brightness(200%)";
     
165.   ctx.b.globalCompositeOperation = "lighter";
     
166.   ctx.b.drawImage(canvas.a, 0, 0);
     
167.   ctx.b.restore();
     
168. 
     
169.   ctx.b.save();
     
170.   ctx.b.filter = "blur(4px) brightness(200%)";
     
171.   ctx.b.globalCompositeOperation = "lighter";
     
172.   ctx.b.drawImage(canvas.a, 0, 0);
     
173.   ctx.b.restore();
     
174. }
     
175. 
     
176. function renderToScreen() {
     
177.   ctx.b.save();
     
178.   ctx.b.globalCompositeOperation = "lighter";
     
179.   ctx.b.drawImage(canvas.a, 0, 0);
     
180.   ctx.b.restore();
     
181. }
     
182. 
     
183. function drawBackground() {
     
184.   ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
     
185. 
     
186.   ctx.b.fillStyle = backgroundColor;
     
187.   ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);
     
188. }
     
189. 
     
190. function draw() {
     
191.   tick += tc;
     
192. 
     
193.   drawBackground();
     
194.   drawParticles();
     
195.   renderToScreen();
     
196.   renderGlow();
     
197. 
     
198.   window.requestAnimationFrame(draw);
     
199. }
     
200. 
     
201. window.addEventListener("load", setup);
     
202. window.addEventListener("resize", resize);

复制代码

该HTML5炫酷光粒子动画特效的codepen网址为：https://codepen.io/seanfree/pen/joXYaR

源码下载

游客，如果您要下载源码或者查看隐藏内容请回复

yjd088

1234567890