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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8350448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 03:09:54  来源:igfitidea点击:

How to properly make a Ken Burns effect using JQuery

javascriptjquery

提问by Jean-Philippe Leclerc

I recently tried the Ken Burns effect with this little jQuery plugin: CrossSlide.

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

The problem with that plugin is that when the motion is too slow it looks really bad. This is due to the fact that the image can only move 1 pixel at the time...

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

I tried to do my own slideshow and I have the exact same problem. I then thought that this is normal... since we can only move an image pixel by pixel.

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

But I just found this slider: EstroEstro looks perfect to me. I wonder why it looks so smooth and how can I make mine look that good.

但我刚刚发现了这个滑块:EstroEstro 对我来说看起来很完美。我想知道为什么它看起来如此光滑,我怎样才能让我的看起来那么好。

How can my Ken Burns effect be as good as Estro's one.

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

回答by Justin Lucas

Without diving into the code for each one, if I were creating this I would use jQuery's animate() function. Using this function you can fine tune your slideshow by determining the distance and speed of the images' movement. For example this would move your image 50px to the up and to the left in 2 seconds:

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

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

回答by army

I know it's a relatively old post, but I thought I'd reflect on it as I'm looking for the same answer.. Thanks for the Estro slider link, it's very smooth indeed, and I think I just found out how they do it: on top of the image tag they create an HTML5 canvas that lets you do basic 2D transformations - like dynamic resizing.

我知道这是一篇相对较旧的帖子,但我想我会反思它,因为我正在寻找相同的答案。它:在图像标签之上,他们创建了一个 HTML5 画布,让您可以进行基本的 2D 转换——比如动态调整大小。

This way you don't need to worry about the fact that you can only handle full pixels. Also it might work without a canvas, but not using '-=50'-type animations, but scaling.

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

Have a look at KenBurneras an example.

KenBurner为例。

I hope it helps some of you out there..

我希望它可以帮助你们中的一些人..