我一直在尝试给一个五帧精灵动画。我已经让它工作了,但是它通过帧的速度太快了,因为它只有五个帧。是否有一个选项,在帧之间创建一个轻微的延迟,这样动画看起来就不会那么仓促?
这是我用来动画精灵工作表的代码。
var canvas = document.querySelector("#openmind");
var context = canvas.getContext("2d");
//Loading Spritesheet
var myImage = new Image();
myImage.src = "img/sprites/foxsprite.png";
myImage.addEventListener("load", loadImage, false);
function loadImage(e) {
animate();
}
//Setting size details for frmae
var shift = 0;
var frameWidth = 44.2;
var frameHeight = 72;
var totalFrames = 5;
var currentFrame = 0;
function animate() {
context.clearRect(120, 25, 300, 300);
//draw each frame + place them in the middle
context.drawImage(myImage, shift, 0, frameWidth, frameHeight,
120, 25, frameWidth, frameHeight);
shift += frameWidth + 1;
/*
Start at the beginning once you've reached the
end of your sprite!
*/
if (currentFrame == totalFrames) {
shift = 0;
currentFrame = 0;
}
currentFrame++;
requestAnimationFrame(animate);
}
发布于 2017-02-20 04:13:13
使用计数器在更改帧之间诱导延迟。
var counter = 0;
然后在你的循环中:
if(counter == 10){
currentFrame++;
counter = 0;
} else {
counter++;
}
https://stackoverflow.com/questions/42344219
复制相似问题