Это приложение для индикатора выполнения, основанное на HTML5 и JavaScript. Этот плагин индикатора выполнения очень уникален. Он отображает эффекты анимации частиц при отображении прогресса. Другими словами, индикатор выполнения будет генерировать небольшие частицы при падении. эффект очень крутой. Еще одна особенность заключается в том, что по мере изменения прогресса будет меняться и цвет индикатора выполнения.
JavaScript-код
/*============================================= ========*/ /* Легкий погрузчик/*================================ ====================*/var LightLoader = function(c, cw, ch) { var _this = this.c = this.ctx; = c.getContext('2d'); this.cw = cw; this.ch = ch; this.loader = 0; this.loaderHeight = 10; this.loader = { x: (this.cw) /2 ) - (this.loaderWidth/2), y: (this.ch/2) - (this.loaderHeight/2) }; []; this.particleLift = 180; this.hueStart = 0 this.hueEnd = 120; this.gradity = .15; this.particleRate = 4; ============================================*/ / *Инициализировать /*============================================= ========*/ this.init = function(){ this.loop() } /*===================; == =================================*/ /* Служебные функции /*============================================= ========*/ 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);}; /*============== ======================================*/ /* Обновить загрузчик /*== =============================================== ====*/ this.updateLoader = function(){ if(this.loaded < 100){ this.loaded += this.loaderSpeed } else { this.loaded = 0 } }; ===========================================*/ /* Рендеринг загрузчика /*============================================= ========*/ 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 newWidth = (this.loaded/100)*this.loaderWidth; this.ctx.fillStyle = 'hsla('+this.hue+', 100 %, 40%, 1)'; this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); this.ctx.fillStyle = '#222'; this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2); =============================================== =====*/ /* Частицы /*============================================= ========*/ this.Particle = function(){ this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0, 1) ; это.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.gradity; this.x += this.vx; this.y += this.vy; if(this.y > _this.ch){ _this.particles.splice(i, 1); (50,70)+'%, '+_this.rand(20,100)/100+')'; _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; ) { вар p = this.particles [i]; p.render() }; /*============================================= ========*/ /* Очистить холст /*================================ =====================*/ this.clearCanvas = function() { this.ctx.globalCompositeOperation = 'source-over'; this.ctx.clearRect(0,0,this.cw,this.ch); this.ctx.globalCompositeOperation = 'легче' }; /*============== ======================================*/ /* Цикл анимации /*=== =============================================== ===*/ этот.цикл = функция () { вар LoopIt = функция () { requestAnimationFrame (loopIt, _this.clearCanvas(); _this.updateLoader(); _this.renderLoader(); _this.renderParticles(); };};/*========================================= == ============*/ /* Проверка поддержки Canvas/*========================= === ==========================*/var isCanvasSupported = function(){ var elem = document.createElement('canvas') ; вернуть !(elem.getContext && elem.getContext('2d'));};/*=================================== == ===================*/ /* Запрос на установкуAnimationFrame/*=================== == =================================*/var setupRAF = function(){ var LastTime = 0; varvendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x <vendors.length && !window.requestAnimationFrame; ++x){ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame' ]; window.cancelAnimationFrame = окно[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; }; if(!window.requestAnimationFrame) { window.requestAnimationFrame = функция (обратный вызов, элемент) {вар currTime = new Date().getTime(); var timeToCall = Math. max(0, 16 - (currTime - LastTime)); var id = window.setTimeout(function() { callback(currTime +) timeToCall); }, timeToCall); *============================================== = =======*/ /* Определить холст и Инициализировать/*=========================================== == ==========*/if(isCanvasSupported) { var c = document.createElement('canvas'); c.width = 400; c.height = 100; var cw = c.width; вар ч = c.height; document.body.appendChild (c); вар cl = новый LightLoader (c, cw, ch); setupRAF (); cl.init ();}Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.