js关闭动画异常

问题

当需要用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);

};