Javascript 使基于画布滚动的图像序列动画更平滑

我想要一个带有图像序列的基于滚动的动画 像这样：

这个动画看起来很流畅

我试过用这把小提琴

var images=newarray（）；
var currentLocation=0；
var totalImages=200；
对于（变量i=1；i=（totalImages-1））currentLocation=（totalImages-1）；
console.log（“当前位置”+当前位置）；
//有关此功能的详细信息，请参见下文
setImage（当前位置）；
});
}
var setImage=函数（新位置）{
//drawImage有5个参数：image、x、y、width和height
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.drawImage（图像[newLocation]，0,0,1000,1000）；
}
图像[0]。onload=函数（）{
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.drawImage（图像[currentLocation]，0,0,1000,1000）；
鼠标轮（）；
};
之所以发生这种情况，是因为控制盘事件的触发频率可能非常高，高于屏幕刷新率。

这意味着，对于绘制到屏幕上的每个帧，您实际上在画布上绘制了多个帧。浏览器在处理所有这些请求时会出现一些问题，最终会造成延迟

为了避免这种情况，您可以限制您的事件：有条件地执行回调，前提是回调已超过某个预定义的时间，但它尚未触发

在处理视觉动画时，这种限制时间的一个很好的基础是屏幕刷新。我们有一个计时方法可以做到这一点：


var images=newarray（）；
var currentLocation=0；
var totalImages=200；
对于（变量i=1；i=（totalImages-1））currentLocation=（totalImages-1）；
setImage（当前位置）；
evt=null；//这样节流器知道我们可以再次启动
}
}
var setImage=函数（新位置）{
如果（！images[newLocation]）返回；
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.drawImage（图像[newLocation]，0,0,1000,1000）；
}
图像[0]。onload=function（）{
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.drawImage（图像[currentLocation]，0,0,1000,1000）；
鼠标轮（）；
};
我有一个自由滚动的logitech鼠标。当我将它设置为自由滚动模式时，它非常平滑。非常好的动画和模型。需要渲染的卷轴之间的步骤需要一些插值。此解决方案看起来更好，但该网站有一个效果我不知道如何访问。拖尾效果，当鼠标停止滚动时，它不会停止渲染immediately@Deryckxie这有你想要的例子。