有没有办法阻止用户交互暂停动画?
问题描述:
我有一个运行在网页上的动画。只要我在触摸设备上与页面交互,动画就会停止。这不会发生在桌面上。我正在iPad上测试Chrome和Safari。有没有办法阻止用户交互暂停动画?
这是浏览器厂商有意做出的选择吗?有没有办法解决?
您可以在触摸设备上转到JSFiddle page来测试此功能。
这是JavaScript我使用:
var offset = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
$('.box').on('click', function() {
animateWithAnimationFrame();
});
function animateWithAnimationFrame() {
if (offset === 500)
return;
offset++;
$('.box').attr('style', '-webkit-transform: translate3d(' + offset + 'px, 0, 0)');
requestAnimationFrame(animateWithAnimationFrame);
}
我也尝试过用动画的setTimeout,但没什么区别。
谢谢。
答
请参阅Android browser touch events stop display being updated inc. canvas/elements - How to work around?类似的问题。
其实,在文档(动画开始后)解雇只touchstart的伎俩:http://jsfiddle.net/fBFkA/17/:
function touchHandlerDummy(e) {
return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
不是发生在Android版Chrome浏览 –
尤里 - 感谢测试。也许这是iOS特有的。 – andyuk