Canvas-Animation hört auf zu spielen, wenn Homebutton (Apps wechseln) auf Mobilgerät

Question

Ich habe ein Problem mit meiner Leinwand Animation auf meinem mobilen Gerät/Tablet. Animation läuft gut bis ich auf "home" oder "switchapp" button klicke und dann das Gerät "rotation" ändere. Wenn ich mit Canvas-Animation zurück zum Browserfenster wechsle, wird es eingefroren und es wird nicht mehr abgespielt. Hier

ist eine Geige: jsfiddle.net/nLmjchqv/

Ist es möglich, Animation wieder laufen (wie Neustart Leinwand)? Ist es möglich, Apps zu erkennen, Schalter oder Home-Taste klicken Sie in JavaScript?

Vielen Dank.

Answer 1

Sie können für die pageshow und pagehide Events hören (siehe MDN)

Zum Beispiel Sie cancelAnimationFrame auf pagehide und starten Sie die Animation wieder mit requestAnimationFrame auf pageshow

Answer 2

Danke Christoph nennen kann,

Endlich habe ich einen Lösungsbehälter zu Ihrem Rat gefunden. Hier

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

ist eine Geige: http://jsfiddle.net/cszkmsLs/