Question

我的移动设备/平板电脑上的画布动画有问题。动画运行良好，直到我点击＆＃34; home＆＃34;或＆＃34; switchapp＆＃34;按钮，然后更改设备＆＃34;旋转＆＃34;。当我切换回带有画布动画的浏览器窗口时，它被冻结，它不会再次播放。

这是一个小提琴：jsfiddle.net/nLmjchqv /

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

谢谢。

Answer 1

您可以收听pageshow和pagehide个活动（请参阅MDN）

例如，您可以在cancelAnimationFrame上致电pagehide，然后在requestAnimationFrame上使用pageshow再次启动动画

Answer 2

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

在移动设备上单击homebutton（切换应用程序）时，画布动画停止播放

2 个答案: