forked from qiushanhe/dm-manage-web
eslint
This commit is contained in:
qsh
208
public/loading/index.js
Normal file
208
public/loading/index.js
Normal file
@@ -0,0 +1,208 @@
|
||||
/* ========================================================*/
|
||||
/* 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 = 1.5;
|
||||
this.loaderHeight = 8;
|
||||
this.loaderWidth = 428;
|
||||
this.loader = {
|
||||
x: this.cw / 2 - this.loaderWidth / 2,
|
||||
y: this.ch / 2 - this.loaderHeight / 2
|
||||
};
|
||||
this.particles = [];
|
||||
this.particleLift = 180;
|
||||
this.gravity = 0.15;
|
||||
this.particleRate = 8;
|
||||
|
||||
/* ========================================================*/
|
||||
/* 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 = '#2F2F47';
|
||||
this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);
|
||||
|
||||
var newWidth = (this.loaded / 100) * this.loaderWidth;
|
||||
var linearGrad = this.ctx.createLinearGradient(0, 0, this.loaderWidth, 0);
|
||||
linearGrad.addColorStop(0.0, '#24DED0');
|
||||
linearGrad.addColorStop(1.0, '#1490EA');
|
||||
this.ctx.fillStyle = linearGrad;
|
||||
this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);
|
||||
|
||||
// this.ctx.fillStyle = '#2F2F47';
|
||||
// this.ctx.fillRect(
|
||||
// this.loader.x,
|
||||
// this.loader.y,
|
||||
// newWidth,
|
||||
// this.loaderHeight
|
||||
// );
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* 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.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 = 'rgba(50, 213, 203, 0.4)';
|
||||
_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 = 'source-over';
|
||||
this.ctx.clearRect(0, 0, this.cw, this.ch);
|
||||
this.ctx.globalCompositeOperation = 'lighter';
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* 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('canvas');
|
||||
return !!(elem.getContext && elem.getContext('2d'));
|
||||
};
|
||||
|
||||
/* ========================================================*/
|
||||
/* Setup requestAnimationFrame
|
||||
/*========================================================*/
|
||||
var setupRAF = function () {
|
||||
var lastTime = 0;
|
||||
var vendors = ['ms', 'moz', 'webkit', 'o'];
|
||||
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
|
||||
}
|
||||
|
||||
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('canvas');
|
||||
c.width = 428;
|
||||
c.height = 100;
|
||||
var cw = c.width;
|
||||
var ch = c.height;
|
||||
// document.body.appendChild(c);
|
||||
document.getElementById('loader-wrapper').appendChild(c);
|
||||
var cl = new lightLoader(c, cw, ch);
|
||||
|
||||
setupRAF();
|
||||
cl.init();
|
||||
}
|
||||
Reference in New Issue
Block a user