1 var lightLoader = function(c, cw, ch){ that = this; 4 this.c = c; 5 this.ctx = c.getContext('2d'); 6 this.cw = cw; 7 this.ch = ch; 8 this.raf = null; .loaded = 0; 11 this.loaderSpeed = .6; 12 this.loaderWidth = cw * 0.8; 13 this.loaderHeight = 20; 14 this.loader = { 15 x: (this.cw/2) - (this.loaderWidth/2), 16 y: (this.ch/2) - (this.loaderHeight/2) 17 }; 18 this.particles = []; 19 this.particleLift = 220; 20 this.hueStart = 0 21 this.hueEnd = 120; 22 this.hue = 0; 23 this.gravity = .15; 24 this.particleRate = 4; Initialize .init = function(){ 30 this.loaded = 0; 31 this.particles = []; 32 this.loop(); 33 }; Utility Functions .rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}; 39 this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);}; Update Loader .updateLoader = function(){ 45 if(this.loaded < 100){ 46 this.loaded += this.loaderSpeed; 47 } else { 48 this.loaded = 0; 49 } 50 }; Render Loader .renderLoader = function(){ 56 this.ctx.fillStyle = '#000'; 57 this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight); .hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart); newWidth = (this.loaded/100)*this.loaderWidth; 62 this.ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)'; 63 this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); .ctx.fillStyle = '#222'; 66 this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2); 67 }; Particles .Particle = function(){ 73 this.x = that.loader.x + ((that.loaded/100)*that.loaderWidth) - that.rand(0, 1); 74 this.y = that.ch/2 + that.rand(0,that.loaderHeight)-that.loaderHeight/2; 75 this.vx = (that.rand(0,4)-2)/100; 76 this.vy = (that.rand(0,that.particleLift)-that.particleLift*2)/100; 77 this.width = that.rand(2,6)/2; 78 this.height = that.rand(2,6)/2; 79 this.hue = that.hue; 80 }; .Particle.prototype.update = function(i){ 83 this.vx += (that.rand(0,6)-3)/100; 84 this.vy += that.gravity; 85 this.x += this.vx; 86 this.y += this.vy; (this.y > that.ch){ 89 that.particles.splice(i, 1); 90 } 91 }; .Particle.prototype.render = function(){ 94 that.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+that.rand(50,70)+'%, '+that.rand(20,100)/100+')'; 95 that.ctx.fillRect(this.x, this.y, this.width, this.height); 96 }; .createParticles = function(){ 99 var i = this.particleRate; 100 while(i--){ .Particle()); 102 }; 103 }; .updateParticles = function(){ 106 var i = this.particles.length; 107 while(i--){ 108 var p = this.particles[i]; 109 p.update(i); 110 }; 111 }; .renderParticles = function(){ 114 var i = this.particles.length; 115 while(i--){ 116 var p = this.particles[i]; 117 p.render(); 118 }; 119 }; Clear Canvas .clearCanvas = function(){ 126 this.ctx.globalCompositeOperation = 'source-over'; 127 this.ctx.clearRect(0,0,this.cw,this.ch); 128 this.ctx.globalCompositeOperation = 'lighter'; 129 }; Animation Loop .loop = function(){ 135 var loopIt = function(){ 136 that.raf = requestAnimationFrame(loopIt); 137 that.clearCanvas(); 138 139 that.createParticles(); 140 141 that.updateLoader(); 142 that.updateParticles(); 143 144 that.renderLoader(); 145 that.renderParticles(); 146 147 }; 148 loopIt(); 149 }; .stop = function(){ 153 this.ctx.globalCompositeOperation = 'source-over'; 154 this.ctx.clearRect(0,0,this.cw,this.ch); 155 window.cancelAnimationFrame(this.raf); 156 } 157 158 }; Setup requestAnimationFrame when it is unavailable. setupRAF = function(){ 165 var lastTime = 0; 166 var vendors = ['ms', 'moz', 'webkit', 'o']; 167 for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){ 168 window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 169 window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; 170 }; (!window.requestAnimationFrame){ 173 window.requestAnimationFrame = function(callback, element){ 174 var currTime = new Date().getTime(); 175 var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 176 var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); 177 lastTime = currTime + timeToCall; 178 return id; 179 }; 180 }; (!window.cancelAnimationFrame){ 183 window.cancelAnimationFrame = function(id){ 184 clearTimeout(id); 185 }; 186 }; 187 };

我在源码基础上加了个stop，初始化的时候清除了进度条位置和粒子位置，改动就这两点。大家可以在gitHub上fork我改动过后的版本：https://github.com/QieGuo2016/Light-Loader

引用这个组件也非常简单：