Heim > Web-Frontend > H5-Tutorial > Detaillierte Einführung in den Fortschrittsbalken-Grafikcode des supercoolen HTML5-Partikeleffekts

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

黄舟
Freigeben: 2017-03-30 10:37:57
Original
2479 Leute haben es durchsucht

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.

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();
}
Nach dem Login kopieren

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 (m.sbmmt.com)!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage