網頁動畫技術發展與應用

劉文勝 陳首同

摘要：網頁中動畫的應用已被普遍接受，本文分析了各種動畫技術特點與發展狀況，給出了應用建議。隨著Flash逐步退出市場，HTML5動畫技術占據主流位置，學習HTML5相關技術與工具軟件成為趨勢。

關鍵詞：網頁動畫;Flash;CreateJS;HTML5動畫

中圖分類號：TP37?? 文獻標識碼：A?? 文章編號：1672-9129（2020）11-0162-02

互聯網時代下各種網站與網頁數量激增，如何增強網頁的表現效果是大家關注的焦點之一。在網頁中采用動畫技術成為普遍的做法。在動畫技術與動畫制作工具不斷推陳出新的當下，針對不同應用需求采用合適的技術實現網頁動畫值得分析，可避免走彎路和降低開發與維護成本。

1 簡單GIF動畫

GIF是Graphics Interchange Format（圖像交換格式）的縮寫，1987年由Compu Serve公司開發，得到各平臺的廣泛支持，俗稱動圖。GIF是一種位圖，圖片由許多的像素組成，最高支持256種顏色。

GIF簡單小巧，適合在網頁中作為動態的小圖標，添加動感效果，引導用戶的關注重點內容。其缺點是顏色不夠豐富，無法呈現高品質圖像，各幀間只有簡單的像素變換，難以實現復雜流暢的過渡特效。

GIF圖片制作簡單，Photoshop軟件就能完成，方法是選中窗口中動畫面板，新增幀，然后在各幀中調整各圖層的可見性及各部件的位置，設置幀間的間隔時間，輸出時選擇存儲為WEB和設備使用格式，存儲為GIF圖像即可。更專業些的GIF動畫制作軟件有Ulead Gif Animater。沒有安裝上述軟件時，登錄在線GIF制作網站也可完成素材上傳和動畫生成。

2 CSS動畫

CSS層疊樣式表（Cascading Style Sheets）是一種修飾網頁HTML標簽樣式的描述語言。CSS不僅可以靜態地修飾網頁，還可以配合腳本語言動態地對網頁元素進行格式化。CSS實現了網頁內容與網頁修飾的分離，讓維護工作更規范。

目前流行的是CSS3，其新特征有：圖片圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、定制字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄布局、媒體查詢等。

CSS3新增的功能中有盒子的變形屬性，該屬性在2D或3D空間里操作盒子的位置和形狀，來實現旋轉、扭曲、縮放或者移位。通過變形元素，web網頁的內容展示更加形象生動。新增的過渡與動畫屬性則可通過簡單的CSS設置就實現動畫效果，以前需要編寫大量的腳本代碼才能實現。transition過渡屬性通過設定某種元素在某段時間內的變化實現簡單的動畫效果。animation動畫屬性能夠實現復雜的樣式變化及交互效果。

隨著網絡帶寬的大幅提升，網頁風格也在向大幅面、大圖標、大圖片的方向發展。許多圖片酷炫的變形、過渡和動畫效果就是CSS3實現的。學習較簡單、易于模仿，不需要編寫復雜的腳本語句，這是CSS動畫技術的優點。

3 簡單腳本語言動畫

JavaScript是一種解釋型運行為主的腳本編程語言，被廣泛地應用于Web前端開發中，它支持面向對象、命令式和函數式編程風格。JavaScript在1995年由Netscape公司首次設計實現。JavaScript的國際標準是ECMAScript。2015年發布了ECMAScript的第六版，通常被稱為ECMAScript 6 或者ES6。

JavaScript編程入門簡單，容錯性強，用簡單的代碼即可實現鼠標移入移出更換圖片的效果，增強了網頁的交互性、動態性。通過設置定時器改變圖片的坐標或在畫布上繪制圖形可輕松制作出簡易動畫。

但要精通JavaScript并制作出復雜的網頁動畫并不容易，其代碼冗長、跟蹤調試困難、瀏覽器兼容性差等缺點都會成為障礙。解決的一個辦法是采用被大家廣泛接受的框架中的特效或插件，拿來即用，修改幾個參數或替換素材即可，不需要去讀懂其中的復雜源代碼。

jQuery是一個快速、簡潔的JavaScript框架，它的設計目標是寫地更少、做地更多，并且有良好的瀏覽器兼容性。jQuery UI 是以 jQuery為基礎的網頁用戶界面代碼庫，包含眾多用戶交互、動畫、特效和可更換主題的可視控件，應用它們可以提高簡單網頁動畫腳本開發的效率。Bootstrap框架中也包含了許多組件供使用，如輪播圖組件，其內部已包含大量的修飾樣式與控制腳本，用戶只需提供自己的圖片素材、選擇按鈕樣式和間隔時間，即可實現令人滿意的輪播動畫效果。

4 Flash動畫與HTML5動畫

4.1 Flash動畫。Flash動畫曾經在網頁中大量使用，最廣泛的應用就是用其制作的網頁廣告。許多的網頁游戲使用Flash制作，交互性很強。優秀的富有故事情節的Flash動畫片深受大家喜歡。Flash動畫最突出的特點就是矢量繪圖，矢量意味著即使動畫無限放大，也能夠保證畫面清晰。

Flash最初由喬納森蓋伊開發，實現了矢量繪圖，并且有時間軸，這些特性一直是Flash最突出的特點。1996年被Macromedia公司收購定名為Macromedia Flash。2005年Adobe公司收購Macromedia，改名為Adobe Flash。Flash動畫的擴展名為.swf，其播放時使用名為Flash Player的播放器或插件。Flash支持ActionScript腳本語言編程，AS3增加了面向對象的語言特性。2010年喬布斯宣布蘋果公司移動產品不支持Flash播放器，因其存在性能與安全問題。2017年，Adobe公司宣布放棄Flash Player產品。

Flash曾經是事實的網頁動畫標準，許多學校都開設了相關課程并學習其ActionScript腳本編程。當前形勢下，及時地更新教材和調整教學內容是大勢所趨。

4.2 HTML5動畫。當前主流的網頁動畫技術是HTML5動畫。

HTML超文本標記語言是網頁標準，最初版本在1993年制定。2014年10月，W3C組織推出HTML 5作為推薦標準。

HTML5動畫是眾多技術的組合，可以使用Canvas、CSS3、JavaScript、SVG等實現網頁動畫，其功能完善，幾乎可以實現所有的Flash動畫功能。

HTML5動畫在瀏覽器中運行不需要額外的插件。由瀏覽器本身支持的標簽和腳本語言來實現動畫，大大提高了動畫加載的速度，并且動畫的精確度高，運行高效率的同時保證了高可靠性和高安全性。HTML是開放的國際標準技術，使用免費。在手機等可移動設備上低功耗很重要，HTML5動畫可以實現更低功耗。

HTML5專業化程度高，涉及內容多，學習周期較長。學習HTML5、CSS3、JavaScript本身就需要花費較長時間，還要學習框架或相關技術的使用。

目前較為專業的HTML5動畫制作工具是Adobe Animate CC， Animate CC相比原Flash軟件，多了一種文件類型，即HTML5 canvas文件，可制作和輸出HTML5動畫，并盡量保持與原Flash動畫制作方式的兼容性。Animate CC可以使用時間軸、舞臺及各種工具來制作HTML5動畫，腳本語言支持JavaScript編寫。它會根據制作的內容，生成HTML文件和JS文件，可直接在瀏覽器中運行查看。

Animate CC要創建一個HTML5 動畫文件，選擇“文件”中的“新建”，選擇“HTML5 Canvas”選項即可創建。要添加交互性，選擇要添加 JavaScript腳本的幀，選擇“窗口”中的“動作”以打開動作面板，可在其中編寫代碼。選擇“窗口”中的“代碼片段”，選擇修改其中預先寫好的代碼片段便可實現交互功能。

CreateJS是一套可以開發 HTML5 動畫與游戲的開源工具包，包含大量的JavaScript類與函數，目的是降低 HTML5 項目的開發難度和成本。Animate CC軟件就是使用CreateJS庫構建和發布HTML5作品。CreateJS套件包括EaselJS、TweenJS、SoundJS、PreloadJS幾個模塊。其中，EaselJS 用于Sprites、動畫、向量和位圖的繪制，實現交互功能;TweenJS實現補間動畫的效果;SoundJS用于處理音頻;PreloadJS用于管理網頁資源的預加載工作。

要高效精準地控制動畫，可系統學習CreateJS庫，設計制作出個性化的效果。對于一般的需求，直接應用Animate CC軟件制作輸出，由軟件自動生成相應的腳本代碼即可。

結語：網頁動畫技術不斷推陳出新，應根據應用需求選擇合適的實現技術。Flash動畫曾產生了巨大的影響，但終將被HTML5動畫取代，相關專業的網頁動畫設計課程內容都將隨之更新。

參考文獻：

[1]居全偉. Flash動畫的現狀、問題及發展思路[D].東北師范大學，2007.

[2]趙劍. HTML5動畫引擎技術的研究與實現[D].北京郵電大學，2015.

[3]楊永平.網頁動畫的制作與研究[J].科技資訊，2007（11）：207.

[4]平淑文，潘玨羽，張學金，杜曉榮.基于HTML5和JavaScript輕量型動畫框架開發[J].計算機技術與發展，2013，23（12）：5-10.

作者簡介：劉文勝，男，出生：1971.1，漢族，籍貫（省市）：湖南省衡陽市，學位：碩士，職稱：講師，研究方向：計算機應用技術。