十分鐘零代碼實現HTML5視差滾動效果

視差滾動是最近出現的一個比較火的站點視覺效果,適用于做整站(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,新建一個作品??旖萱ICmd+I/Ctrl+I導入背景圖片hill2.png,在舞臺上選中該圖片后,快捷鍵Cmd+Y/Ctrl+Y將其轉換成一個元件(Symbol),命名為symHillBack。結果如圖:在舞臺右側的Library面板下的Symbol子面板中能看到“symHill”?,F在,你可以刪除舞臺上symHill實例。我們來開始編輯symHill元件。

Hill Symbol

平移圖片hillA

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

Scrolling - HIll

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

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

關鍵幀Left=0

關鍵幀Left=0

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

第二張圖片:hillB

但是,通過運行可以看到,在背景山向左滾動出舞臺時,舞臺會空出,而我們希望整個過程是一個連綿不斷的滾動。為了實現該效果,我們使用兩張圖片hill的實例。在symHill元件的編輯狀態下,從Library面板的Assets子面板中,拖拽hill2.png圖片到舞臺上?,F在舞臺上應該存在兩個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屬性關鍵幀

hillB的left屬性關鍵幀

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

symHill時間軸特效

symHill時間軸特效

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

    complete事件

    complete事件

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

二、制作前景特效

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

Copy Symbol

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動畫可視化工具

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏