javascript - HTML Canvas 动画无法在移动设备上运行

Question

Canvas 动画在网络浏览器上有效运行，但在使用 iPad 和 iPhone 的移动浏览器上进行测试时，动画永远不会启动。它只是简单地显示背景图像。没有给出错误消息。

动画基本上是一个图像，从 Canvas 左侧的屏幕外移动，并在达到 Canvas 宽度的 75% 时停止。

代码如下

  <script>

  window.addEventListener("load", eventWindowLoaded, false);
        function eventWindowLoaded () {
        start();
    }

    function canvasSupport () {
        return Modernizr.canvas;
    }  

    var canvas = document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d");    
    var cw=canvas.width;
    var ch=canvas.height;

    var image1 = new Image();
    image1.onload = function() {
        ctx.clearRect(0, 0, 600, 400);
        ctx.drawImage(image1, 0, 0);
    }
    image1.src="images/oven.jpg";   
    ctx.fillStyle = image1;

    var currentX=cw;
    var continueAnimating=true;
    var nextMoveTime,maxMoves;
    var expX = 50;
    var expY = 200;


    var image2 = new Image();
    image2.onload=start;
    image2.src="images/pies.png"; 

    var image = new Image();
    image.onload=start;
    image.src="images/pies.png"; 



    function start(){

      maxMoves=(cw+image.width)*0.5;

      nextMoveTime=performance.now();

      requestAnimationFrame(animate);




    function animate(currentTime){

      if(continueAnimating){ requestAnimationFrame(animate); }

      if(currentTime<nextMoveTime){return;}

      nextMoveTime=currentTime; // + delay;


      ctx.drawImage(image,currentX,193);

      if(--currentX<-image.width){ currentX=cw; }

      if(--maxMoves<0){continueAnimating=false;}
}
}

</script>

Answer 1

因此，问题出在您对 Performance.now 的使用，但该功能并不总是能够实现，尤其是在移动设备上，精确计时器的功耗太高。
只需使用 requestAnimationFrame 提供的时间:在精确的浏览器/设备上，它将使用亚毫秒精度，否则它将只有毫秒精度。
(准确 = Chrome 桌面版肯定是这样，...其他？？？)

我将让您在下面看到我如何使用 rAF 的时间来构建当前的“dt”=自上一帧以来耗时，“applicationTime”=应用程序中耗时(不是当您退出应用程序时进行计数)。

此方法的第二个好处是，您可以轻松更改应用程序速度以实现“子弹时间”或加速(如果速度为 <0，甚至可以倒回)。

fiddle 在这里:

http://jsfiddle.net/gamealchemist/KVDsc/

// current application time, in milliseconds.
var applicationTime = 0;    
// scale applied to time. 
// 1 means no scale, <1 is slower, >1 faster.
var timeSpeed = 1;

// after launchAnimation is called, 
//  draw/handleInput/update will get called on each rAF
function launchAnimation() {
    requestAnimationFrame(_launchAnimation);
}

// ------------- Private methods ----------------

function _launchAnimation(now) {
    _lastTime = now;
    applicationTime = 0
    requestAnimationFrame(_animate);
}

// ----------------------------------------------
// Animation.
//   Use launchAnimate() to start the animation.
//     draw, handleInput, update will be called every frame.
// ----------------------------------------------
function _animate(now) {
    requestAnimationFrame(_animate);
    // _______________________
    var dt = now - _lastTime;
    if (dt < 12) return; // 60 HZ max
    if (dt > 200) dt = 16; // consider 1 frame elapse on tab-out 
    _lastTime = now;
    dt *= timeSpeed;
    applicationTime += dt;
    // _______________________
    handleInput(); // ...
    // update everything with this frame time step.
    update(dt);
    // draw everything    
    draw();
}
var _lastTime = 0;

((注意，为了最优雅地处理跳出操作，您必须处理模糊事件，取消 rAF，然后再次将其设置为焦点。))