查看: 1091|回复: 1

[HTML5动画] HTML5炫酷流星动画特效

[复制链接]
发表于 2019-7-30 22:26:02 | 显示全部楼层 |阅读模式





简要教程



这是一款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. const particleCount = 1000;
  3. const particleProps = [
  4. "x",
  5. "y",
  6. "z",
  7. "vx",
  8. "vy",
  9. "vz",
  10. "life",
  11. "ttl",
  12. "speed"];

  13. const rangeY = 100;
  14. const rangeZ = 200;
  15. const baseTTL = 50;
  16. const rangeTTL = 200;
  17. const baseHue = rand(360);
  18. const rangeHue = 100;
  19. const xc = 0.0005;
  20. const yc = 0.0005;
  21. const zc = 0.0005;
  22. const tc = 0.0005;
  23. const noiseSteps = ceil(rand(4)) + 4;
  24. const backgroundColor = "hsla(0,0%,0%,0.5)";

  25. let canvas;
  26. let ctx;
  27. let center;
  28. let tick;
  29. let simplex;
  30. let particles;

  31. function setup() {
  32.   createCanvas();
  33.   resize();
  34.   initParticles();

  35.   draw();
  36. }

  37. function initParticles() {
  38.   tick = 0;
  39.   simplex = new SimplexNoise();
  40.   particles = new PropsArray(particleCount, particleProps);

  41.   let i = 0;

  42.   for (; i < particles.length; i += particleProps.length) {
  43.     initParticle(i);
  44.   }
  45. }

  46. function initParticle(i) {
  47.   let x, y, z, vx, vy, vz, life, ttl, speed, radius, hue;

  48.   x = rand(canvas.a.width);
  49.   y = center[1] + randIn(-rangeY, rangeY);
  50.   z = rand(rangeZ);
  51.   vx = 0;
  52.   vy = 0;
  53.   vz = 0;
  54.   life = 0;
  55.   ttl = baseTTL + rand(rangeTTL);
  56.   speed = 0;

  57.   particles.set([x, y, z, vx, vy, vz, life, ttl, speed], i);
  58. }

  59. function drawParticles() {
  60.   let i = 0;

  61.   for (; i < particles.length; i += particleProps.length) {
  62.     updateParticle(i);
  63.   }
  64. }

  65. function updateParticle(i) {
  66.   let n, theta, phi, cosPhi, x2, y2, z2, width, hue;

  67.   let [x, y, z, vx, vy, vz, life, ttl, speed] = particles.get(i);

  68.   n = simplex.noise4D(x * xc, y * yc, z * zc, tick) * noiseSteps;
  69.   theta = n * TAU;
  70.   phi = (1 - n) * PI;
  71.   cosPhi = cos(phi);
  72.   vx = lerp(vx, cos(theta) * cosPhi, 0.0725);
  73.   vy = lerp(vy, sin(phi), 0.0725);
  74.   vz = lerp(vz, sin(theta) * cosPhi, 0.0725);
  75.   x2 = x + vx * speed;
  76.   y2 = y + vy * speed;
  77.   z2 = z + vz * speed;
  78.   width = 0.015 * z2 + 2;
  79.   speed = lerp(speed, 0.05 * z2, 0.15);
  80.   hue = baseHue + speed * 0.035 * rangeHue;

  81.   drawParticle(x, y, z, x2, y2, life, ttl, width, hue);

  82.   life++;

  83.   particles.set([x2, y2, z2, vx, vy, vz, life, ttl, speed], i);

  84.   (checkBounds(x, y, width) || life > ttl) && initParticle(i);
  85. }

  86. function drawParticle(x, y, z, x2, y2, life, ttl, width, hue) {
  87.   ctx.a.save();
  88.   ctx.a.lineWidth = width;
  89.   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))})`;
  90.   ctx.a.beginPath();
  91.   ctx.a.moveTo(x, y);
  92.   ctx.a.lineTo(x2, y2);
  93.   ctx.a.stroke();
  94.   ctx.a.closePath();
  95.   ctx.a.restore();
  96. }

  97. function checkBounds(x, y, r) {
  98.   return x > r + canvas.a.width || x < -r || y > r + canvas.a.height || y < -r;
  99. }

  100. function createCanvas() {
  101.   canvas = {
  102.     a: document.createElement("canvas"),
  103.     b: document.createElement("canvas") };


  104.   canvas.b.style = `
  105.     position: fixed;
  106.     top: 0;
  107.     left: 0;
  108.     width: 100%;
  109.     height: 100%;
  110.   `;
  111.   document.body.appendChild(canvas.b);
  112.   ctx = {
  113.     a: canvas.a.getContext("2d"),
  114.     b: canvas.b.getContext("2d") };


  115.   center = [];
  116. }

  117. function resize() {
  118.   const { innerWidth, innerHeight } = window;

  119.   canvas.a.width = innerWidth;
  120.   canvas.a.height = innerHeight;

  121.   ctx.a.drawImage(canvas.b, 0, 0);

  122.   canvas.b.width = innerWidth;
  123.   canvas.b.height = innerHeight;

  124.   ctx.b.drawImage(canvas.a, 0, 0);

  125.   center[0] = 0.5 * canvas.a.width;
  126.   center[1] = 0.5 * canvas.a.height;
  127. }

  128. function renderGlow() {
  129.   ctx.b.save();
  130.   ctx.b.filter = "blur(8px) brightness(200%)";
  131.   ctx.b.globalCompositeOperation = "lighter";
  132.   ctx.b.drawImage(canvas.a, 0, 0);
  133.   ctx.b.restore();

  134.   ctx.b.save();
  135.   ctx.b.filter = "blur(4px) brightness(200%)";
  136.   ctx.b.globalCompositeOperation = "lighter";
  137.   ctx.b.drawImage(canvas.a, 0, 0);
  138.   ctx.b.restore();
  139. }

  140. function renderToScreen() {
  141.   ctx.b.save();
  142.   ctx.b.globalCompositeOperation = "lighter";
  143.   ctx.b.drawImage(canvas.a, 0, 0);
  144.   ctx.b.restore();
  145. }

  146. function drawBackground() {
  147.   ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);

  148.   ctx.b.fillStyle = backgroundColor;
  149.   ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);
  150. }

  151. function draw() {
  152.   tick += tc;

  153.   drawBackground();
  154.   drawParticles();
  155.   renderToScreen();
  156.   renderGlow();

  157.   window.requestAnimationFrame(draw);
  158. }

  159. window.addEventListener("load", setup);
  160. window.addEventListener("resize", resize);
复制代码


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

源码下载


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


回复

使用道具 举报

发表于 2019-8-9 10:08:53 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表