用于更平滑图像过渡的推荐技术答案

【问题标题】：Recommended techniques for smoother image transitions用于更平滑图像过渡的推荐技术
【发布时间】：2011-06-27 05:05:38
【问题描述】：

我正在制作一个幻灯片，我想加入平滑（亚像素）图像过渡，包括滑动和调整大小，例如 Ken Burns 效果。

我看到人们使用各种技术。我很想知道哪些方法被认为是当今最好的方法，如果这些方法中的任何一个只是城市神话，实际上并没有带来任何改善：

注意：我知道其中一些技术在旧版浏览器中不受支持。我的问题是针对最新版本（IE9、Firefox 5 等）。

【问题讨论】：

【解决方案1】：

我认为 CSS 过渡可能是您想要的效果的主要部分的一个很好的答案。

CSS 过渡设计用于在元素的两种状态之间平滑切换。

对于kenburns效果，例如可以通过对绝对位置的两张图片进行宽度转换来实现。

使用 Javascript 制作动画可能有点费力，如果你想在每一帧上操作 dom，它可能会影响性能。

我也认为 canvas 不是最好的解决方案，因为 canvas 元素不能毫无问题地动态扩展（特别是性能）。

【讨论】：

【解决方案2】：

请参阅 Javascript Performance Optimizations 上的以下帖子：

它概述了 5 个广泛主题的不同表演技巧：

最适用于平滑图像过渡的是第 1、3 和 4 节，特别是使用指针引用浏览器 DOM 对象（因此您不必多次遍历 DOM），批量应用 DOM 更改，并优化迭代的效率。

然而，所有 5 个部分对于创建高度响应的 UI 都很有用

【讨论】：