javascript - 如何使用 JQuery 正确制作 Ken Burns 效果

Question

我最近用这个小 jQuery 插件尝试了 Ken Burns 效果:CrossSlide .

该插件的问题在于，当 Action 太慢时，它看起来真的很糟糕。这是由于图像此时只能移动1个像素...

我尝试制作自己的幻灯片，但遇到了完全相同的问题。然后我认为这是正常的......因为我们只能逐像素移动图像。

但我刚刚找到了这个 slider :Estro Estro 对我来说看起来很完美。我想知道为什么它看起来如此光滑，我怎样才能让我的看起来那么好。

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

Answer 1

在不深入研究每个代码的情况下，如果我正在创建它，我会使用 jQuery 的 animate() 函数。使用此功能，您可以通过确定图像移动的距离和速度来微调幻灯片。例如，这会在 2 秒内将您的图像向上和向左移动 50 像素:

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