08. 动画 - 帧循环

动画的原理是按照一定的频率周期性地更新屏幕显示内容,造成视觉上的”动画”效果。
浏览器周期性活动使用Javascript的API 【 requestAnimationFrame 】 。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动画 - 帧循环</title>
</head>
<body>
<script src="requestNextAnimationFrame.js"></script>

<script>

function paint()
{
//TODO
console.log("循环处理");

//在下一帧执行
window.requestNextAnimationFrame( paint ) ;
}

//开始帧循环
window.requestNextAnimationFrame( paint ) ;

</script>

</body>
</html>

requestNextAnimationFrame.js

1
2
3
4
5
6
7
8
9
10
11
12
/*******************************************************************************
* 定义window动画循环控制函数(利用立即执行函数)
*******************************************************************************/
window.requestNextAnimationFrame = (function() {
return (window.requestAnimationFrame
|| window.msRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame)
|| function (func) {
setTimeout(func, 16);
};
})();