在移動設備上單擊homebutton（切換應用程序）時，canvas動畫停止播放

我的移動設備/平板電腦上的畫布動畫有問題。動畫運行良好，直到我點擊「home」或「switchapp」按鈕，然後更改設備「旋轉」。當我用畫布動畫切換回瀏覽器窗口時，它會被凍結，並且不會再播放。在移動設備上單擊homebutton（切換應用程序）時，canvas動畫停止播放

這裏是一個小提琴：jsfiddle.net/nLmjchqv/

是否有可能運行再次動畫（如重啓帆布）？是否有可能在JavaScript中檢測應用程序切換或主頁按鈕點擊？

謝謝。

來源

2016-08-24 zed

您可以監聽pageshow和pagehide活動（見MDN）

例如，您可以在pagehide調用cancelAnimationFrame，然後用再次啓動動畫上pageshow

來源

2016-08-24 17:49:48 Christoph

謝謝克里斯托夫，

最後我找到了解決方案坦克給你的建議。

<canvas id="myCanvas" width="578" height="200"></canvas> 
    <script> 
     //raf polyfill 
     (function() { 
     var lastTime = 0; 
     var vendors = ['webkit', 'moz']; 
     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 
      window.cancelAnimationFrame = 
      window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; 
     } 

     if (!window.requestAnimationFrame) 
      window.requestAnimationFrame = function(callback, element) { 
       var currTime = new Date().getTime(); 
       var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
       var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
       timeToCall); 
       lastTime = currTime + timeToCall; 
       return id; 
      }; 

     if (!window.cancelAnimationFrame) 
      window.cancelAnimationFrame = function(id) { 
       clearTimeout(id); 
      }; 
    }()); 

     function drawRectangle(myRectangle, context) { 
      context.beginPath(); 

      context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); 
      context.fillStyle = '#8ED6FF'; 
      context.fill(); 
      context.lineWidth = myRectangle.borderWidth; 
      context.strokeStyle = 'black'; 
      context.stroke(); 
     } 

    var rafId; 

    function animate() { 
      if (myRectangle.dir == 'right') { 
       myRectangle.x += 5; 
      } 

      if (myRectangle.dir == 'right' && myRectangle.x >= canvas.width - myRectangle.width) { 
       myRectangle.dir = 'left'; 
      } 

      if (myRectangle.dir == 'left' && myRectangle.x <= 0) { 
       myRectangle.dir = 'right'; 
      } 

      if (myRectangle.dir == 'left') { 
       myRectangle.x -= 5; 
      } 

      // clear 
      context.clearRect(0, 0, canvas.width, canvas.height); 

      drawRectangle(myRectangle, context); 

      // request new frame 
      rafId = requestAnimationFrame(animate); 
     } 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 

     var myRectangle = { 
      x: 0, 
      y: 75, 
      width: 100, 
      height: 50, 
      borderWidth: 5, 
      dir: 'right' 
     }; 

    animate(); 

    var supportsOrientationChange = "onorientationchange" in window, 
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 

    window.addEventListener(orientationEvent, function() { 

     cancelAnimationFrame(rafId); 

     canvas = document.getElementById("myCanvas"); 
     var cw = canvas.width; 
     var ch = canvas.height;    
     canvas.outerHTML = ""; 
     delete canvas; 

     canvas = document.createElement('canvas'); 
     canvas.id = "myCanvas"; 
     canvas.width = cw; 
     canvas.height = ch; 

      document.body.appendChild(canvas); 
     context = canvas.getContext('2d'); 

     rafId = requestAnimationFrame(animate); 
    }, false); 

    </script>

這裏是一個小提琴：http://jsfiddle.net/cszkmsLs/

來源

2016-08-24 23:44:19 zed

在移動設備上單擊homebutton（切換應用程序）時，canvas動畫停止播放

回答

相關問題