问题
当需要用js来控制动画时,一般可采用通用的方式开启和关闭动画。但这种方式在小米、vivo等智能安卓手机中取消动画失败
//js控制动画的通用方式
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ){var id=window.setTimeout(callback, 1000 / 60);return id;};
})();
window.cancelAnimFrame = (function(){
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||window.mozCancelAnimationFrame ||function(id){
clearTimeout(id);
};
})();
原因
安卓机性能参差不齐,有些机型虽然有CancelAnimationFrame,但不能正常工作,导致取消动画失败
解决方案
在移动H5页面中需要用js来取消动画时,做个判断,不要在安卓机上使用requestAnimationFrame和cancelAnimationFrame。
//安卓机采用这种方式
window.requestAnimFrame = function( callback ){
var id=setTimeout(callback, 1000 / 60);return id;
};
window.cancelAnimFrame = function(id){
clearTimeout(id);
};