好久没更新技术文章了,这次更新还是有点儿水。。。 没事儿,水惯了就好了,哈哈

这次这个货呢主要是最近在写一个比较好玩儿的东西,在做动画的主程序循环的时候,想起了这货 -- requestAnimationFrame, HTML5的新增函数,主要在于提高动画的执行效率,尤其是canvas和svg这种的。用起来很赞,但是兼容性嘛。。。。 呵呵。。。

so~ 这次我主要是记一下这货的兼容写法(终于进入正题了。。。)

(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
    var id = window.setTimeout(function() {
        callback(currTime + timeToCall);
    }, timeToCall);
    lastTime = currTime + timeToCall;
    return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
    clearTimeout(id);
};
}());

嗯嗯,大概就是这样。。。 也没啥好细说的,简单明了

很好,水贴完成! 走你~

标签: 前端, animation

添加新评论