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

Question

我只想听听是否有人在播放包含hmtl5中图像序列的简短动画时采取哪种方法有建议。 浏览器支持的范围越广越好，它需要在iOS上运行。 可以假设使用画布。

要求：

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

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

我过去使用的解决方案是将帧分别作为一系列jpeg加载，并使用DOM中的图像元素或将帧绘制到画布上来显示帧。 这几乎可以满足所有要求，并且除了加载速度真的很慢之外，还算不错。 而且我只将这种方法用于约20-30帧的动画。 您最终会有许多http请求和大量数据。

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

减少http请求数量的一种方法是将多个图像组合成一个sprite工作表，但是当单个帧为1280x720时，您很快会得到一个具有非常高分辨率的sprite工作表图像，我认为这不会发挥作用适用于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/