加載和播放圖像序列作為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/