Question

并且我的意思是，大块的帧将执行超快，然后在块之间暂停一段时间（4-6k毫秒）

它明确定义为每隔42ms一次。相反，在第一次调用之后，有一个暂停，然后5-6次迭代突然出现（你可以看到记录）。当它经历迭代时，它会正确地通过精灵表，迭代不会每次每42毫秒发生一次。

仅测试铬，因为我稍后会将其插入Electron。但首先我必须弄清楚这一点。

这是js，只有html是 <canvas id="person1"></canvas>

var people = [];

    var p1_canvas = document.getElementById("person1");
    p1_canvas.width = 321;
    p1_canvas.height = 571;

    var p1_img = new Image();
    p1_img.src = "person1.png";

    var person1 = {x:0,y:0,f:1,max_x:3852-321,max_y:55958-571,canvas:p1_canvas,img:p1_img,width:321,height:571,name:"person1",playing:false};
    people[person1.name] = person1;

    function talk(person){
        if(!person.playing){return;}

        if(person.x == person.max_x){ //next row or at end 3852/12=321
            if(person.y == person.max_y){ //at end 55958/98=571
                person.x=0; person.y=0; person.f=0;
            } else { //next row
                person.x=0; person.y+=571;
            }
        } else { //same row, move 321 to the right
            person.x+=321;
        }

        console.log("frame: "+person.f+" coords:"+person.x+","+person.y); person.f++;
        //clear old frame and move to x,y
        var context = person.canvas.getContext("2d");

        context.clearRect(0,0,person.width,person.height);

        context.drawImage(person.img,person.x,person.y,person.width,person.height,0,0,person.width,person.height);

    }

    function play(person){ person.playing = true; person.interval = window.setInterval(function(){talk(person1);},42); }
    function stop(person){ person.playing = false; window.clearInterval(person.interval); }

Answer 1

只是一个想法（我还不能发表评论）：我发现在SO中使用与DOM元素id同名的变量（person1）可能会很混乱。因为使用此id创建了对象person1。

画布动画奇怪地表现得像一个阶梯函数

1 个答案: