在JavaScript中创建动画的典型方式，就是使用setInterval()方法来控制所有的动画，以下是一个使用setInterval()的基本动画循环。

(function(){
	function aa() {
		doSome();
		doOther();
	}
	setInterval(aa, 100);
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
#box{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    top:0px;
    left: 0px;
}
</style>
<div id="box"></div>
<button id="btn">运动</button>

<script>
var oBox = document.getElementById("box");
var oBtn = document.getElementById("btn");
var left = 5;
oBtn.onclick = function() {
    setInterval(requestAnimation, 100);
}

function requestAnimation() {
    left += 5;
    oBox.style.left = left + "px";
}
</script>
</body>
</html>

javascript早期动画循环(一)_javascript
为了创建一个小型动画库，aa()方法就得不断循环地执行每一个动画，并相应的改变不同元素的状态，如果没有动画需要更新，这个方法可以退出，什么也不用做，甚至可把动画停下来，等待下一次需要更新的动画。

编写这种动画的关键在于要知道延迟多少时间合适，一方面，循环间隔必须足够短，这样才能让不同的动画显得平滑流畅，另一方面：循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化，大多数电脑显示器刷新频率是60hz。大概相当于每秒钟重回60次，
因此，最平滑的动画最佳时间就是1000ms/60,约等于17ms，以这个循环间隔重回动画效率很好。

使用setInterval()和setTimeout()都不是最准确的，所以就出现了新兴的动画API，requestAnimationFrame();
好了，今天就写到这里吧，明天继续研究requestAnimationFrame()函数。