javascript - 使图像过渡更平滑的推荐技术

Question

我正在制作幻灯片，我想包括涉及滑动和调整大小的平滑(亚像素)图像过渡，例如 Ken Burns 效果。

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

• CSS 转换
• JavaScript 需要动画框架
• 嵌入在 Canvas 元素中的图像
• 其他？

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

Answer 1

我认为 CSS 过渡可以很好地解决您想要的主要效果部分。

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

对于ken burns effect 可以通过在两张绝对位置的图片上做宽度的过渡来实现。

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

我还认为 canvas 不是最佳解决方案，因为 canvas 元素无法动态扩展而没有问题(特别是性能)。