在Android设备上不支持requestAnimationFrame

最新推荐文章于 2024-05-23 18:15:18 发布

Jessieteng

最新推荐文章于 2024-05-23 18:15:18 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：分享文章标签： css3 动画 android

本文链接：https://blog.youkuaiyun.com/sinat_33351585/article/details/72677451

分享专栏收录该内容

1 篇文章

订阅专栏

在移动端开发中，使用requestAnimationFrame进行动画时遇到了在Android设备上不支持的问题，导致动画出现闪现。经过调查，确认是Android浏览器对requestAnimationFrame的不兼容造成。为解决这个问题，进行了兼容性处理，通过遍历并尝试使用webkit和moz前缀的requestAnimationFrame和cancelAnimationFrame方法，实现了在Android设备上的兼容。以下是实现兼容性的关键代码。

之前在移动端遇到的问题—用计时器写动画，会有一段时间后出现闪现的问题，刚开始还以为是计时器的问题，用css3写也同样出现问题。

那么问题又来了，到底是什么原因？有时候直觉还是挺对的，查了一下代码，感觉requestAnimationFrame有点不对劲，开始对它下手，搜罗了一下它的相关资料，还真有问题，安卓手机不兼容，哈哈，问题解决一大半了，那么接下来就是兼容处理了，兼容处理一般都是固定模式写法，没什么好解释的——>直接分享代码（就是这么干脆直接）：(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);
    };
}

}());