Question

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

动画基本上是从画布左侧的屏幕外移动的图像，当它达到画布宽度的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

var now =
    ( typeof performance === 'object' && 'now' in performance )
    ? function() { return performance.now(); }
    : function() { return ( new Date ).getTime(); };

Answer 2

所以问题来自于你对performance.now的使用，现在并不总是如此，特别是在精确定时器功耗过高的移动设备上。只需使用requestAnimationFrame提供的时间：在准确的浏览器/设备上，它将使用亚毫秒精度，否则它将只有毫秒精度。
（准确= Chrome桌面肯定，......其他人???）

我将告诉你如何使用rAF的时间来构建自上一帧以来的当前'dt'=已用时间，'applicationTime'=应用程序中已经过的时间（不当你选中应用程序时计数。）

此方法的第二个好处是，您可以轻松地将应用程序速度更改为“子弹时间”或加速（如果速度<0，则甚至可以快退）。

小提琴在这里：

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，然后在焦点上再次设置它。）

HTML Canvas动画不会在移动设备上运行

2 个答案: