js实现带粒子进度条效果代码-html代码-BFW代码库

代码语言：html
所属分类：进度条
代码描述：js实现带粒子进度条效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<style>
body, html {
  margin: 0px;
  padding: 0px;
  background: #000000;
}
</style>

</head>
<body>

<canvas id="canvas"></canvas>

<script>
$(function() {

  //Indention is a bit f*d up

  //Set animation frame
  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


  var canvas = $('#canvas')[0],
      ctx = canvas.getContext('2d'),
      canvasW = $(document).width(),
      canvasH = $(document).height();

  ctx.fillStyle = 'black';

  canvas.width = canvasW;
  canvas.height = canvasH;
  
  var mouse = {
    x: canvasW/2,
    y: canvasH/2,
    dx: 0,
    dy: 0
  };
  
  var emitter = {
    h: 50,
    x: canvasW/2-250,
    y: canvasH/2,
    vx: 5,
    vy: 5,
    v: 0.05,
    dx: 0,
    dy: 0
  };
  
  var stops = [50, 150, 160, 300, 500],
      stopIndex = 0,
      delay = 0,
      prog = 0;
  
  var circle = {
    radius: 125,
    angle: 0
  };

  var particles = new Array();
  
  var rate = 2,
      time = 0,
      frameIndex = rate;
  
  var simplex = new SimplexNoise(),
      simplexVal = 0,
      simplexStart = 20;

  //Start loop
  draw();

  //Draw
  function draw() {
    
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'rgba(0,0,0,0.5)';
    ctx.fillRect(0, 0, canvasW, canvasH);
    ctx.globalCompositeOperation = 'lighter';
    
    //Draw loading
    ctx.fillStyle = '#000';
    ctx.fillRect(canvasW/2-250, emitter.y-emitter.h/2, 500, emitter.h);
    ctx.strokeStyle = 'rgba(0,255,0,0.5)';
    ctx.strokeRect(canvasW/2-250, emitter.y-emitter.h/2, 500, emitter.h);
    ctx.font = '20pt Arial';
    ctx.fillStyle = 'rgba(0,255,0,0.5)';
    ctx.fillText(Math.floor(prog/5)+'%', canvasW/2-20, canvasH/2+10);
    
    //Move emitter
    //console.log(stops[stopIndex]+' '+prog+' '+delay);
    if(stops[stopIndex] == prog) {
      stopIndex ++;
      delay = 50;
    } else {
      if(delay == 0 && prog < stops[stopIndex]) {
        emitter.dx = -1;
        emitter.x += 2;
        prog += 2;
      } else {
        emitter.dx = 0;
        delay --;
      }
    }
    
    //Draw emitter
    ctx.fillStyle = '#0f0';
    ctx.fillRect(emitter.x, emitter.y-emitter.h/2, 1, emitter.h);

    //Draw particles
    var i = 0;
    for(i in particles) {
      var p = particles[i];
      
      //Check if die
      if(time > p.die) {
        p.o -= 0.01;
        if(p.o < 0) {
          particles.splice(i, 1);
        }
      }
      
      //Add v
      p.x += p.vx;
      p.y += p.vy;
      
      //Add source move
      p.x += p.sourcedx / 10;
      p.y += p.sourcedy / 10;
      
      //Simplex noise
      if(p.simplexIndex > simplexStart) {
        p.simplexVal = simplex.noise3D(p.x/100, p.y/100, time/100);
      }
      
      p.simplexIndex ++;
      p.x += p.simplexVal;
      p.y += p.simplexVal;
      
      //If (almost) outside canvas
      if(p.x < 0+20 || p.x > canvasW-20) {
        p.vx *= -1.015;
      }
      if(p.y < 0+20 || p.y > canvasH-20) {
        p.vy *= -1.015;
      }
      
      ctx.beginPath();
      ctx.fillStyle = 'rgba(0, '+p.green+', 0, '+p.o+')';
      ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, true);
      ctx.fill();
      ctx.save();
    }
    
    //if emitter is moving
    if(emitter.dx !== 0) {
      for(var i=0; i<rate; i++) {
        //Create particle
        var particle = {
          x: emitter.x,
          y: emitter.y+(Math.random()*emitter.h-emitter.h/2),
          r: Math.random()+0.5,
          vx: (Math.random()*-2),
          vy: (Math.random()-0.5),
          o: 1,
          birth: time,
          die: time+(Math.random()*50+50),//1+1),
          sourcedx: emitter.dx,
          sourcedy: emitter.dy,
          red: Math.round(Math.random()*255),
          green: Math.round(Math.random()*255),
          blue: Math.round(Math.random()*255),
          simplexVal: 0,
          simplexIndex: 0
        };

        particles.push(particle);
      }
    }
    
    time++;
    window.requestAnimationFrame(draw);

  }
  
  $(window).mousemove(function(e) {
    mouse.dx = e.pageX - mouse.x;
    mouse.dy = e.pageY - mouse.y;
    
    mouse.x = e.pageX;
    mouse.y = e.pageY;
  });


});


/*
 * A fast javascript implementation of simplex noise by Jonas Wagner
 *
 * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
 * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
 * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
 * Better rank ordering method by Stefan Gustavson in 2012.
 *
 *
 * Copyright (C) 2012 Jonas Wagner
 *
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to
 * the following conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 */
(function () {

var F2 = 0.5 * (Math.sqrt(3.0) - 1.0),
    G2 = (3.0 - Math.sqrt(3.0)) / 6.0,
    F3 = 1.0 / 3.0,
    G3 = 1.0 / 6.0,
    F4 = (Math.sqrt(5.0) - 1.0) / 4.0,
    G4 = (5.0 - Math.sqrt(5.0)) / 20.0;


function SimplexNoise(random) {
    if (!random) random = Math.random;
    this.p = new Uint8Array(256);
    this.perm = new Uint8Array(512);
    this.permMod12 = new Uint8Array(512);
    for (var i = 0; i < 256; i++) {
        this.p[i] = random() * 256;
    }
    for (i = 0; i < 512; i++) {
        this.perm[i] = this.p[i & 255];
        this.permMod12[i] = this.perm[i] % 12;
    }

}
SimplexNoise.prototype = {
    grad3: new Float32Array([1, 1, 0,
                            - 1, 1, 0,
                            1, - 1, 0,

                            - 1, - 1, 0,
                            1, 0, 1,
                            - 1, 0, 1,

                            1, 0, - 1,
                            - 1, 0, - 1,
                            0, 1, 1,

                            0, - 1, 1,
                            0, 1, - 1,
                            0, - 1, - 1]),
    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, - 1, 0, 1, - 1, 1, 0, 1, - 1, - 1,
                            0, - 1, 1, 1, 0, - 1, 1, - 1, 0, - 1, - 1, 1, 0, - 1, - 1, - 1,
                            1, 0, 1, 1, 1, 0, 1, - 1, 1, 0, - 1, 1, 1, 0, - 1, - 1,
                            - 1, 0, 1, 1, - 1, 0, 1, - 1, - 1, 0, - 1, 1, - 1, 0, - 1, - 1,
                            1, 1, 0, 1, 1, 1, 0, - 1, 1, - 1, 0, 1, 1, - 1, 0, - 1,
                            - 1, 1, 0, 1, - 1, 1, 0, - 1, - 1, - 1, 0, 1, - 1, - 1, 0, - 1,
                            1, 1, 1, 0, 1, 1, - 1, 0, 1, - 1, 1, 0, 1, - 1, - 1, 0,
                            - 1, 1, 1, 0, - 1, 1, - 1, 0, - 1, - 1, 1, 0, - 1, - 1, - 1, 0]),
    noise2D: function (xin, yin) {
        var permMod12 = this.permMod12,
            perm = this.perm,
            grad3 = this.grad3;
        var n0=0, n1=0, n2=0; // Noise contributions from the three corners
        // Skew the input space to determine which simplex cell we're in
        var s = (xin + yin) * F2; // Hairy factor for 2D
        var i = Math.floor(xin + s);
        var j = Math.floor(yin + s);
        var t = (i + j) * G2;
        var X0 = i - t; // Unskew the cell origin back to (x,y) space
        var Y0 = j - t;
        var x0 = xin - X0; // The x,y distances from the cell origin
        var y0 = yin - Y0;
        // For the 2D case, the simplex shape is an equilateral triangle.
        // Determine which simplex we are in.
        var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
        if (x0 > y0) {
            i1 = 1;
            j1 = 0;
        } // lower triangle, XY order: (0,0)->(1,0)->(1,1)
        else {
            i1 = 0;
            j1 = 1;
        } // upper triangle, YX order: (0,0)->(0,1)->(1,1)
        // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
        // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
        // c = (3-sqrt(3))/6
        var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
        var y1 = y0 - j1 + G2;
        var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords
        var y2 = y0 - 1.0 + 2.0 * G2;
        // Work out the hashed gradient indices of the three simplex corners
        var ii = i & 255;
        var jj = j & 255;
        // Calculate the contribution from the three corners
        var t0 = 0.5 - x0 * x0 - y0 * y0;
        if (t0 >= 0) {
            var gi0 = permMod12[ii + perm[jj]] * 3;
            t0 *= t0;
            n0 = t0 * t0 * (grad3[gi0] * x0 + grad3[gi0 + 1] * y0); // (x,y) of grad3 used for 2D gradient
        }
        var t1 = 0.5 - x1 * x1 - y1 * y1;
        if (t1 >= 0) {
            var gi1 = permMod12[ii + i1 + perm[jj + j1]] * 3;
            t1 *= t1;
            n1 = t1 * t1 * (grad3[gi1] * x1 + grad3[gi1 + 1] * y1);
        }
        var t2 = 0.5 - x2 * x2 - y2 * y2;
        if (t2 >= 0) {
            var gi2 = permMod12[ii + 1 + perm[jj + 1]] * 3;
            t2 *= t2;
            n2 = t2 * t2 * (grad3[gi2] * x2 + grad3[gi2 + 1] * y2);
        }
        // Add contributions from each corner to get the final noise value.
        // The result is scaled to return values in the interval [-1,1].
        return 70.0 * (n0 + n1 + n2);
    },
    // 3D simplex noise
    noise3D: function (xin, yin, zin) {
        var permMod12 = this.permMod12,
            perm = this.perm,
            grad3 = this.grad3;
 .........完整代码请登录后点击上方下载按钮下载查看