使图像过渡更平滑的推荐技术
我正在构建一个幻灯片，我想包括涉及滑动和调整大小的平滑（子像素）图像过渡，例如 Ken Burns 效果。
我看到人们使用各种技术。我很想知道哪些方法被认为是当今最好的方法，以及这些是否只是都市神话，实际上没有带来任何改进：
- css 转换
- JavaScript requireanimationframe
- 图像嵌入画布元素中
- 其他？
注意：据我所知，旧版浏览器不支持其中一些技术。我的问题是针对最新版本（IE9、Firefox 5 等）。
I am building a slideshow, and I'd like to include smooth (subpixel) image transitions involving sliding and resizing, like for example a Ken Burns effect.
I see that people use various techniques. I'd be interested to know which ones are considered the best approach today, and if any of these are just urban myths that actually bring no improvement:
- css transitions
- JavaScript requireanimationframe
- image embedded in a canvas element
- other?
Note: I undertand that some of these techniques are not supported in older browsers. My question is for thwe most recent versions (IE9, Firefox 5, etc.).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为 CSS 过渡可以很好地满足您想要的效果的主要部分。
CSS 过渡设计用于在元素的两种状态之间平滑变化。
对于 kenburns 效果，例如，可以通过在绝对位置上的两张图片上进行宽度过渡来实现。
使用 Javascript 制作动画可能有点费力，如果您想在每一帧上操作 dom，那么性能可能会很差。
我还认为画布不是最好的解决方案，因为画布元素不能毫无问题地动态扩展（尤其是性能）。
I think CSS transitions could be a good answer to the major parts of the effects you want.
CSS transitions are designed for changing smoothly between two states of an element.
For ken burns effect It could be accomplish by doing transitions of width on two pictures that are on absolute position for example.
Using Javascript to animate can be a bit laborious and if you want to manipulate dom on each frame it can be heavy for performance.
I also think canvas is not the best solutions because canvas element is not dynamically scalable without problem (performance particulary).
请参阅以下关于Javascript 性能优化的帖子：
它概述了不同的性能涵盖 5 个广泛主题的技术：
最适用于平滑图像过渡的技术是第 1、3 和 4 节，特别是对浏览器 DOM 对象的指针引用的使用（因此您不必多次遍历 DOM）、批量应用 DOM 更改以及优化迭代效率。
然而，所有 5 个部分对于创建高度响应的 UI 都很有用
See the following post on Javascript Performance Optimizations:
It outlines different performance techniques across 5 broad subjects:
The ones that apply the most to smooth image transitions are in sections 1, 3 and 4, particularly the use of pointer references to browser DOM objects (so you dont have to traverse the DOM multiple times), applying DOM changes in batches, and optimizing the efficiency of your iterations.
However all 5 sections are useful for creating a highly responsive UI