js关闭动画异常
2015-11-05 11:52
453 查看
问题
当需要用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);
};
当需要用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);
};
相关文章推荐
- JavaScript_纯Js实现的Ajax
- 【Miaov】JS7-运算符、流程控制
- js实现文件下载自定义下载路径
- RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码
- 解决Jsp搜索分页获取的中文参数乱码问题
- JavaScript高级程序设计之DOM 扩展之元素遍历第11.2讲
- 百度api商圈范围图修改获取坐标数据、点是否在区域范围判断、js解析创建excel
- JavaScript高级程序设计之DOM 扩展之选择符API第11.1讲
- jsp 标签
- js内存泄露的几种情况详细探讨
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- js return关键字
- Extjs 图片的自动缩放
- .NET(WEBSERVICE) EXT (Tree 4000 )JSON数据小demo
- 对Extjs中store的多种操作
- Sharepoint JSLink MultiString
- javascript实现tab切换的四种方法
- JavaScript精炼之构造函数 Constructor及Constructor属性详解
- JS中的return的用法---笔记
- 110 js ajax获取html元素并插入