我最近使用这个小jQuery插件尝试了Ken Burns效果：CrossSlide。
该插件的问题在于，当动作太慢时，它看起来非常糟糕。这是因为图像当时只能移动1个像素......
我尝试自己制作幻灯片，但问题完全相同。然后我认为这是正常的......因为我们只能逐像素地移动图像。
但我刚发现这个滑块：Estro Estro看起来很完美。我想知道为什么它看起来如此顺利，我怎么能让我看起来那么好。
我的Ken Burns效果如何与Estro的效果一样好。
答案 0 :(得分：2)
如果我没有深入研究每个代码，我会使用jQuery的animate（）函数。使用此功能，您可以通过确定图像移动的距离和速度来微调幻灯片。例如，这会在2秒内将图像向上和向左移动50px：
$(".slideshow_image").animate({
'left': '-=50px',
'top': '-=50px',
'opacity': 0
}, 2000);
答案 1 :(得分：2)
使用HTML5 Canvas的JS代码： http://www.willmcgugan.com/blog/tech/2011/2/26/ken-burns-effect-with-javascript-and-canvas/
答案 2 :(得分：0)
我知道这是一个相对较老的帖子，但我想我会反思它，因为我正在寻找相同的答案.. 感谢Estro滑动链接，它确实非常流畅，我想我刚刚发现它们是如何做到的：在图像标记之上，它们创建了一个HTML5画布，可以让你进行基本的2D转换 - 比如动态调整大小。
这样您就不必担心只能处理完整像素这一事实。它也可以在没有画布的情况下工作，但不能使用' - = 50'型动画，而是缩放。
以KenBurner为例。
我希望它可以帮助你们中的一些人..