視差滾動是最近出現的一個比較火的站點視覺效果，適用于做整站(mini-site)也可以做小動畫。通常來說，要使用JavaScript和CSS手工編代碼來實現視差滾動效果。本文來介紹如何使用Edge Animate，在十分鐘之內，無編碼，無壓力地實現類似效果。

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

準備工作

下載Adobe Edge Animate制作工具

在本教程發布的時間，Edge Animate版本為1.5，可以在Adobe云創意平臺上免費下載。 您只需要在注冊地址注冊即可登錄下載。

項目源文件

Edge+Animate+Tutorial+4.zip
本教程用到的素材可以在項目解壓后的images目錄下找到，包括：

1. bird-forward-back.png
2. cloud.png
3. hill-with-windmill.png
4. sky1.png
5. hill2.png

教程

本教程不會逐步來介紹如何實現上述動畫，在上述動畫中用到的一些技巧在之前教程中也有介紹過.

一、滾動的背景

生成元件

在上面的視差效果動畫中，背景和前景始終在不間斷的滾動。這是通過操縱一幅圖片完成的。打開Edge Animate，新建一個作品。快捷鍵Cmd+I/Ctrl+I導入背景圖片hill2.png，在舞臺上選中該圖片后，快捷鍵Cmd+Y/Ctrl+Y將其轉換成一個元件(Symbol)，命名為symHillBack。結果如圖：在舞臺右側的Library面板下的Symbol子面板中能看到“symHill”。現在，你可以刪除舞臺上symHill實例。我們來開始編輯symHill元件。

平移圖片hillA

1. 在Symbol子面板中，選中symHill，右鍵點擊Edit，進入元件編輯狀態。我們期望，背景山在15秒中內，向屏幕左側滾動出舞臺。狀態如下：

使用之前教程介紹的方法（比如通過改變x坐標設定關鍵幀，或是使用自動關鍵幀生成模式，或者Pin按鈕），您能很快速的實現該效果。

1. 首先，命名舞臺上的圖片元素為hillA。將播放頭移至時間軸最開始，在舞臺右側面板的“Position and Size”子面板中設定其x=0，y=0 。然后，點擊X屬性的菱形按鈕，以left=0為hillA在0:00秒位置設定關鍵幀。如下圖：

關鍵幀Left=0

1. 激活auto-keyframe mode和Auto-transition Mode，并將播放頭移至0:15秒處。在舞臺上選中hillA，按住shift鍵，使用鼠標平移hillA出舞臺（x=-1110）。此時，時間軸上會自動生成關鍵幀和補間動畫（即過渡）。

第二張圖片:hillB

但是，通過運行可以看到，在背景山向左滾動出舞臺時，舞臺會空出，而我們希望整個過程是一個連綿不斷的滾動。為了實現該效果，我們使用兩張圖片hill的實例。在symHill元件的編輯狀態下，從Library面板的Assets子面板中，拖拽hill2.png圖片到舞臺上。現在舞臺上應該存在兩個hill2.png圖片元素，一張是之前的hillA，我們命名新導入的圖片元素為hillB。兩張圖片元素來自同一個源，瀏覽器只會請求一次。我們希望，在hillA向左平移時導致舞臺空出時，hillB能夠同步跟隨來補充舞臺空出的部分，造成連綿不斷的效果。

1. 首先，把播放頭移至時間軸起始，保證hillB的位置為緊貼舞臺右側（550，0）。在調整hillB的初始位置時請注意避免自動生成關鍵幀屬性。（注：本例中舞臺寬度為0）
2. 在這里，我們要保證hillB的滾動效果（速度和方向）與hillA完全一致。Edge Animate提供的一項強大的功能是可以在不同對象間拷貝粘貼時間軸特效。使用這個功能可以非常快速的完成這項任務。在時間軸上，選中hillA的特效，通過ctrl+C/cmd+C 或者右鍵彈出菜單的copy來復制特效。

復制特效

1. 接下來，在時間軸上向后移動播放頭，直至舞臺hillA的圖片右邊緣移至舞臺的右邊緣，即left=-560。在這個時間點（00:07.572）之后，hillA的移動會導致舞臺空出，此時需要hillB開始移入。保證播放頭在該時間點上，選中hillB，在時間軸上右鍵彈出菜單,選擇“Paste Special->Paste Transition from Location”，意味著將之前拷貝的hillA特效在從此時間點開始粘貼給hillB。如下圖：

粘貼后的效果如圖：

1. 但是，我們并不需要hillB完成全部動畫。hillB的任務只是補充hillA移動過程中舞臺空出時的特效。因此，移動播放頭到hillA特效的尾部，即00:15:000位置。在這里，hillB的工作業已完成。選中hillB，在播放頭處于00:15:000（即hillA時間軸特效尾部位置），在Position and Size子面板中，點擊X屬性的菱形按鈕，用hillB的x屬性生成關鍵幀。如下圖：

hillB的left屬性關鍵幀

1. 現在，不再需要hillB從00:15:000時間點后的特效。在時間軸上，選中hillB元素的Left屬性欄中這部分特效，刪除。請確保只刪除這部分left特效，而不是hillB的整體特效。刪除后，symHill元件的特效如下：

symHill時間軸特效

1. 現在，為symHill的Complete事件添加腳本來使其能夠循環播放。symHill的時間軸事件添加的腳本如下圖：

   

   complete事件

   現在你可以運行動畫，看一下效果。

二、制作前景特效

現在，已經完成了背景山的連綿滾動。我們只需要使用類似的方法，導入一張新的前景圖片（hill-with-windmill.png），并使用不同的步頻（比背景山略快，比如10秒），制作一個新的連綿滾動的元件就可以了。這部分工作，留給你來完成嘍。
（Stop！這個有點太不地道了吧？說好做個視差的教程，真到做視差就停了？）
復制元件symHill

Copy Symbol

我們當然不需要從0開始做前景效果了。既然已經完成了symHill，那么我們的前景效果當然要基于已經完成的工作繼續。在Symbol子面板中，選中symHill，然后右鍵菜單選中Duplicate來復制一個新的元件，我們命名為symFrontScene。
編輯symFrontScene

現在我們來編輯symFrontScene。在symbol子面板中，選中symFrontScene右鍵菜單“編輯”。

1. 首先，修改symFrontScene舞臺尺寸為w=640px，h=90px。如下。在symFrontScene前景元件中，我們將要使用的圖片是bird-forward-back.png。由于是前景圖片，我們設定其尺寸高度低于背景山，來生成層次感。在高度為90px的情況下，其寬度等比例應為640px。

調整元件舞臺尺寸

1. 接下來，我們要導入前景圖片bird-forward-back.png。在舞臺中，ctrl-I/cmd+I導入該圖片。導入后，該圖片會出現在舞臺中，以及Library的面板Assets中。我們把舞臺上新導入的這幅圖片刪除。其仍然會保留在assets面板列表中。
2. 接下來，我們需要替換symFrontScene元件中的圖片元素為bird-forward-back.png。在舞臺中選中hillA，在Image面板中修改Image Source為bird-forward-back.png。同樣方法，替換hillB的圖片為bird-forward-back.png

修改元素圖片來源

1. 在替換成新的圖片后，可以看到圖片沿用原有圖片的尺寸和比例。我們需要手工修改。確保已經關閉Auto-Keyframe Mode和Auto-Transition Mode。選中hillA和hillB，修改其高度為90px，寬度為640px。
2. 現在如果移動播放頭來查看動畫效果，會看到由于尺寸的變化，在hillA的右邊緣移進舞臺時，hillB并未及時跟隨。這是由于hillA和hillB的寬度小于背景山寬度的原因。我們來調整動畫來修正這個問題。選中hillA，移動播放頭，使其在舞臺中圖片右側邊緣剛剛到達舞臺右邊緣位置。你可以使用鼠標來調整舞臺下方的時間標志達到精確調整。

調整播放頭

1. 在上一步驟找到的時間點上，hillB應該尾隨進入舞臺。因此，我們在時間軸上選中hillB特效，使用鼠標拖動特效使其起始位置位于上一步驟找到的時間點上。

拖動特效

1. 現在hillB已經能夠同步的尾隨hillA進入舞臺并向左平移。我們需要刪除hillA無用的特效部分。將播放頭移至hillB的特效尾部，此時hillB的左側邊緣與舞臺左側重合。在時間軸上選中hillA，通過Position and Size面板的x屬性菱形按鈕，為hillA添加關鍵幀屬性。如下圖。

截止關鍵幀

1. 然后，刪除hillA的left屬性在該關鍵幀后的特效。結果如下圖：

結果

1. 最后，我們要加快symFrontScene的動畫播放速度，已于背景造成視差效果。在時間軸上，按住shift鍵，使用鼠標同時選中hillA和hillB。然后向左拖動時間軸上hillA或hillB特效的最右側的菱形符號，來減少動畫完成所需的幀數，即時間。比如，拖動到0:06秒。至此，symFrontScene完成了

三、完成視差

回到主舞臺上，播放頭移至0:00。從Symbol子面板中拖拽symFrontScene到舞臺上。使其圖片下沿與舞臺中的背景山元件下沿對齊。我們就完成了該視差動畫。通過ctrl+enter/cmd+enter運行，可以查看效果。

優設網所出現的Edge Animate系列文章，為Abobe公司原創，授權優設網發布推廣，轉摘請注明出處！謝謝
呃，覺得還不錯？查看神器相關的前幾期文章：
神器Animate教程：使用SpriteSheet創建HTML5動畫
基于Edge Animate可視化工具開發CSS3動畫
Edge Animate：Adobe新推制作HTML5動畫可視化工具