有沒有辦法阻止用戶交互暫停動畫？

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