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