requestAnimationFrame

摘要

requestAnimationFrame 可以用js 的方式实现 css3 的动画，调用方式var frame = requestAnimationFrame(callback); 可以调用 window.cancelAnimationFrame(frame) 取消回调函数.

为什么要存在这个 api 呢？ 因为 css3 的兼容性问题， requestAnimationFrame 几乎可以运行在 anywhere , 另外 css3 也不能应用所有属性，比如 scrollTop , css3 的动画也比较有限

window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame 可以做兼容。

同时，有时候需要做循环动画, 可以结合 setTimeout

var cnt = 0;  // 循环的次数
var circle = function() {
    if (cnt < 10) { // 循环 10 次
        return;
    }
    cnt ++;
    // 动画
    setTimeout(function() {
        requestAnimationFrame(circle);
    }, 100);  // 100ms 的间隔播放动画
    
}

requestAnimationFrame(circle);