Javascript 如何在以60 fps刷新的同时降低动画速度？

我一直在为动画和间隔/fps的概念而挣扎。我理解这个代码段中的代码是如何工作的，但我不明白如何在保持画布60 fps刷新率的同时降低动画的速度

$（文档）.ready（函数（）{
startAnimating（60）；
});
//全局变量
var间隔；
var；
var移位=0；
var frameWidth=107；
var frameHeight=140；
var canvasX=0；
var-canvasY=0；
var myImage=新图像（）；
var totalFrames=8；
var currentFrame=0；
//加载图像
myImage.src=”https://i.imgur.com/N3shTgD.png";
myImage.addEventListener（“加载”，loadImage，false）；
//函数以设置fps开始动画
功能启动激活（fps）
{
fps间隔=1000/fps；
然后=Date.now（）；
制作动画（）；
}
函数animate（）{
var now=Date.now（）；
var经过=现在-那时；
如果（已用>FPS间隔）
{
然后=现在-（已用%fps间隔）；
var cvs=$（“画布”）.get（0）；
var ctx=cvs.getContext（“2d”）；
//清晰的背景
ctx.clearRect（0，0，cvs.width，cvs.height）；
//绘制每个框架，并将其放置在画布中间
/*
绘图图像(
“图像对象”，
“X坐标png中的下一个精灵（精灵的位置？）”，
“Y coorinate下一个巴布亚新几内亚精灵”，
“png中雪碧的宽度（雪碧有多大？）”，
“png中精灵的高度”
“画布上的X坐标（在哪里绘制？）
“画布上的Y坐标”
“要使用的精灵宽度（您希望它看起来如何？）”
“要使用的精灵高度”
)
*/
//（sprite.png，0,0300,0,0300）
drawImage（myImage，shift，0，frameWidth，frameHeight，canvasX，canvasY，frameWidth，frameHeight）；
shift+=帧宽度+1；
}
如果（currentFrame==totalFrames）{
移位=0；
currentFrame=0；
}
currentFrame++；
请求动画帧（动画）；
}

对不起，没有画布支持！

60 FPS意味着每1000/60毫秒（约为16.7毫秒）更改一次帧。因此，如果您只有8帧（如您的示例中），整个循环将花费133.3毫秒。当然，这太快了。您可以通过两种方式减慢速度：

• 增加帧数。下面的示例使用45帧的精灵。动画看起来更平滑、更慢

//全局变量
var间隔；
var；
var移位=0；
var frameWidth=397；
var frameHeight=300；
var canvasX=0；
var-canvasY=0；
var myImage=新图像（）；
var totalFrames=45；
var currentFrame=0；
//加载图像
myImage.onload=函数（）{
startAnimating（60）；
};
myImage.src=”https://i.imgur.com/u6uPigf.png";
//函数以设置fps开始动画
功能启动激活（fps）{
fps间隔=1000/fps；
然后=Date.now（）；
制作动画（）；
}
函数animate（）{
var now=Date.now（）；
var经过=现在-那时；
如果（已用>FPS间隔）{
然后=现在-（已用%fps间隔）；
var cvs=$（“画布”）.get（0）；
var ctx=cvs.getContext（“2d”）；
//清晰的背景
ctx.clearRect（0，0，cvs.width，cvs.height）；
//绘制每个框架，并将其放置在画布中间
/*
绘图图像(
“图像对象”，
“X坐标png中的下一个精灵（精灵的位置？）”，
“Y coorinate下一个巴布亚新几内亚精灵”，
“png中雪碧的宽度（雪碧有多大？）”，
“png中精灵的高度”
“画布上的X坐标（在哪里绘制？）
“画布上的Y坐标”
“要使用的精灵宽度（您希望它看起来如何？）”
“要使用的精灵高度”
)
*/
drawImage（myImage，shift，0，frameWidth，frameHeight，canvasX，canvasY，frameWidth，frameHeight）；
shift+=帧宽度+1；
currentFrame++；
如果（currentFrame==totalFrames）{
移位=0；
currentFrame=0；
}
}
请求动画帧（动画）；
}

对不起，没有画布支持！

有一个简单的替代方案。您可以简单地通过添加超时来减慢动画，而不是更改所有精灵。有效地跳过绘制帧，以便按照您的速度而不是浏览器的帧绘制速度进行绘制

在这个示例中，我去掉了所有的积垢，并添加了一个速度变量。以毫秒为单位设置每个步骤要执行的步骤（每1/2秒500个步骤）。注意setTimeout（）调用

只是为了好玩，我还用setInterval运行了你的动画，因为我很好奇

选中此项：

//全局变量
var移位=0；
var frameWidth=107；
var frameHeight=140；
var myImage=新图像（）；
var totalFrames=8；
var currentFrame=0；
var left=document.getElementById（'left'）；
var leftCtx=left.getContext（“2d”）；
var right=document.getElementById（'right'）；
var rightcx=right.getContext（“2d”）；
//在ms中，so 500==每1/2秒1步
var-pace=250；
myImage.src=”https://i.imgur.com/N3shTgD.png";
设置间隔（右步、配速）；
requestAnimationFrame（leftStep）；
函数leftStep（）{
leftCtx.clearRect（0，0，left.width，left.height）；
drawImage（myImage，shift，0，frameWidth，frameHeight，0，0，frameWidth，frameHeight）；
shift+=帧宽度+1；
如果（shift==（帧宽*8）+8）{
移位=0；
}
设置超时（再次步左，速度）；
}
函数stepleftreach（）{
requestAnimationFrame（leftStep）；
}
函数rightStep（）{
rightCtx.clearRect（0，0，right.width，right.height）；
drawImage（myImage，shift，0，frameWidth，frameHeight，0，0，frameWidth，frameHeight）；
shift+=帧宽度+1；
如果（shift==（帧宽*8）+8）{
移位=0；
}
}

wooow现在一切都有意义了。非常感谢@我很高兴能帮上忙