Javascript 如何使用JQuery正确创建Ken Burns效果

我最近用这个小jQuery插件尝试了Ken Burns的效果：

这个插件的问题是，当运动太慢时，它看起来非常糟糕。这是因为图像一次只能移动1个像素

我试图做我自己的幻灯片，我有完全相同的问题。然后我认为这是正常的。。。因为我们只能逐像素移动图像

但我刚刚找到了这个滑块： 埃斯特罗看起来很完美。我想知道为什么它看起来这么光滑，我怎么能让我的看起来那么好

---

我的Ken Burns效果怎么能和Estro的效果一样好呢。

如果我要创建它，我会使用jQuery的animate（）函数。使用此功能，您可以通过确定图像移动的距离和速度来微调幻灯片。例如，这将在2秒内将图像向上和向左移动50px：

$(".slideshow_image").animate({
    'left':     '-=50px',
    'top':      '-=50px',
    'opacity':  0
}, 2000);

---

我知道这是一篇比较老的帖子，但我想我会反思一下，因为我在寻找同样的答案。。 感谢Estro滑块链接，它确实非常平滑，我想我刚刚了解了他们是如何做到的：在图像标签的顶部，他们创建了一个HTML5画布，让你可以进行基本的2D转换，比如动态调整大小

这样，您就不必担心只能处理完整像素的事实。它也可以在没有画布的情况下工作，但不使用“-=50”类型的动画，而是缩放

举一个例子来看看

---

我希望它能帮助你们中的一些人。

使用HTML5画布的JS代码：

---

感谢您的代码，要添加更多信息，图像需要绝对定位，您可能需要添加一个容器框，以便看起来更好@ssh这张图片需要绝对定位：除非您使用margin；）这并不能回答问题，这个链接已经不起作用了，链接到一个商业项目，-1…感谢@jpoppe对一个4年前的答案发表评论。很抱歉，链接在此期间被关闭，请查找存档。我希望这能有所帮助，尽管它并没有回答这个问题。为了恭维你的评论，我在这方面做了更多的挖掘，并回答了OP关于“我的Ken Burns效果如何能像Estro的一样好”的问题，对Ken Burns插件的原始版本。再一次，我希望这能帮助一些人，而不是试图恢复一个古老的职位。