登錄/注冊

動畫真好玩（3）：倒霉的烏鴉

動畫2014-02-27

留言 2

導(dǎo)讀

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

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

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

? ? ? ??實現(xiàn)動畫如下。

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

上述動畫用到的圖片資源是臭干老濕厚顏無恥的“借”自一個視差滾動效果JS庫：spritely.net 。非常感謝。

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

【準(zhǔn)備工作】

1、下載素材包。

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

2、建立模板。

因為這個小動畫是個長條幅狀，所以我們要自定義一下PPT頁面的大小。打開PPT，進入菜單【設(shè)計】—【幻燈片大小】—【自定義幻燈片大小】，寬度我們選擇16：9的默認(rèn)長度33.867厘米，高度只要一小半8厘米就夠了。

3、添加PPT頁面的背景顏色。

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

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

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

3、制作飛行的烏鴉的動畫。

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

下面正式開始動畫的制作。

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

但是問題來了，這么些個永遠(yuǎn)也移不完的山啊樹啊，是怎么實現(xiàn)的呢，難道要做一個長得沒邊的圖片慢慢移動么？就是有這個長條圖片，移動的路徑到什么時候才是個頭呢？

顯然這是錯誤的思路。

要解決其實也很簡單。就兩個字——”重復(fù)“。圖片移動出了頁面以后，再回過頭來重來一遍就行了。只要加一個小小的技巧就行了。

制作流程：

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

2、添加動畫路徑。

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

3、設(shè)置動畫。

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

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

5、前排移動的效果出來以后，中層的山和最后層的云的效果大家都會做了吧。這里就不多說了，可以用前1的動畫刷直接刷一下，然后修改動畫時長即可，中層的山丘移動可以修改為15秒，云的移動速度可以修改為20秒。

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

最后還有一個小細(xì)節(jié)需要注意。就是各圖層的關(guān)系。因為我們要靠視差效果體現(xiàn)出遠(yuǎn)近的立體感來，所以各圖層的相互遮擋的細(xì)節(jié)非常重要。云是最遠(yuǎn)的，所以應(yīng)該是在最下層，中層是中間的山脈，烏鴉在中層山脈和最前層的磨坊樹林之間。這樣烏鴉飛過時，就能體現(xiàn)出擋住云，同時又會被樹木遮住的立體效果來。