前言

從前從前...神說要有...咳咳，好吧這樣的開場白太過老梗。介紹完基礎的動畫法則後，我們來聊聊網頁動畫歷史吧～

GIF 圖像互換格式

1987年一家網頁服務公司 CompuServe 老闆找來了工程師指著網頁瀏覽器，並說「對不起，但我真的想要那個酷東西」。

於是，第一個可以在瀏覽器上動起來的圖片就這麼誕生啦！

Graphics Interchange Format 圖像互換格式，簡稱 GIF，是一種點陣圖圖形格式，目前在網際網域上仍是最廣泛運用的傳輸圖像格式之一。

GIF 透過8位元運算能夠在網頁上重現真實色彩。它透過了 LZW 壓縮演算法 壓縮過後成為一種圖片格式檔，這樣的編碼方式大大的減少在網路上傳輸的時間。

因此，即便我們不需要任何程式技術，也可以輕鬆地在你想要的網站上放上 GIF 檔案，讓網頁幫你渲染出酷酷的動畫。

Flash

而過了將近 20 年的時間，Flash 終於被發明出來。在 Flash 被發明出來之後，其技術被大量的運用在各個網頁動畫、應用程式、遊戲，在網頁技術上風靡了好一段時間。

Flash Video ，簡稱 Flash，是一種網路影片格式，它通常是被包覆在 SWF Player 的殼內，因此它可以妥善地保存影片原始位置，不容易被隨意下載，以達到保護著作權的功用。

然而，隨著行動裝置的發明，裝置無法在處理 Flash 檔案大量的 CPU 耗能問題以及資安問題，因此在 2010 年，蘋果公司 創辦人 史蒂夫・賈伯斯 曾公開抨擊過 Flash，並大力推薦 HTML5 技術。

《對於 Flash 一些想法》公開信

在 蘋果公司 與 Flash 公司 Adobe 經過一番激烈的廝殺後，蘋果公司迎來了勝利，開發人員開始漸漸棄用透過 Flash 來製作動畫與遊戲。

不過即使 Flash 被淘汰過後，為了順應 HTML5 時代，Adobe 仍然有推出 Adobe Animate 來配合網頁動畫製作，讓網頁設計師能更快速的製作網頁動畫。

HTML5

在 Flash 漸漸被淘汰掉的同時，HTML也悄悄的崛起。兩者皆包含了在網頁中播放影片音訊功能，且都可以集成矢量圖。

特別要注意的是這邊所提到的 HTML5 並不僅僅局限於 HTML5 規範，而是指 HTML5 及 其相關技術，利如 CSS3 或 JavaScript，在近幾年的網頁技術中 ， 我們可以透過這些相關技術做到許多大型複雜的網頁動畫。

在開發上，使用 CSS、HTML 以及 JavaScript 的開發環境相比 使用 Adobe 工具架構 Flash 環境門檻相對低許多。

另外，HTML5 並不包含任何的 DRM(數字版權管理) 功能，而是使用 EME(加密媒體擴充) 方式來規範版權管理問題。

其他網頁動畫套件

即便現在 HTML5 搭配著 CSS3 以及 JavaScript 便可以完成大部分需求的網頁動畫，不過上述這幾種技術仍然有它達不到的效果，因此網頁動畫套件也紛紛推陳出新，舉例來說：GreenSock、Three.js，讓網頁工程師能快速簡便地做出具有現代感且漂亮強大的網頁動畫。

未來在系列文章中，我們會稍微提到 Three.js 的基本介紹。

俗話說「知己知彼、百戰百勝」，當你了解你的敵人，你就不再恐懼他。
相信介紹到這邊，各位就像追求心儀的對象一般，都已經非常了解網頁動畫了吧？
那麼接下來的文章會有大量的語法介紹與實作，讓我們一起慢慢打怪升等撿裝備吧～

參考資料

• The History of Web Animation.
  
• GIF
• Flash Video
• Adobe Animate