requestAnimationFrame 优雅降级

最新推荐文章于 2022-07-10 23:45:00 发布

weixin_30258027

最新推荐文章于 2022-07-10 23:45:00 发布

阅读量118

点赞数

原文链接：http://www.cnblogs.com/chenzeyongjsj/p/10490361.html

版权

本文介绍了一种在浏览器不支持的情况下补全requestAnimationFrame和cancelAnimationFrame的方法。通过检查是否支持这些API，并在不支持时提供polyfill实现，确保了跨浏览器的动画效果一致性。

摘要由CSDN通过智能技术生成

if (!Date.now)

    Date.now = function() { return new Date().getTime(); };


(function() {

    'use strict';

    

    var vendors = ['webkit', 'moz'];

    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {

        var vp = vendors[i];

        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];

        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']

                                   || window[vp+'CancelRequestAnimationFrame']);

    }

    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy

        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {

        var lastTime = 0;

        window.requestAnimationFrame = function(callback) {

            var now = Date.now();

            var nextTime = Math.max(lastTime + 16, now);

            return setTimeout(function() { callback(lastTime = nextTime); },

                              nextTime - now);

        };

        window.cancelAnimationFrame = clearTimeout;

    }

}());