js实现带粒子进度条效果代码
代码语言: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