Question

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

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

我的问题是动画在屏幕上只有一毫秒闪烁。下部画布刷新了吗？

Answer 1

以下是如何使用1张RAF自动收录器为2幅画布制作动画。

英国皇家空军的自动收报机将每秒发射60次。

顶部画布将以每秒30x的速度动画（当TopFrameCount降至0时，每隔2帧）。

底部画布将以每秒2x的速度动画（当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);
}

帧刷新冲突超时和requestAnimationFrame

1 个答案: