并且我的意思是,大块的帧将执行超快,然后在块之间暂停一段时间(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); }
答案 0 :(得分:0)
只是一个想法(我还不能发表评论): 我发现在SO中使用与DOM元素id同名的变量(person1)可能会很混乱。因为使用此id创建了对象person1。