javascript - 有没有办法防止用户交互暂停动画？

Question

我有一个在网页上运行的动画。一旦我在触摸设备上与页面交互，动画就会停止。这不会发生在桌面上。我正在 iPad 上的 Chrome 和 Safari 上进行测试。

这是浏览器 vendor 有意做出的选择吗？有什么办法解决这个问题吗？

您可以转到此 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);