在 html5 中加载和播放图像序列作为动画的最佳方法？

Question

我只是想听听是否有人对在播放由 hmtl5 中的图像序列组成的短动画时采用哪种方法有任何建议。浏览器支持的范围越广越好，它需要适用于 iOS。可以假设画布。

要求：

1. 无需用户交互即可启动动画
2. 精确控制要显示的帧（例如，转到特定帧，或从第一帧开始播放到第 n 帧）
3. 能够缩放动画（以适应浏览器窗口）
4. 能够以 ~30fps（90 帧）播放至少 3 秒
5. 支持至少 1280x720 的分辨率

从文件大小/性能的角度来看，将动画编码为视频文件是最好的，但它在 iOS 上不满足 1)，并且很可能无法满足 2)。

我过去使用的解决方案是将帧单独加载为一系列 jpeg，并使用 DOM 中的图像元素或将帧绘制到画布上来显示帧。这几乎满足了所有要求，并且运行良好，只是加载速度很慢。而且我只对大约 20-30 帧的动画使用了这种方法。您最终会收到大量 http 请求和大量数据。

对于某些动画，包含大量运动模糊的帧以较低分辨率保存，然后在显示时被拉伸以匹配全分辨率帧。这样可以节省一些文件大小，而且并不那么明显。

减少 http 请求量的一种方法是将多个图像组合成一个精灵表，但是当单个帧为 1280x720 时，您很快就会得到一个分辨率非常高的精灵表图像，我不知道think 会在 iOS 上玩得很好。

我在这里还缺少其他方法吗？

Answer 1

您可以使用 CSS3 关键帧动画并随时控制动画。

@keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}


#sun.animate {
    animation-name: sunrise;
    animation-duration: 10s;
    animation-timing-function: ease;
}

您还需要添加供应商前缀，但我只会使用modernizr 来支持后备。

http://www.impressivewebs.com/demo-files/css3-animated-scene/