我制作了一个简单的 Sprite 表动画，但它太快了。由于某种原因它也会闪烁。
我的代码:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="raf.js"></script>
<script>
var ctx;
var count = 0;
var x;
var y;
var img = new Image();
img.src = "images/character.png";
img.onload = draw;
function draw() {
requestAnimationFrame(draw)
ctx.clearRect(0,0,450,586);
x = (count % 16) * 450;
y = Math.floor(count / 16) * 586;
ctx.drawImage(img, x, y, 450, 586, 0, 0, 450, 586);
if(count == 16){
count = 0;
} else {
count++;
}
}
function init() {
ctx = document.getElementById("canvas").getContext("2d");
}
</script>
</head>
<body onload = "init()">
<canvas id="canvas" width="800" height="600">
</canvas>
</body>
</html>
有什么办法可以解决这个问题吗？
最佳答案
基本上，您需要限制动画帧速率。
var ctx;
var count = 0;
var x;
var y;
var img = new Image();
img.src = "images/character.png";
img.onload = draw;
var time = Date.now();
var delay = 100;
function draw() {
requestAnimationFrame(draw)
ctx.clearRect(0,0,450,586);
x = (count % 16) * 450;
y = Math.floor(count / 16) * 586;
ctx.drawImage(img, x, y, 450, 586, 0, 0, 450, 586);
if(Date.now() - time >= delay){
if(count == 16){
count = 0;
} else {
count++;
}
if ((Date.now() - time - delay) > delay){
time = Date.now();
} else {
time += delay;
}
}
}
function init() {
ctx = document.getElementById("canvas").getContext("2d");
}
delay 是以毫秒为单位的帧延迟(例如 100，表示 ~10 fps)，time 用于跟踪当前帧显示的时间。
闪烁问题可能与 Sprite 表中缺少 Sprite 有关。
关于javascript - 如何在 javascript 中减慢 spritesheet 动画的速度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35899252/