Detaillierte Einführung in den Fortschrittsbalken-Grafikcode des supercoolen HTML5-Partikeleffekts

Dies ist eine Fortschrittsbalken-Anwendung, die auf HTML5 und JavaScript basiert. Dieses Fortschrittsbalken-Plugin ist sehr einzigartig. Es wird angezeigt, wenn der Fortschritt erfolgt angezeigt. Partikel--Animations--Effekt, das heißt, während der Fortschrittsbalken gleitet, fallen einige kleine Partikel herunter, und der Effekt ist sehr cool. Eine weitere Funktion besteht darin, dass sich bei einer Fortschrittsänderung auch die Farbe des Fortschrittsbalkens ändert.

Online-Demo-Quellcode-Download

JavaScript-Code

/*========================================================*/  
/* Light Loader
/*========================================================*/
var lightLoader = function(c, cw, ch){

	var _this = this;
	this.c = c;
	this.ctx = c.getContext('2d');
	this.cw = cw;
	this.ch = ch;			

	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;	

	/*========================================================*/	
	/* Initialize
	/*========================================================*/
	this.init = function(){
		this.loop();
	};

	/*========================================================*/	
	/* Utility Functions
	/*========================================================*/				
	this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);};
	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
	/*========================================================*/
	this.updateLoader = function(){
		if(this.loaded < 100){
			this.loaded += this.loaderSpeed;
		} else {
			this.loaded = 0;
		}
	};

	/*========================================================*/	
	/* Render Loader
	/*========================================================*/
	this.renderLoader = function(){
		this.ctx.fillStyle = &#39;#000&#39;;
		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 newWidth = (this.loaded/100)*this.loaderWidth;
		this.ctx.fillStyle = &#39;hsla(&#39;+this.hue+&#39;, 100%, 40%, 1)&#39;;
		this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);

		this.ctx.fillStyle = &#39;#222&#39;;
		this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2);
	};	

	/*========================================================*/	
	/* Particles
	/*========================================================*/
	this.Particle = function(){					
		this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0, 1);
		this.y = _this.ch/2 + _this.rand(0,_this.loaderHeight)-_this.loaderHeight/2;
		this.vx = (_this.rand(0,4)-2)/100;
		this.vy = (_this.rand(0,_this.particleLift)-_this.particleLift*2)/100;
		this.width = _this.rand(1,4)/2;
		this.height = _this.rand(1,4)/2;
		this.hue = _this.hue;
	};

	this.Particle.prototype.update = function(i){
		this.vx += (_this.rand(0,6)-3)/100; 
		this.vy += _this.gravity;
		this.x += this.vx;
		this.y += this.vy;

		if(this.y > _this.ch){
			_this.particles.splice(i, 1);
		}					
	};

	this.Particle.prototype.render = function(){
		_this.ctx.fillStyle = &#39;hsla(&#39;+this.hue+&#39;, 100%, &#39;+_this.rand(50,70)+&#39;%, &#39;+_this.rand(20,100)/100+&#39;)&#39;;
		_this.ctx.fillRect(this.x, this.y, this.width, this.height);
	};

	this.createParticles = function(){
		var i = this.particleRate;
		while(i--){
			this.particles.push(new this.Particle());
		};
	};

	this.updateParticles = function(){					
		var i = this.particles.length;						
		while(i--){
			var p = this.particles[i];
			p.update(i);											
		};						
	};

	this.renderParticles = function(){
		var i = this.particles.length;						
		while(i--){
			var p = this.particles[i];
			p.render();											
		};					
	};

	/*========================================================*/	
	/* Clear Canvas
	/*========================================================*/
	this.clearCanvas = function(){
		this.ctx.globalCompositeOperation = &#39;source-over&#39;;
		this.ctx.clearRect(0,0,this.cw,this.ch);					
		this.ctx.globalCompositeOperation = &#39;lighter&#39;;
	};

	/*========================================================*/	
	/* Animation Loop
	/*========================================================*/
	this.loop = function(){
		var loopIt = function(){
			requestAnimationFrame(loopIt, _this.c);
			_this.clearCanvas();

			_this.createParticles();

			_this.updateLoader();
			_this.updateParticles();

			_this.renderLoader();
			_this.renderParticles();

		};
		loopIt();					
	};

};

/*========================================================*/	
/* Check Canvas Support
/*========================================================*/
var isCanvasSupported = function(){
	var elem = document.createElement(&#39;canvas&#39;);
	return !!(elem.getContext && elem.getContext(&#39;2d&#39;));
};

/*========================================================*/	
/* Setup requestAnimationFrame
/*========================================================*/
var setupRAF = function(){
	var lastTime = 0;
	var vendors = [&#39;ms&#39;, &#39;moz&#39;, &#39;webkit&#39;, &#39;o&#39;];
	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){
		window.requestAnimationFrame = window[vendors[x]+&#39;RequestAnimationFrame&#39;];
		window.cancelAnimationFrame = window[vendors[x]+&#39;CancelAnimationFrame&#39;] || window[vendors[x]+&#39;CancelRequestAnimationFrame&#39;];
	};

	if(!window.requestAnimationFrame){
		window.requestAnimationFrame = function(callback, element){
			var currTime = new Date().getTime();
			var timeToCall = Math.max(0, 16 - (currTime - lastTime));
			var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
			lastTime = currTime + timeToCall;
			return id;
		};
	};

	if (!window.cancelAnimationFrame){
		window.cancelAnimationFrame = function(id){
			clearTimeout(id);
		};
	};
};			

/*========================================================*/	
/* Define Canvas and Initialize
/*========================================================*/
if(isCanvasSupported){
  var c = document.createElement(&#39;canvas&#39;);
  c.width = 400;
  c.height = 100;			
  var cw = c.width;
  var ch = c.height;	
  document.body.appendChild(c);	
  var cl = new lightLoader(c, cw, ch);				

  setupRAF();
  cl.init();
}

Oben ist der Fortschrittsbalken von HTML5 super cool Partikeleffekt Der Grafikcode wird im Detail vorgestellt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!