2013-07-10 79 views
9

假設一個簡單的產品演示例如一對http://www.sublimetext.com/動畫gif vs視頻vs canvas - 速度和文件大小

即事發現這不是傳統的高分辨率視頻和可能是合理的成就與:

  • gif動畫
  • 視頻(可嵌入的YouTube,定製HTML5播放器,無論是最有競爭力)
  • 帆布

的問題是,它執行爲用戶提供更好的?雙方在以下方面:

  1. 用戶必須下載來查看「產品演示」
  2. 在處理能力方面,以顯示「產品演示」
要求的文件的大小

如果您覺得有一種卓越的技術來完成這個或另一個度量其有用性的指標,請告訴我們,我會相應地進行調整。

回答

10

我知道它已經回答了,但是當您特別提到Sublime Text動畫時,我假設您想要創建類似的東西?

如果這裏的話,那麼是一個文章,解釋它是如何被崇高文字作者,自己創造:

文章的有趣的部分是他如何降低文件大小 - 我相信這是你的問題。

+0

輝煌!感謝這一點。 – jon

+1

這裏是他製作的動畫,在github上託管 - 它似乎在積極開發:https://github.com/sublimehq/anim_encoder – jon

2

通過簡單的動畫,例如您所指的鏈接上的動畫,以非常低的幀速率,動畫GIF的簡單動畫PNG可能是最佳解決方案。

但是,您需要考慮帶寬因子。如果GIF或PNG的最終尺寸很大,那麼緩衝的視頻可能會更好。

這是因爲整個gif/png文件需要在顯示前下載(我不確定交錯PNG在包含動畫時是如何工作的)。

視頻文件大小可能較大,但由於它通常被緩衝,因此您可以幾乎立即顯示動畫。

使用外部主機(例如YouTube或其他人)可能對您的網站有所幫助,並且帶寬是從這些網站獲取的,而不是從您的服務器獲取的(如果您使用的服務提供商限制或爲此收取費用方法)。

有關動畫的PNG或APNG更多的信息(因爲這是不那麼衆所周知的):
https://en.wikipedia.org/wiki/APNG

在此畫布僅僅是一個顯示裝置,而不是真正必需的(一個圖像容器做同樣的工作,也可以動畫GIF/PNG,而畫布不能)。

如果使用了很多矢量,那麼可以考慮畫布。

CSS3動畫也是諸如演示幻燈片之類的選項。

+0

那麼,IE,Safari或Chrome不支持動畫PNG? – Seanonymous