第四課：動(dòng)畫(huà)的設(shè)計(jì)思維

通過(guò)前面3課的學(xué)習(xí)，我們已經(jīng)掌握了制作動(dòng)畫(huà)的方法，盡管做出來(lái)的動(dòng)畫(huà)還十分簡(jiǎn)陋。還記得學(xué)習(xí)基礎(chǔ)部分的時(shí)候，曾在很長(zhǎng)一段時(shí)間內(nèi)接觸的都是單一的色塊嗎？那并未影響大家現(xiàn)在的水平發(fā)揮。同樣的，很快我們就要開(kāi)始制作較為精細(xì)的動(dòng)畫(huà)了。但是在這一切到來(lái)之前，大家還必須學(xué)習(xí)一些必備的設(shè)計(jì)思維。所謂設(shè)計(jì)思維就是指在制作動(dòng)畫(huà)前的規(guī)劃考慮，這規(guī)劃包括很多方面。

首先講一下圖層的組織，最終的成品動(dòng)畫(huà)是不包含圖層信息的。這里所說(shuō)的圖層僅指制作中。對(duì)于利用圖層位置變化來(lái)制作的動(dòng)畫(huà)而言，有一個(gè)顯而易見(jiàn)的問(wèn)題就是必須合理安排圖層，因?yàn)橐苿?dòng)的最小單位是圖層，因此如果需要制作多個(gè)運(yùn)動(dòng)軌跡各異的物體時(shí)，它們就必須分布在不同的圖層中。也需要事先考慮好移動(dòng)的距離，圖像的尺寸以及擺放的位置需要為移動(dòng)留下足夠的空間，這是其一。其二就是考慮好是否會(huì)與其他圖層相交，以及相交時(shí)候的處理，誰(shuí)遮蓋誰(shuí)，也就是圖層的層次安排，如下圖中就列出了3種相交的方式，最左邊的是兩個(gè)圖層均為100%時(shí)候，綠色覆蓋紅色。另外兩個(gè)則顯示了在50%的不透明度下，不同層次造成的不同覆蓋效果。如綠色遮蓋紅色，那么相交部位就偏綠，反而反之。這都是在正常混合模式下，如果選擇了其他的混合模式如疊加等，就要更加注意層次。

以上說(shuō)的都是技術(shù)問(wèn)題，現(xiàn)在來(lái)說(shuō)一下情節(jié)方面的問(wèn)題。一般來(lái)說(shuō)，如果一個(gè)物體始終都在圖像中運(yùn)動(dòng)，則無(wú)需對(duì)其進(jìn)行交代。但如果物體原本不在畫(huà)面中，是后來(lái)進(jìn)入畫(huà)面的，或原本在畫(huà)面中后來(lái)移出了畫(huà)面，則需要對(duì)物體的出現(xiàn)和消失做一個(gè)交代，這個(gè)交代就是過(guò)渡，讓觀看者有一個(gè)比較自然的心理轉(zhuǎn)變。常見(jiàn)的手法就是讓物體逐漸顯現(xiàn)(也稱淡入)或逐漸消失(也稱淡出)。如下圖所示，演示了在同樣的一個(gè)文字移動(dòng)中，是否采取淡入和淡出處理的效果對(duì)比。

可將鼠標(biāo)移入到播放區(qū)觀看實(shí)際的動(dòng)畫(huà)效果，移出播放區(qū)將停止播放。通過(guò)比較，相信大家都會(huì)覺(jué)得添加了淡入淡出處理的效果更好。

范例動(dòng)畫(huà)1　

范例動(dòng)畫(huà)2 

除此之外，循環(huán)設(shè)定也是屬于情節(jié)方面的問(wèn)題，這個(gè)我們其實(shí)在之前有提到過(guò)，就是有些場(chǎng)合下可以使用無(wú)限循環(huán)的動(dòng)畫(huà)，而有些場(chǎng)合則不適合。比如一個(gè)欄目標(biāo)題文字淡入的動(dòng)畫(huà)，如果不斷地重復(fù)，就會(huì)使得網(wǎng)頁(yè)整體看上去顯得很亂，會(huì)令觀看者感到不舒服。此時(shí)最適合的做法就是播放一次，這樣既可以展現(xiàn)效果，又不會(huì)影響網(wǎng)頁(yè)整體。設(shè)定為2到3次的循環(huán)一般也可接受，再多就不好了。不過(guò)只播放一次的動(dòng)畫(huà)最好是放在網(wǎng)頁(yè)的上部，這樣一進(jìn)入網(wǎng)頁(yè)就可以看到。如果放在網(wǎng)頁(yè)底部，可能觀看者閱讀到該處時(shí)動(dòng)畫(huà)已經(jīng)播放完了。那樣的話就制作動(dòng)畫(huà)就沒(méi)有意義了，還不如就用靜態(tài)的圖片代替。

范例動(dòng)畫(huà)3
(大家在新窗口打開(kāi)這圖片看看效果）
范例動(dòng)畫(huà)4

需要注意的是，GIF動(dòng)畫(huà)圖片每調(diào)用一次就會(huì)重新播放。如果有些人已經(jīng)具備了網(wǎng)頁(yè)制作的知識(shí)，可以利用這個(gè)性質(zhì)在網(wǎng)頁(yè)制作軟件中設(shè)定相應(yīng)的動(dòng)作。比如大家在這里移動(dòng)鼠標(biāo)觀看范例的動(dòng)畫(huà)就是如此。每次移入后動(dòng)畫(huà)總是從頭開(kāi)始播放。這樣即便是只播放一次的動(dòng)畫(huà)，也可以令它在網(wǎng)頁(yè)中多次播放。沒(méi)有網(wǎng)頁(yè)制作知識(shí)也不用擔(dān)心，這并不影響我們后面的動(dòng)畫(huà)學(xué)習(xí)。如果想要了解一下，可觀看GoLive的視頻教程。

對(duì)于看上去很不錯(cuò)的淡入淡出效果而言，有一個(gè)重要的問(wèn)題需要考慮，那就是瀏覽器可以被設(shè)置為禁止播放動(dòng)畫(huà)。此時(shí)動(dòng)畫(huà)只會(huì)顯示其第1幀時(shí)候的畫(huà)面。那么類似上面的“悄然來(lái)去”的動(dòng)畫(huà)在網(wǎng)頁(yè)中將是一片空白，因?yàn)槠涞?幀本來(lái)就是空白的。這就容易引起觀看者的誤會(huì)。也許大家會(huì)覺(jué)得沒(méi)有人會(huì)刻意關(guān)閉動(dòng)畫(huà)顯示，但既然不能排除這個(gè)因素，我們就需要從最廣泛的層面去考慮訪問(wèn)者的情況。在網(wǎng)頁(yè)的整體布局中，應(yīng)避免在重要的文字或指示部位使用淡入淡出動(dòng)畫(huà)。在將動(dòng)畫(huà)放入網(wǎng)頁(yè)中后，最好自己手動(dòng)關(guān)閉動(dòng)畫(huà)播放檢查是否存在問(wèn)題。除了關(guān)閉動(dòng)畫(huà)播放以外，在頁(yè)面顯示時(shí)如果訪問(wèn)者按下ESC鍵也會(huì)中斷動(dòng)畫(huà)播放，畫(huà)面將停留在中斷的那一刻。

如要同時(shí)照顧到禁止和允許播放動(dòng)畫(huà)的訪問(wèn)者，在兩者之間取得平衡點(diǎn)，那么在動(dòng)畫(huà)的制作上就應(yīng)該遵循一個(gè)原則，那就是主體部分不動(dòng)，修飾部分作動(dòng)畫(huà)。如下圖所示，文字本身不做動(dòng)畫(huà)，只是在文字的邊緣制作了動(dòng)畫(huà)效果。這樣即使靜止動(dòng)畫(huà)播放或播放時(shí)中斷，也不會(huì)影響觀看者對(duì)內(nèi)容的理解。不過(guò)，只要保證能在任何時(shí)候準(zhǔn)確地反映內(nèi)容，避免文字的消失或過(guò)于劇烈的變形，主體文字也是可以動(dòng)的。

播放范例動(dòng)畫(huà)5

本節(jié)課中所講述的內(nèi)容和制作動(dòng)畫(huà)的技術(shù)并不相關(guān)，不過(guò)在大家要將動(dòng)畫(huà)應(yīng)用于網(wǎng)頁(yè)中的時(shí)候，就要從大方面來(lái)考慮動(dòng)畫(huà)的制作及表現(xiàn)方法。單純學(xué)習(xí)這些內(nèi)容有些枯燥，大家留下印象就好，在以后的制作中會(huì)有應(yīng)用到的時(shí)候。這次的作業(yè)是將“悄然來(lái)去”那個(gè)動(dòng)畫(huà)制作出來(lái)。另外將下面兩個(gè)派生的動(dòng)畫(huà)也制作出來(lái)。

范例動(dòng)畫(huà)6
　

范例動(dòng)畫(huà)7