0

我在较低的画布上使用它：

var requestAnimFrame =  window.requestAnimationFrame || 
                        window.webkitRequestAnimationFrame || 
                        window.mozRequestAnimationFrame || 
                        window.msRequestAnimationFrame  ||  
                        window.oRequestAnimationFrame   || 
                        function(callback) {
                        window.setTimeout(callback, 1000/60);
                        };

我将它用于位于较低层之上的画布层：

function DrawSpawnAnimation() {


    anim();
}

 function anim() {

        ctxAnimation.drawImage(spriteSheet, ExplodeFrame * 100, 2740,100,100,explodeX,explodeY,100,100);

        if (ExplodeFrame < 5) {
            ExplodeFrame++;
            setTimeout(anim, 500);

        } 

      //alert("Show current frame of animation"); - this shows the animation works, it just does 
      // not show it one frame per half second.
    }

我的问题是动画在屏幕上以毫秒为单位闪烁。较低的画布刷新是否搞砸了？

4

1 回答 1

0

以下是如何使用 1 个 RAF 代码为 2 个画布设置动画。

RAF 代码每秒将触发 60 次。

顶部画布将以每秒 30 倍的速度进行动画处理（当 TopFrameCount 降至 0 时，每 2 帧）。

底部画布每秒动画 2 次（当 BottomFrameCount 降至 0 时每 30 帧）

var RAFfps = 60;

var TopFPS=30;
var BottomFPS=2;

var TopFrameCount=(RAFfps/TopFPS)-1;
var BottomFrameCount=(RAFfps/BottomFPS)-1;


var counter2fps=0;

function draw() {
    setTimeout(function() {

        requestAnimFrame(draw);

        // if the top canvas counter has expired, 
        // animate the top canvas
        if(--TopFrameCount<=0){

            // put top canvas drawing stuff here

            // reset the top counter
            TopFrameCount==(RAFfps/TopFPS)-1;
        }

        // if the bottom canvas counter has expired, 
        // animate the bottom canvas
        if(--BottomFrameCount<=0){

            // put bottom canvas drawing stuff here

            // reset the top counter
            BottomFrameCount=(RAFfps/BottomFPS)-1;
        }

    }, 1000 / fps);
}
于 2013-07-04T23:30:43.437 回答