lixin-web
Version:
vue and bootstrap
1 lines • 3.4 kB
JavaScript
var lightLoader=function(a,b,c){var d=this;this.c=a,this.ctx=a.getContext("2d"),this.cw=b,this.ch=c,this.loaded=0,this.loaderSpeed=.6,this.loaderHeight=10,this.loaderWidth=310,this.loader={x:this.cw/2-this.loaderWidth/2,y:this.ch/2-this.loaderHeight/2},this.particles=[],this.particleLift=180,this.hueStart=0,this.hueEnd=120,this.hue=0,this.gravity=.15,this.particleRate=4,this.init=function(){this.loop()},this.rand=function(a,b){return~~(Math.random()*(b-a+1)+a)},this.hitTest=function(a,b,c,d,e,f,g,h){return!(e>a+c||a>e+g||f>b+d||b>f+h)},this.updateLoader=function(a,b){this.loaded<a&&100>=a?(this.loaded+=this.loaderSpeed,Math.round(this.loaded)==Math.round(a)&&b()):(window.cancelAnimationFrame(this.loaderAnimate),this.particles=[])},this.renderLoader=function(){this.ctx.fillStyle="#000",this.ctx.fillRect(this.loader.x,this.loader.y,this.loaderWidth,this.loaderHeight),this.hue=this.hueStart+this.loaded/100*(this.hueEnd-this.hueStart);var a=this.loaded/100*this.loaderWidth;this.ctx.fillStyle="hsla("+this.hue+", 100%, 40%, 1)",this.ctx.fillRect(this.loader.x,this.loader.y,a,this.loaderHeight),this.ctx.fillStyle="#222",this.ctx.fillRect(this.loader.x,this.loader.y,a,this.loaderHeight/2)},this.Particle=function(){this.x=d.loader.x+d.loaded/100*d.loaderWidth-d.rand(0,1),this.y=d.ch/2+d.rand(0,d.loaderHeight)-d.loaderHeight/2,this.vx=(d.rand(0,4)-2)/100,this.vy=(d.rand(0,d.particleLift)-2*d.particleLift)/100,this.width=d.rand(1,4)/2,this.height=d.rand(1,4)/2,this.hue=d.hue},this.Particle.prototype.update=function(a){this.vx+=(d.rand(0,6)-3)/100,this.vy+=d.gravity,this.x+=this.vx,this.y+=this.vy,this.y>d.ch&&d.particles.splice(a,1)},this.Particle.prototype.render=function(){d.ctx.fillStyle="hsla("+this.hue+", 100%, "+d.rand(50,70)+"%, "+d.rand(20,100)/100+")",d.ctx.fillRect(this.x,this.y,this.width,this.height)},this.createParticles=function(){for(var a=this.particleRate;a--;)this.particles.push(new this.Particle)},this.updateParticles=function(){for(var a=this.particles.length;a--;){var b=this.particles[a];b.update(a)}},this.renderParticles=function(){for(var a=this.particles.length;a--;){var b=this.particles[a];b.render()}},this.clearCanvas=function(){this.ctx.globalCompositeOperation="source-over",this.ctx.clearRect(0,0,this.cw,this.ch),this.ctx.globalCompositeOperation="lighter"},this.loop=function(a,b){var c=function(){d.loaderAnimate=requestAnimationFrame(c,d.c),d.clearCanvas(),d.createParticles(),d.updateLoader(a,b),d.updateParticles(),d.renderLoader(),d.renderParticles()};c()}},isCanvasSupported=function(){var a=document.createElement("canvas");return!(!a.getContext||!a.getContext("2d"))},setupRAF=function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(b){var c=(new Date).getTime(),d=Math.max(0,16-(c-a)),e=window.setTimeout(function(){b(c+d)},d);return a=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)})};if(isCanvasSupported){var c=document.createElement("canvas");c.id="light-loader",c.width=400,c.height=100;var cw=c.width,ch=c.height;document.body.appendChild(c),window.lightLoader=new lightLoader(c,cw,ch),setupRAF()}