徐曉

（無錫機(jī)電高等職業(yè)技術(shù)學(xué)校，無錫214028）

0 引言

Flash 曾經(jīng)是用戶欣賞視頻短片、玩在線游戲時(shí)經(jīng)常使用的播放技術(shù)之一，也是復(fù)雜動(dòng)畫效果的領(lǐng)導(dǎo)者。但是在可靠性、安全性、性能方面存在問題而飽受質(zhì)疑。隨著時(shí)代的發(fā)展，JavaScript 等工具將替代Flash，成為了制作動(dòng)畫的另一個(gè)制作工具。螳螂捕蟬黃雀在后，進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代之后，HTML5+CSS3 替代JavaScript 作為主要制作工具來實(shí)現(xiàn)常見的動(dòng)畫效果。它是可以真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。前端設(shè)計(jì)師們都知曉CSS3 提供了很多新的特性，包括2D、3D 動(dòng)畫特性。CSS3 的出現(xiàn)可以使網(wǎng)頁增加很多動(dòng)畫元素，讓網(wǎng)頁效果變得非常生動(dòng)有趣且更加易于交互。在CSS3 中除了引入動(dòng)畫、濾鏡特效和新的布局技術(shù)以外，在選擇器方面也有所增加，以往在JavaScript 才能完成的工作，現(xiàn)在用CSS3 技術(shù)也可以達(dá)到效果。本文分享一個(gè)非常炫酷的用CSS 技術(shù)模擬萬有引力定律的蘋果樹動(dòng)畫案例。把真實(shí)的項(xiàng)目引進(jìn)課堂，就會(huì)激發(fā)學(xué)生的學(xué)習(xí)興趣，它炫酷的效果可以給學(xué)生帶來非常好的體驗(yàn)，也更加能吸引學(xué)生學(xué)習(xí)。然而CSS3 動(dòng)畫毫不疑問也不是萬能的，由于它特有的一些局限性，不可能百分百實(shí)現(xiàn)全部的動(dòng)畫效果。但是CSS3 代碼簡單、高效等優(yōu)勢讓設(shè)計(jì)師愛不釋手，它將會(huì)成為未來Web 動(dòng)畫的主流。

1 動(dòng)畫技術(shù)的比較

Flash 的優(yōu)點(diǎn)是制作很多復(fù)雜的動(dòng)畫的話，還是用Flash 制作相對要簡單一些，使用代碼也很少，但它要安裝Flash Player 播放器。JS 動(dòng)畫的優(yōu)點(diǎn)在于動(dòng)畫效果豐富和動(dòng)畫控制能力較好，對動(dòng)畫過程中的開始、暫停、回放、中止、取消等都可以很好地進(jìn)行控制。JS 動(dòng)畫的代碼復(fù)雜度較高。CSS3 動(dòng)畫的優(yōu)點(diǎn)是代碼比較簡單且瀏覽器會(huì)對CSS3 的動(dòng)畫做一些優(yōu)化導(dǎo)致動(dòng)畫流暢。在交互效果少的時(shí)候，CSS3 是制作動(dòng)畫效果比較好的選擇。CSS3 動(dòng)畫還有一個(gè)優(yōu)勢就是在移動(dòng)端設(shè)備上縮放矢量圖形的效果比其他同行動(dòng)畫要好。對于各種動(dòng)畫和特效，強(qiáng)大的CSS3 都可以創(chuàng)建，因而網(wǎng)頁中的圖片，F(xiàn)lash 動(dòng)畫以及JavaScript 都被它取代。

2 案例教學(xué)法

案例教學(xué)法是一種以案例為基礎(chǔ)的教學(xué)法（casebased teaching），它是一種通過模擬或者重現(xiàn)現(xiàn)實(shí)生活中的一些場景，讓學(xué)生把自己納入案例場景，通過討論或者研討來進(jìn)行學(xué)習(xí)的一種教學(xué)方法。本文采用學(xué)生感興趣的牛頓與蘋果樹案例，模擬一位男孩坐在蘋果樹下，一個(gè)熟透了的蘋果落下來，這個(gè)蘋果不偏不倚，正好打在他頭上的場景。該案例的引入不僅能夠吸引學(xué)生的注意，而且還能極大地調(diào)動(dòng)了學(xué)生的學(xué)習(xí)興趣。教師在這個(gè)案例中會(huì)積極的引導(dǎo)學(xué)生掌握兩個(gè)技術(shù)要點(diǎn)。

3 模擬萬有引力定律蘋果樹動(dòng)畫的技術(shù)要點(diǎn)

模擬萬有引力定律的蘋果樹動(dòng)畫在過去我們只能用Flash 或JavaScript 來實(shí)現(xiàn)，現(xiàn)在CSS3 的出現(xiàn)可以讓網(wǎng)頁中的動(dòng)畫不再只依賴于Flash 和JavaScript，也不再依賴于其他編程技術(shù)。完全可以使用CSS3 中新增的模塊來實(shí)現(xiàn)動(dòng)畫，一段簡單的CSS3 代碼就能輕而易舉的實(shí)現(xiàn)動(dòng)畫效果。本文案例就是HTML5+CSS3 技術(shù)來實(shí)現(xiàn)模擬萬有引力定律的蘋果樹動(dòng)畫（見圖1）。這個(gè)案例涉及到CSS 精靈技術(shù)和CSS 動(dòng)畫兩個(gè)技術(shù)要點(diǎn)。

圖1 蘋果樹動(dòng)畫

3.1 CSS精靈技術(shù)

過去由于網(wǎng)速的原因，許多網(wǎng)頁設(shè)計(jì)師熱衷于把網(wǎng)頁中的圖片字節(jié)數(shù)限制的很小，因而在一個(gè)圖片文件夾里存放著許多小圖片，網(wǎng)頁中每顯示一張圖片用戶端都要向服務(wù)器發(fā)送一次請求，圖片越多向服務(wù)器請求次數(shù)就越多，這樣就會(huì)影響圖片加載延遲，影響用戶體驗(yàn)效果。隨著Internet 技術(shù)的迅猛發(fā)展，用戶越來越關(guān)心網(wǎng)頁的加載速度，為了減少服務(wù)期請求數(shù)，CSS Sprites 技術(shù)出現(xiàn)了。

CSS Sprites 就是CSS 精靈。它又稱為“CSS 圖像拼合”或“CSS 貼圖定位”。它就是將許多張小圖片融合到一張圖片里面，然后通過CSS background 背景定位技術(shù)只顯示整張圖片中我們需要的部分。這種CSS Sprites 技術(shù)的好處是非常明顯的，它減少了HTTP 向服務(wù)器請求的次數(shù)，提升了網(wǎng)站性能。

本例首先準(zhǔn)備了一張精靈圖（見圖2），它是由六個(gè)形狀各異的蘋果小圖用PS 軟件的拼合。用PS 拼合圖片需要大量的實(shí)踐就可掌握一定的技巧。本文創(chuàng)建了一個(gè)span 容器標(biāo)簽來加載精靈圖片。再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，將精靈圖中的某個(gè)小蘋果顯示到網(wǎng)頁的固定位置（見圖3）。

圖2 精靈圖

圖3 蘋果定位

3.2 CSS3動(dòng)畫技術(shù)

CSS3 動(dòng)畫（Animation）概括來說就是在一定的動(dòng)畫時(shí)間內(nèi)暗中在某一頻率內(nèi)改變其CSS 某個(gè)或某些值，能夠達(dá)到視覺上的轉(zhuǎn)換動(dòng)畫效果。Animations 在動(dòng)畫開始值和結(jié)束值、運(yùn)行時(shí)間、動(dòng)畫的暫停和延遲其開始時(shí)間等很多方面都是可以控制的。transition 過渡效果也可以算作一種動(dòng)畫，它是通過初始和結(jié)束兩個(gè)狀態(tài)之間的平滑過渡實(shí)現(xiàn)簡單動(dòng)畫的，這種動(dòng)畫是單次的不重復(fù)的。而animation 則是通過關(guān)鍵幀@keyframes來實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫效果。animation 是按照@keyframes 的定義去執(zhí)行動(dòng)畫的，而transition 是以狀態(tài)的改變觸發(fā)的，有一定的局限性。CSS3 提供了類似Flash關(guān)鍵幀控制的動(dòng)畫效果，通過animation 屬性實(shí)現(xiàn)。animation 實(shí)現(xiàn)動(dòng)畫效果主要由兩個(gè)部分組成：一是通過類似Flash 動(dòng)畫中的關(guān)鍵幀聲明一個(gè)動(dòng)畫。二是在animation 屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫。

（1）animation 屬性

在CSS3 中，使用animation 屬性來實(shí)現(xiàn)動(dòng)畫與元素的關(guān)聯(lián)，并由animation 相關(guān)的屬性來控制動(dòng)畫的整個(gè)播放過程。CSS3 提供的animation 是一個(gè)復(fù)合屬性，可分解為表1 所示的8 個(gè)獨(dú)立屬性，本例中蘋果晃動(dòng)的動(dòng)畫，動(dòng)畫名稱為shake，每個(gè)蘋果動(dòng)畫持續(xù)時(shí)間各不相同，時(shí)間函數(shù)為ease-in-out，循環(huán)次數(shù)為無限次，其余屬性為默認(rèn)值。

表1 animation 屬性

（2）@keyframes 規(guī)則

在CSS3 中使用@keyframes 規(guī)則來創(chuàng)建動(dòng)畫，keyframes 可以設(shè)置多個(gè)關(guān)鍵幀，每個(gè)關(guān)鍵幀表示動(dòng)畫過程中的一個(gè)狀態(tài)，多個(gè)關(guān)鍵幀就可以使動(dòng)畫十分絢麗。@keyframes 規(guī)則的語法格式如下：

@keyframes animationname{keyframes-selector{css-styles;}}

每個(gè)參數(shù)的含義見表2。

表2 @keyframes 規(guī)則屬性

本例中蘋果晃動(dòng)動(dòng)畫是用@keyframes 規(guī)則創(chuàng)建的（見圖4 所示）。在動(dòng)畫過程中，可以多次更改CSS 樣式。本例代碼中，0%，20%，40%，60%，80%，100%動(dòng)畫規(guī)則表達(dá)的是這個(gè)動(dòng)畫元素的六種狀態(tài)（即六個(gè)關(guān)鍵幀）和處在這六種狀態(tài)中時(shí)設(shè)置的CSS 樣式。那些沒有定義的狀態(tài)（如從1%到19%）則組成了這些已定義的狀態(tài)間的過渡狀態(tài)。@keyframes 規(guī)則創(chuàng)建的蘋果晃動(dòng)動(dòng)畫的代碼如下：

（3）animation 添加兩個(gè)動(dòng)畫效果

animation-name 屬性指定應(yīng)用的一系列動(dòng)畫名稱，animation-name 屬性提供多個(gè)值，各個(gè)值之間使用逗號(hào)來分隔。每一個(gè)動(dòng)畫名稱都應(yīng)該對應(yīng)一個(gè)@keyframes幀動(dòng)畫。本例中蘋果先要晃動(dòng)4S，然后掉落下來，這里設(shè)計(jì)了蘋果晃動(dòng)和蘋果掉落兩個(gè)動(dòng)畫效果，代碼如下所示：

.move 元素應(yīng)用了2 個(gè)動(dòng)畫，動(dòng)畫名稱分別為shake 和fall。shake 是蘋果晃動(dòng)動(dòng)畫，fall 是蘋果掉落動(dòng)畫。這是2 個(gè)獨(dú)立的動(dòng)畫，它們會(huì)在動(dòng)畫周期內(nèi)同時(shí)執(zhí)行。如果在某一時(shí)刻對于同一個(gè)CSS 屬性存在多個(gè)指定的動(dòng)畫行為，那么此刻在animation-name 屬性值中最后出現(xiàn)的動(dòng)畫會(huì)覆蓋其他的動(dòng)畫。為了第一個(gè)動(dòng)畫先播放，播放完成后，第二個(gè)動(dòng)畫緊接著播放。解決方法是將第二個(gè)動(dòng)畫的延遲時(shí)間（animation-delay）設(shè)置成第一個(gè)動(dòng)畫的持續(xù)時(shí)間（animation-duration）。本例fall 動(dòng)畫的延遲時(shí)間是shake 動(dòng)畫的持續(xù)時(shí)間4s。

4 結(jié)語

隨著CSS3 的出現(xiàn)，越來越多的動(dòng)畫效果可以直接單純使用CSS3 實(shí)現(xiàn)。CSS3 制作動(dòng)畫效果優(yōu)勢就是不需要加載額外腳本或者庫。CSS3 的animation 屬性是調(diào)用瀏覽器自身渲染引擎去實(shí)現(xiàn)動(dòng)畫，這樣展示動(dòng)畫過程更加快速和流暢。雖然animation 的瀏覽器支持情況仍稍有欠缺，但animation 的效果真的十分出色。實(shí)踐證明，利用純CSS3 制作模擬萬有引力定律的蘋果樹動(dòng)畫效果，給學(xué)生帶來非常好的體驗(yàn)，提高了學(xué)生的動(dòng)手實(shí)踐能力，取得良好的教學(xué)效果。