html5 css3圓形波浪百分比載入動畫特效

js程式碼

<腳本>
var 波 = (函數 () {
var ctx;
var 波影像；
var 畫布寬度；
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('寬度', canvasWidth);
canvas.setAttribute('高度', canvasHeight);
wave.appendChild(畫布);
波圖像=新圖像（）；
waveImage.onload = function () {
waveImage.onload = null;
打回來（）;
}
waveImage.src = 'images/wave.png';
}

函數動畫 () {
var 波X = 0;
var 波Y = 0;
var waveX_min = -203;
var waveY_max = 畫布高度 * 0.7;
var 請求動畫幀 =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
函數（回呼）{ window.setTimeout（回調，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);

請求動畫幀（循環）；
}
環形（）;
}

函數開始（）{
if (!ctx) 返回 init(開始);
需要動畫 = true;
設定超時（函數（）{
如果（需要動畫）動畫（）；
}, 500);
}
函數停止（）{
需要動畫 = false;
}
返回{開始：開始，停止：停止}；
}());
波.start();
</劇本>