劉文勝 陳首同

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

關鍵詞：網(wǎng)頁動畫;Flash;CreateJS;HTML5動畫

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

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

1 簡單GIF動畫

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

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

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

2 CSS動畫

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

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

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

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

3 簡單腳本語言動畫

JavaScript是一種解釋型運行為主的腳本編程語言，被廣泛地應用于Web前端開發(fā)中，它支持面向?qū)ο蟆⒚钍胶秃瘮?shù)式編程風格。JavaScript在1995年由Netscape公司首次設計實現(xiàn)。JavaScript的國際標準是ECMAScript。2015年發(fā)布了ECMAScript的第六版，通常被稱為ECMAScript 6 或者ES6。

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

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

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

4 Flash動畫與HTML5動畫

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

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

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

4.2 HTML5動畫。當前主流的網(wǎng)頁動畫技術是HTML5動畫。

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

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

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

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

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

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

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

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

結(jié)語：網(wǎng)頁動畫技術不斷推陳出新，應根據(jù)應用需求選擇合適的實現(xiàn)技術。Flash動畫曾產(chǎn)生了巨大的影響，但終將被HTML5動畫取代，相關專業(yè)的網(wǎng)頁動畫設計課程內(nèi)容都將隨之更新。

參考文獻：

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

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

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

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

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