记一次动画的优化--requestAnimationFrame、webp

需要写一个类似帧动画的东西，但是每一帧是一张全屏的图，而且量特别大，600都张，而且存在跳帧的问题，只有把速度调的很快还可以看着不跳帧。但是只用谷歌还真正常播放。

其实优化起来两个方面。一个是用requestAnimationFrame第二个就是用webP压缩第三加载的时候使用预加载，进入的时候只加载几张图片，动起来，后面的边动，变加。

1/requestAnimationFrame：

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
            return window.setTimeout(callback, 1000 / 60);
        };
})();

 

那是在张大神博客找得更全面的兼容：

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // Webkit中此取消方法的名字变了
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (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);
        };
    }
}());

　　2/webP看了很多文章，也来实践一下。哪里贴一片58的webP实践：

　　3/预加载的 利用类似懒加载的形式，前面封过插件。