如何在 javascript 中减慢我的 spritesheet 动画？
Posted
技术标签:
【中文标题】如何在 javascript 中减慢我的 spritesheet 动画？【英文标题】：How can i slow down my spritesheet animation in javascript? 【发布时间】：2016-06-24 06:43:13 【问题描述】：我做了一个简单的 spritesheet 动画，但是太快了。由于某种原因，它也在闪烁。 我的代码：
<!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" >
</canvas>
</body>
</html>
有没有办法解决这个问题？
【问题讨论】：
requestAnimationFrame 以监视器刷新速度运行（或尝试运行）回调。控制动画速度的标准解决方案是将值更改绑定到时间，而不是屏幕更新。
@VallyN 但是我该怎么做呢？我已经尝试过 setInterval 和 setTimeout 之类的方法，但到目前为止我还没有让它们工作。
不不不。只是让计数增长不像现在那么快。将count++ 替换为count+=.1 并亲自查看。
@VallyN 我用 count+=.1 替换了 count++，但现在我的 spritesheet 只是从右向左滚动了一段时间，然后就消失了。很奇怪。它现在也一直在闪烁。
行x = (count % 16) * 450：将16乘以450并与宽度进行比较。
【参考方案1】：
基本上，您需要限制动画帧速率。
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 用于跟踪当前帧显示的时间。
闪烁问题可能与精灵表中缺少精灵有关。
【讨论】：
【参考方案2】：您可以使用 SpriteAnimJS 完成上述操作，它可以配置为使用 WebGL 和画布作为后备。
要使用它运行 spritesheet，根据它的演示：
var mySpriteAnimation = new SpriteAnim(canvasIdHere,useOnlyCanvasBoolean)
mySpriteAnimation.start(
frameWidth: 100,
frameHeight: 100,
image: image_element, // must be preloaded
fps: 10,
className: 'class_name',
loop: true,
onStart: function() ,
onComplete: function()
);
正如您在设置中看到的，您可以轻松设置 FPS，无需自己计算。
库+演示here
【讨论】：
以上是关于如何在 javascript 中减慢我的 spritesheet 动画？的主要内容，如果未能解决你的问题，请参考以下文章