有没有办法阻止用户交互暂停动画？

Question

我有一个运行在网页上的动画。只要我在触摸设备上与页面交互，动画就会停止。这不会发生在桌面上。我正在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，但没什么区别。

谢谢。

Answer 1

请参阅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);