iPad上的Safari不會停止請求動畫幀

Question

我在iPad上遇到了一種奇怪的情況。我確實有一個基於spritesheet的動畫序列，你可以以「乒乓」的方式播放：你點擊一次，它向前播放，直到它的最後一幀，你點擊回來，它再次向後播放，直到它到達第1幀。

我用的是JS的樣子：

$('.pingpong').each(function(){ 

    var step = parseInt($(this).width(), 10); 
    var frames = parseInt($(this).data('frames'), 10); 
    var img = $(this).find('img'); 
    var running = false; 
    $(this).data('playForward', true); 

    $(this).bind(interaction, function(){ //interaction is tap on mobiles and click on desktops 

     if (!running){ 

      running = true; 
      var lastExecution = new Date().getTime(); 
      var counter = 1; 

      function pingpong(){ 

       var now = new Date().getTime(); 

       if (now - lastExecution >= (1000/config.fps)){ //animation is supposed to run at 12fps 

        img.css('margin-left', $(this).data('playForward') ? '+=' + step + 'px' : '-=' + step + 'px'); 
        counter++; 
        lastExecution = new Date().getTime(); 

       } 

       if (counter != frames){ 

        requestAnimationFrame(pingpong); 

       } else { 

        $(this).data('playForward', !($(this).data('playForward'))); //this change of direction is triggered on iOS as well strangely enough 
        running = false; 

       } 

      } 

      pingpong(); 

     } 

    }); 

}); 

這適用於所有桌面瀏覽器完全正常，但Safari瀏覽器在iPad不會停止請求動畫幀，動畫將「溢出」，直到圖像（通過它的保證金），但當我登錄號碼或​​電話（我使用保羅愛爾蘭shim btw - 但它沒有區別，如果我使用webkitRequestAnimationFrame）我可以看到遞歸pingpong c所有iOS都不會停止（在桌面上）。此外，嘗試cancelAnimationFrame我的通話的id沒有區別。

我的理解是​​有缺陷還是我錯過了不同的東西？ iPad上的new Date().getTime()行爲有什麼不同？我目前使用的是基於setInterval的解決方案，但是我完全被這種行爲所嘲笑，所以我想現在有人可能現在在哪裏我錯了？

Answer 1

嘗試以下方法：

$('.pingpong').each(function(){ 

var step = parseInt($(this).width(), 10); 
var frames = parseInt($(this).data('frames'), 10); 
var img = $(this).find('img'); 
var running = false; 
$(this).data('playForward', true); 

$(this).bind(interaction, function(){ //interaction is tap on mobiles and click on desktops 

    if (!running){ 

     running = true; 
     var lastExecution = new Date().getTime(); 
     var counter = 1; 

     function pingpong(){ 

      var now = new Date().getTime(); 

      if (now - lastExecution >= (1000/config.fps)){ //animation is supposed to run at 12fps 

       img.css('margin-left', $(this).data('playForward') ? '+=' + step + 'px' : '-=' + step + 'px'); 
       counter++; 
       lastExecution = new Date().getTime(); 

      } 

      if (counter < frames){ 
       requestAnimationFrame(pingpong); 
      } else { 
       $(this).data('playForward', !($(this).data('playForward'))); //this change of direction is triggered on iOS as well strangely enough 
       running = false; 
      } 

     } 

     pingpong(); 

    } 

}); 

}）;