登錄/注冊(cè)

動(dòng)畫(huà)真好玩（3）：倒霉的烏鴉

動(dòng)畫(huà)2014-02-27

留言 2

導(dǎo)讀

秋葉語(yǔ)錄《動(dòng)畫(huà)真好玩》系列更新，不可多得的精品PPT動(dòng)畫(huà)教程。本節(jié)教程為動(dòng)畫(huà)真好玩（3）：倒霉的烏鴉

十分鐘零代碼實(shí)現(xiàn)HTML5視差滾動(dòng)效果

? ? ? ? 視差滾動(dòng)是最近出現(xiàn)的一個(gè)比較火的站點(diǎn)視覺(jué)效果，適用于做整站(mini-site)也可以做小動(dòng)畫(huà)。通常來(lái)說(shuō)，要使用JavaScript和CSS手工編代碼來(lái)實(shí)現(xiàn)視差滾動(dòng)效果。不過(guò)在強(qiáng)大的PPT面前，只要十分鐘，我們也可以毫無(wú)壓力地實(shí)現(xiàn)這種效果，并且，可以把它展示到自己的網(wǎng)站上去哦！

? ? ? ??實(shí)現(xiàn)動(dòng)畫(huà)如下。

或者你掃描一下下面的二維碼，也可以流暢地在你的手機(jī)或者平板上播放，（技術(shù)原因，暫時(shí)無(wú)法實(shí)現(xiàn)烏鴉翅膀撲動(dòng)的效果，不過(guò)你可以腦補(bǔ)成飛機(jī)好了）試一試吧。（長(zhǎng)按圖片即可保存到相冊(cè)）

上述動(dòng)畫(huà)用到的圖片資源是臭干老濕厚顏無(wú)恥的“借”自一個(gè)視差滾動(dòng)效果JS庫(kù)：spritely.net 。非常感謝。

好下面先教你怎么做出這個(gè)效果，下一節(jié)課臭干老師再透露如何在手機(jī)上順利播放PPT動(dòng)畫(huà)的秘密！

【準(zhǔn)備工作】

1、下載素材包。

請(qǐng)點(diǎn)擊最下方的【閱讀原文】下載本節(jié)素材包。

2、建立模板。

因?yàn)檫@個(gè)小動(dòng)畫(huà)是個(gè)長(zhǎng)條幅狀，所以我們要自定義一下PPT頁(yè)面的大小。打開(kāi)PPT，進(jìn)入菜單【設(shè)計(jì)】—【幻燈片大小】—【自定義幻燈片大小】，寬度我們選擇16：9的默認(rèn)長(zhǎng)度33.867厘米，高度只要一小半8厘米就夠了。

3、添加PPT頁(yè)面的背景顏色。

背景的顏色素材包中已經(jīng)準(zhǔn)備好了，我們進(jìn)入菜單【設(shè)計(jì)】—【設(shè)置背景格式】，填充方式【圖片或紋理填充】，點(diǎn)選圖片來(lái)自【文件】，選擇我們素材包中的sky1.png圖片，記得勾選【將圖片平鋪為紋理】，天空的背景顏色就搞定了！

做好的背景應(yīng)該是這個(gè)樣子。

有童鞋說(shuō)，下面怎么還有一塊沒(méi)有覆蓋到？沒(méi)關(guān)系，呆會(huì)就會(huì)擋掉的。

3、制作飛行的烏鴉的動(dòng)畫(huà)。

學(xué)過(guò)臭干老師《PPT動(dòng)畫(huà)大師》第18課的童鞋應(yīng)該知道這個(gè)烏鴉怎么做了吧，難者不會(huì)，會(huì)者不難，想知道的話回復(fù)”動(dòng)畫(huà)18“現(xiàn)學(xué)現(xiàn)賣一下。只是我們提供的素材中的幀圖片是在一張圖片上，需要大家自己裁剪一下，記得必須一樣大小。做好的這只烏鴉我們先讓它飛一會(huì)。

下面正式開(kāi)始動(dòng)畫(huà)的制作。

仔細(xì)觀察原動(dòng)畫(huà)就可以發(fā)現(xiàn)，其實(shí)這里用到的動(dòng)畫(huà)很簡(jiǎn)單，就是幾個(gè)路徑動(dòng)畫(huà)。云朵、遠(yuǎn)山還有近處的磨坊樹(shù)林分別以不同的速度移動(dòng)，形成了視差效果。

但是問(wèn)題來(lái)了，這么些個(gè)永遠(yuǎn)也移不完的山啊樹(shù)啊，是怎么實(shí)現(xiàn)的呢，難道要做一個(gè)長(zhǎng)得沒(méi)邊的圖片慢慢移動(dòng)么？就是有這個(gè)長(zhǎng)條圖片，移動(dòng)的路徑到什么時(shí)候才是個(gè)頭呢？

顯然這是錯(cuò)誤的思路。

要解決其實(shí)也很簡(jiǎn)單。就兩個(gè)字——”重復(fù)“。圖片移動(dòng)出了頁(yè)面以后，再回過(guò)頭來(lái)重來(lái)一遍就行了。只要加一個(gè)小小的技巧就行了。

制作流程：

1、首先復(fù)制黏貼最前面的帶磨坊小樹(shù)的圖片（hill-with-windmill.png）到頁(yè)面上。按住”shift"鍵將圖片的長(zhǎng)度拖放到和頁(yè)面的寬度一致。下面是關(guān)鍵——復(fù)制一份，把復(fù)制出來(lái)的這份圖片接到頁(yè)面的右邊，我們就會(huì)發(fā)現(xiàn)，兩張圖片天衣無(wú)縫地接到了一起。不點(diǎn)擊的話，誰(shuí)能看出這是兩張圖片呢。

2、添加動(dòng)畫(huà)路徑。

我們?cè)谶x擇窗格中分別將兩張圖片命名為前1和前2，然后為前1添加向左的路徑動(dòng)畫(huà)。讓前1向左移動(dòng)剛好一個(gè)頁(yè)面的距離，也就是我們?cè)O(shè)定33.867厘米。不過(guò)PPT的路徑設(shè)置功能實(shí)在太爛，只能拖動(dòng)紅色點(diǎn)的時(shí)候目測(cè)移動(dòng)的虛影的右邊剛剛和頁(yè)面的最左邊齊平即可。

3、設(shè)置動(dòng)畫(huà)。

動(dòng)畫(huà)開(kāi)始與上一動(dòng)畫(huà)同時(shí)，時(shí)長(zhǎng)為10秒，重復(fù)設(shè)定為直到幻燈片末尾。當(dāng)然別忘了在詳細(xì)設(shè)定中將平滑開(kāi)始和平滑結(jié)束設(shè)為0。

4、下面就簡(jiǎn)單了，用動(dòng)畫(huà)刷在“前2”上刷一下。然后播放測(cè)試一下，是不是已經(jīng)出現(xiàn)連綿不斷的移動(dòng)效果了？至于邏輯關(guān)系么，大家做了一遍，也明白是咋回事了吧。其實(shí)將前1和前2組合起來(lái)，然后添加動(dòng)畫(huà)路徑也是一樣的效果，只是動(dòng)畫(huà)路徑要長(zhǎng)一倍了。

5、前排移動(dòng)的效果出來(lái)以后，中層的山和最后層的云的效果大家都會(huì)做了吧。這里就不多說(shuō)了，可以用前1的動(dòng)畫(huà)刷直接刷一下，然后修改動(dòng)畫(huà)時(shí)長(zhǎng)即可，中層的山丘移動(dòng)可以修改為15秒，云的移動(dòng)速度可以修改為20秒。

6，最后請(qǐng)出這只倒霉的烏鴉吧，為它添加從左向右的路徑，時(shí)間設(shè)為8秒，重復(fù)直到幻燈片結(jié)束。

最后還有一個(gè)小細(xì)節(jié)需要注意。就是各圖層的關(guān)系。因?yàn)槲覀円恳暡钚Чw現(xiàn)出遠(yuǎn)近的立體感來(lái)，所以各圖層的相互遮擋的細(xì)節(jié)非常重要。云是最遠(yuǎn)的，所以應(yīng)該是在最下層，中層是中間的山脈，烏鴉在中層山脈和最前層的磨坊樹(shù)林之間。這樣烏鴉飛過(guò)時(shí)，就能體現(xiàn)出擋住云，同時(shí)又會(huì)被樹(shù)木遮住的立體效果來(lái)。