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);

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

1 个答案: