HTML5 CSS3 円形波パーセンテージ読み込みアニメーション特殊効果

js代

<スクリプト>
var wave = (関数() {
var ctx;
var waveImage;
var CanvasWidth;
var キャンバスの高さ;
var needAnimate = false;

関数初期化 (コールバック) {
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('高さ', CanvasHeight);
wave.appendChild(キャンバス);
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) が戻る;
if (waveY < waveY_max) waveY += 1.5;
if (waveX < waveX_min) waveX = 0;それ以外の場合、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(ループ);
}
ループ（）;
}

関数開始() {
if (!ctx) は init(start) を返します。
needAnimate = true;
setTimeout(関数() {
if (needAnimate) animate();
}, 500);
}
関数停止() {
needAnimate = false;
}
return {開始: 開始、停止: 停止};
}());
wave.start();
</script>