網(wǎng)頁動畫技術(shù)發(fā)展與應(yīng)用

劉文勝 陳首同

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

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

中圖分類號：TP37?? 文獻(xiàn)標(biāo)識碼：A?? 文章編號：1672-9129（2020）11-0162-02

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

1 簡單GIF動畫

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

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

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

2 CSS動畫

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

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

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

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

3 簡單腳本語言動畫

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

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

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

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

4 Flash動畫與HTML5動畫

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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

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