推荐的技术可实现更平滑的图像过渡

Question

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

我看到人们使用各种技巧。我有兴趣知道哪些被认为是今天最好的方法，如果其中任何一个只是城市神话，实际上没有带来改进：

• css transition
• JavaScript requireanimationframe
• 嵌入画布元素中的图像
• 其他？

注意：我承认旧浏览器不支持其中一些技术。我的问题是最近的版本（IE9，Firefox 5等）。

Answer 1

我认为CSS过渡可以很好地回答你想要的效果的主要部分。

CSS转换旨在在元素的两个状态之间平滑地进行更改。

对于ken burns效果可以通过在两张绝对位置的图片上进行宽度转换来实现。

使用Javascript进行动画处理可能有点费力，如果你想在每一帧上操作dom，那么它的性能会很高。

我还认为canvas不是最好的解决方案，因为canvas元素在没有问题的情况下不能动态扩展（性能特别）。

Answer 2

请参阅 Javascript Performance Optimizations ：

上的以下帖子

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

1. 避免与主机对象（DOM）的交互
2. 管理并积极减少您的依赖关系
3. 纪律事件约束
4. 最大限度地提高迭代效率
5. 与JavaScript词典成为朋友

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

但是，所有5个部分都可用于创建响应迅速的UI