Ini adalah aplikasi bilah kemajuan berdasarkan HTML5 dan JavaScript. Plugin bilah kemajuan ini sangat unik, menampilkan efek animasi partikel saat menampilkan kemajuan. efeknya sangat keren. Fitur lainnya adalah seiring dengan perubahan kemajuan, warna bilah kemajuan juga akan berubah.
kode JavaScript
/*________________________________________________ ========*/ /* Pemuat Ringan/*==== =======*/var lightLoader = fungsi(c, cw, ch){ var _ini = ini; ini.c = c; = c.getContext('2d'); ini.cw = cw; ini.ch = ch; ini.loader = 0; ini.loaderSpeed = .6; ini.loaderHeight = 10; ini.loaderWidth = 310; /2 ) - (ini.loaderWidth/2), y: (ini.ch/2) - (ini.loaderHeight/2) }; ini.partikel = []; ini.particleLift = 180; ini.hueStart = 0 ini.particleRate = 4; ==================*/ / * Inisialisasi /*------------------------------------------------ ========*/ ini.init = fungsi(){ ini.loop(); /*======= == ====*/ /* Fungsi Utilitas /*------------------------------------------------ ========*/ this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}; fungsi(x1, y1, w1, h1, x2, y2, w2, h2){kembali !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);}; ==========*/ /* Perbarui Loader /*== ==================== ====*/ ini.updateLoader = function(){ if(ini.dimuat < 100){ ini.dimuat += ini.loaderSpeed; } else { ini.dimuat = 0 } }; ================*/ /* Render Pemuat /*------------------------------------------------ ========*/ this.renderLoader = function(){ this.ctx.fillStyle = '#000'; this.ctx.fillRect(ini.loader.x, this.loader.y, this.loaderWidth , ini.loaderHeight); ini.hue = ini.hueStart + (ini.dimuat/100)*(ini.hueEnd - ini.hueStart); var lebar baru = (ini.dimuat/100)*ini.loaderWidth; ini.ctx.fillStyle = 'hsla('+ini.hue+', 100 %, 40%, 1)'; ini.ctx.fillRect(ini.loader.x, ini.loader.y, lebar baru, ini.loaderHeight); ini.ctx.fillStyle = '#222'; ini.ctx.fillRect(ini.loader.x, ini.loader.y, lebar baru, ini.loaderHeight/2 }; ==================== =====*/ /* Partikel /*________________________________________________ ========*/ ini.Partikel = fungsi(){ ini.x = _ini.loader.x + ((_ini.loaded/100)*_ini.loaderWidth) - _ini.rand(0, 1) ; ini.y = _ini.ch/2 + _ini.rand(0,_ini.loaderHeight)-_ini.loaderHeight/2; ini.vx = (_ini.rand(0,4)-2)/100; ini.vy = (_ini.rand(0,_ini.particleLift )-_ini.particleLift*2)/100; ini.lebar = _ini.rand(1,4)/2; _ini.rand(1,4)/2; ini.hue = _ini.hue; }; ini.Partikel.prototipe.update = fungsi(i){ ini.vx += (_ini.rand(0,6)-3 )/100; ini.vy += _ini.gravitasi; ini.x += ini.vx; ini.y += ini.vy; jika(ini.y > _ini.ch){ _ini.partikel.sambungan(i, 1); } }; ini.Partikel.prototipe.render = fungsi(){ _ini.ctx.fillStyle = 'hsla('+ini.hue+', 100%, '+_ini.rand (50,70)+'%, '+_ini.rand(20,100)/100+')'; _ini.ctx.fillRect(ini.x, ini.y, ini.lebar, ini.tinggi }; ini.buatPartikel = fungsi(){ var i = ini.Tingkat Partikel; .push(baru this.Particle()); }; this.updateParticles = function(){ var i = this.particles.length; while(i--){ var p = ini.partikel[i]; p.update(i }; }; ini.renderParticles = fungsi(){ var i = ini.partikel.panjang; ){ var p = ini.partikel[i]; p.render(); /*________________________________________________ ========*/ /* Kanvas Bening /*==== =======*/ this.clearCanvas = function(){ this.ctx.globalCompositeOperation = 'source-over'; this.ctx.clearRect(0,0,this.cw,this.ch); this.ctx.globalCompositeOperation = 'lebih ringan'; /*== =========*/ /* Lingkaran Animasi /*=== ==================== ===*/ ini.loop = fungsi(){ var loopIt = function(){ requestAnimationFrame(loopIt, _this.c); _this.clearCanvas(); _this.createParticles(); ; _ini.renderParticles(); }; };};/*============== == ============*/ /* Periksa Dukungan Canvas/*============ === ============*/var isCanvasSupported = function(){ var elem = document.createElement('canvas') ; kembali ! !(elem.getContext && elem.getContext('2d'));};/*======= == =====*/ /* Pengaturan permintaanAnimationFrame/*===== == ====*/var setupRAF = function(){ var lastTime = 0; var vendor = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){ window.requestAnimationFrame = jendela[vendor[x]+'RequestAnimationFrame' ]; jendela.cancelAnimationFrame = jendela[vendor[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; }; if(!window.requestAnimationFrame){ window.requestAnimationFrame = fungsi(panggilan balik, elemen){ var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { panggilan balik(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; kembalikan id }; jika (!window.cancelAnimationFrame){ window.cancelAnimationFrame = fungsi(id){ clearTimeout(id); * ===== = =======*/ /* Definisikan Kanvas dan Inisialisasi/*================ == ==========*/if(isCanvasDidukung){ var c = document.createElement('canvas'); c.width = 400; c.height = 100; var ch = c.tinggi; dokumen.tubuh.appendChild(c); var cl = lightLoader baru(c, cw, ch); setupRAF();Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.