之前在移动端遇到的问题---用计时器写动画,会有一段时间后出现闪现的问题,刚开始还以为是计时器的问题,用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);
};
}
}());