第十課：實戰(zhàn)圖層樣式動畫

現(xiàn)在我們來講解一下上節(jié)課的作業(yè)。比起以前“石器時代”的作業(yè)，它的難度有明顯的增加。一個是動畫元素的增多，不再是由少數(shù)的簡單物體構(gòu)成。再就是要求在制作前要成竹在胸，事先就要計劃好步驟。

新建圖像，約100×100，用橢圓形狀工具的形狀圖層方式繪制一個矢量正圓，填充為綠色(數(shù)值19631c，可在拾色器下方的#區(qū)域內(nèi)填入，這其實就是用十六進制來表示十進制的0~255，不必深究)或其他顏色。然后復(fù)制該圖層(CTRL+J，復(fù)制出來的應(yīng)位于原圖層上方)，對復(fù)制出來的圖層用自由變換功能，將其參照中心點(ALT+SHIFT)縮小。接著為其定義描邊樣式(大小為1像素，白色)并將填充不透明度設(shè)置為0%，得到一個線圓。適當(dāng)降低該圖層的不透明度(約15%)已達到較好的視覺效果。將這個線圓圖層再次復(fù)制并依照之前再次縮小，得到兩個同心的線圓。大家也可依次列推制作更多的同心線圓。此時圖像應(yīng)類似于下左圖所示。然后新建一個普通圖層，使用直線工具的填充像素方式(粗細(xì)1像素，關(guān)閉消除鋸齒)在圓的中央位置繪制一橫一豎組成十字。繪制的時候可將圖像放大便于對齊，繪制后也可使用多圖層對齊功能調(diào)整。此時圖像類似于下中圖所示，圖層調(diào)板如下右圖所示。在這個前期的動畫元素準(zhǔn)備過程中，我們先使用了矢量繪制圓是因為其需要縮小，矢量方式可保證質(zhì)量。后面的十字理論上也可以使用矢量方式繪制，但由于矢量直線在1像素這樣小的單位時，會由于自身的抗鋸齒功能而可能導(dǎo)致邊緣模糊，結(jié)果看上去就像是2像素粗細(xì)。大家可以自己動手試試看。除了這種極微小單位的情況以外，都應(yīng)盡量使用矢量繪制，這個前提是不會變的。

雷達掃描效果的實現(xiàn)是第一個難點，這其實就是漸變疊加樣式，關(guān)鍵是要選擇角度的漸變方式，以及相應(yīng)的漸變設(shè)定，分別如下左圖和中圖所示。漸變色標(biāo)為96de8a。漸變色標(biāo)也可用白色，再通過更改混合模式或降低不透明度來融合圖像。此時圖像應(yīng)如下右圖所示。如果看不懂這里的內(nèi)容，請復(fù)習(xí)基礎(chǔ)教程的相應(yīng)章節(jié)。

現(xiàn)在我們讓掃描線動起來，其方法就是改變漸變疊加設(shè)定中的角度數(shù)值。這里會遇到第二個難點，那就是如何設(shè)置動畫參數(shù)。掃描線應(yīng)該從90度開始，旋轉(zhuǎn)360度后應(yīng)回到90度。但在關(guān)鍵幀中兩個都設(shè)置為90的話就沒有動畫效果了，所以我們先將其設(shè)置到旋轉(zhuǎn)180度的位置。需要注意的是，如果旋轉(zhuǎn)的絕對角度小于180(181度等同于1度)，將以最小轉(zhuǎn)角作為旋轉(zhuǎn)的方向。將動畫的文檔設(shè)置改為持續(xù)01:00，幀速率15fps。在開始時刻開啟圓圖層的樣式動畫記錄。然后將時間標(biāo)桿移動到動畫結(jié)束時刻，將角度設(shè)置為-90度。動畫調(diào)板如下左圖所示。

范例動畫

現(xiàn)在我們延長動畫的持續(xù)時間為02:00，將時間標(biāo)桿移動到新的結(jié)束時刻并建立關(guān)鍵幀，然后將樣式的第1幀復(fù)制到該時刻。此時動畫調(diào)板如下左圖所示�？雌饋硐袷峭瓿闪诵D(zhuǎn)一周的設(shè)定了，但細(xì)想一下，現(xiàn)在時刻00:00與02:00的狀態(tài)是相同的，這樣當(dāng)動畫循環(huán)播放時，兩個完全一樣的幀就會形成一種停頓的效果，播放動畫的時候仔細(xì)看一下，不難發(fā)現(xiàn)。

范例動畫

這個問題我們以前在幀式動畫的時候遇到過，當(dāng)時的方法是刪除最后一幀。但在時間軸方式下不能單獨刪除某一幀，只能通過更改持續(xù)時間的方式。我們將持續(xù)時間改為01:14。動畫調(diào)板如下左圖所示。注意此時原先設(shè)定的幀已位于時間區(qū)域之外了，但仍然在發(fā)揮作用，控制著動畫的參數(shù)改變。即使再將持續(xù)時間改為更短，以至于在動畫調(diào)板已看不見時，也是如此。所以在時間軸方式下定義的關(guān)鍵幀，是不會因為持續(xù)時間變短而消失的。以后只要增加持續(xù)時間，它們還會出現(xiàn)。這是一個很重要的特性。這里再強調(diào)一下動畫時刻的表述方式，01:14本身既包含秒時間也包含幀，含義是經(jīng)過1秒后的第14幀。按照我們15fps的設(shè)定，這個絕對幀數(shù)就應(yīng)該是15＋14＝29幀。而下一幀的時刻表示應(yīng)為02:00而不是01:15。就好比日常生活中的時間是60進位制，那么就不可能有3點60分這樣的表述，而應(yīng)表述為4點。同樣的，15fps就表示15進位制，把一秒鐘平均分為15單位，14單位之后就向秒進位。

范例動畫

現(xiàn)在要制作模擬雷達掃描到的物體，這本應(yīng)在最初就先做好，但為了體現(xiàn)制作過程中可能發(fā)生的后期添加元素的情況，所以放到現(xiàn)在來做。新建一個圖層，用直徑為1的鉛筆工具用白色在其中隨便點幾下(間距不要太大)。如下左圖所示。接著移動時間標(biāo)桿，在掃描線與這幾個點接觸的時候(范例中位于00:10)，點擊不透明度的秒表按鈕建立關(guān)鍵幀，然后移動時間標(biāo)桿在掃描線差不多回到原點的時候(范例位于01:10)再建立一個，將圖層不透明度設(shè)置為0%，這樣就制作出了小點逐漸淡出的動畫。

通過上面的動畫可以看出小點在掃描線經(jīng)過后有了淡出的效果，但問題是小點在掃描線還沒有到達的時候，應(yīng)該是看不見的，當(dāng)掃描線達到時出現(xiàn)，然后再逐漸淡出。那么我們應(yīng)該在開始時刻設(shè)定關(guān)鍵幀，并將圖層的不透明度設(shè)置為0%。但這又出現(xiàn)一個問題，那就是小點的出現(xiàn)變成了淡入效果，也就是掃描線還沒有到達的時候，小點就逐漸顯現(xiàn)了。

范例動畫

如何解決這個問題是第三個難點。解決的方法有兩種，一種大家應(yīng)該可以自己想到的，那就是將開始時刻的關(guān)鍵幀移動到小點完全出現(xiàn)的前一幀，如下左圖所示。此外另外一種方法更“正規(guī)”一些，是我們以前沒有講到過的，那就是改變幀之間的過渡關(guān)系。現(xiàn)在不透明度3個幀之間都是過渡關(guān)系，即幀12過渡，幀23過渡。如果我們能令幀12之間不過渡的話，就可以達到目的了。在動畫調(diào)板中第1幀上點擊右鍵，選擇“保留插值”，注意幀圖標(biāo)從變?yōu)榱?img src="http://pic.16xx8.com/allimg/141230/2003321b0-16.jpg" width="10" height="10" alt="第十課：實戰(zhàn)圖層樣式動畫" title="第十課：實戰(zhàn)圖層樣式動畫_ps教程自學(xué)網(wǎng)(www.theoat.com.cn)"/>，如下右圖紅色箭頭處所示。這就表示這一幀到下一幀之間不再有過渡效果。由“從黑到白”的方式變成了“非黑即白”。此時整個動畫的制作就完成了。當(dāng)然，可以在后期再將其改為默認(rèn)的“線性插值”方式，那樣過渡效果就會重新出現(xiàn)。大家可以自己嘗試改變其他幀的插值方式。這里的“插值”是由英文生硬地翻譯而來，雖有些詞不達意，但記住其效果就可以了。

在引入圖層樣式后，我們表現(xiàn)動畫效果的能力就得到了很大的提高。大家應(yīng)該在課程之外自己多動手實踐，不要只局限于這里所介紹的內(nèi)容。要知道我們的范例是有限的，你們的創(chuàng)意是無限的。就這個已完成的動畫而言，大家可以再嘗試將十字線或同心圓做成忽明忽暗的效果。這說白了也就是淡入和淡出交替，只不過并非是0%或100%這樣極端的狀態(tài)。

范例動畫

今天的作業(yè)是完成如下的動畫。除背景層外，只允許使用一個文字層制作。