canvas 在移动设备上单击主页按钮（切换应用程序）时动画停止播放

Question

我的 canvas 动画在我的移动设备/平板电脑上有问题。动画运行很好，直到我单击 "home" 或 "switchapp" 按钮，然后更改设备 "rotation"。当我切换回带有 canvas 动画的浏览器 window 时，它被冻结并且不会再次播放。

这是一个fiddle: jsfiddle.net/nLmjchqv/

是否可以再次运行动画（比如重新启动canvas）？是否可以在 JavaScript 中检测到应用程序切换或主页按钮点击？

谢谢。

Answer 1

您可以监听 pageshow 和 pagehide 事件（参见 MDN）

例如，您可以在 pagehide 上调用 cancelAnimationFrame，然后在 pageshow

上使用 requestAnimationFrame 再次启动动画

Answer 2

谢谢克里斯托夫，

最后我找到了一个解决方案来采纳你的建议。

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

这是一个fiddle：http://jsfiddle.net/cszkmsLs/

canvas 在移动设备上单击主页按钮（切换应用程序）时动画停止播放

canvas animation stops playing when click homebutton (switch apps) on mobile device

javascript

mobile

animation

canvas

tablet