HTML5 円形ウェーブ読み込みアニメーションの特殊効果

HTML5 円形ウェーブ ローディング アニメーション特殊効果は、ネイティブ HTML5 + css3 + キャンバス ウェーブ ローリング ライジング ローディング アニメーションと円形ローディング コンテナー効果です。

var wave = (関数() {

var ctx;
var waveImage;
var CanvasWidth;
var CanvasHeight;
var needAnimate = false;

関数 init (コールバック) {
var wave = document.getElementById('wave');
var Canvas = document.createElement('canvas');
if (!canvas.getContext) が戻る;
ctx = Canvas.getContext('2d');
CanvasWidth = wave.offsetWidth;
CanvasHeight = wave.offsetHeight;
Canvas.setAttribute('width', CanvasWidth);
Canvas.setAttribute('height', CanvasHeight);
wave.appendChild(canvas);
waveImage = 新しい画像();
waveImage.onload = function () {
waveImage.onload = null;
コールバック();
}
waveImage.src = 'images/wave.png';
}

関数アニメーション () {
var waveX = 0;
var waveY = 0;
var waveX_min = -203;
var waveY_max = CanvasHeight * 0.7;
var requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
関数 (コールバック) { window.setTimeout(callback, 1000 / 60); };
関数ループ () {
ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
if (!needAnimate) return;
if (waveY < waveY_max) waveY += 1.5;
if (waveX < waveX_min) waveX = 0; else waveX -= 3;

ctx.globalCompositeOperation = 'ソースオーバー';
ctx.beginPath();
ctx.arc(canvasWidth/2, CanvasHeight/2, CanvasHeight/2, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.globalCompositeOperation = 'ソースイン';
ctx.drawImage(waveImage, waveX, CanvasHeight - waveY);

requestAnimationFrame(ループ);
}
ループ();
}

関数 start () {
if (!ctx) return init(start);
needAnimate = true;
setTimeout(function() {
if (needAnimate) animate();
}, 500);
}
関数 stop() {
needAnimate = false;
}
return {開始: 開始、停止: 停止};
}());
wave.start();