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

时间:2012-10-03 07:51:07

标签: javascript performance html5 animation

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

要求:

  1. 能够在没有用户互动的情况下启动动画
  2. 精确控制要显示的帧(例如,转到特定帧,或从第一帧开始,然后播放到第n帧)
  3. 能够缩放动画(以适应浏览器窗口)
  4. 能够以~30fps(90帧)播放至少3秒
  5. 支持分辨率至少为1280x720
  6. 从文件大小/性能的角度来看,将动画编码为视频文件会是最好的,但它不符合iOS上的1),并且很可能无法实现2)。

    我过去使用的解决方案是将帧作为一系列jpeg单独加载,并使用DOM中的图像元素或将帧绘制到画布来显示帧。这几乎满足了所有要求,并且它的工作原理相当不错,但加载速度非常慢。我只使用这种方法制作大约20-30帧的动画。你最终得到了很多http请求和大量数据。

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

    减少http请求数量的一种方法是将几个图像组合成一个精灵表,但是当单个帧为1280x720时,你很快会得到一个具有非常高分辨率的精灵表图像,我不这样做认为iOS会很好用。

    我还缺少其他方法吗?

1 个答案:

答案 0 :(得分:-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/