一個好的靜態場景決定了一個網頁所能達到的下限,而一個好的動態效果則決定了一個網頁所能達到的上限。在上一章節中,小編帶大家制作好了電子賀卡的靜態場景頁面,而在本節中,將正式開始進入動態效果的制作,這是取決網頁是否成功的核心所在。
下面,小編將在Mac系統上,使用Hype 4版本,開始下面教程的演示講解。
一、心形上浮效果制作
從第一節的最終效果預覽GIF可以看到,頁面上有幾個心形圖形上浮的動態效果,并且是一直循環重復的。想要達到這個循環的效果,就需要使用到Hype的時間線循環功能,當然,后續的動態心形圖形沿著Love曲線移動也是一樣的原理,因此需要創建2條新的時間線,一條命名為“心形上浮”,另一條命名為“心形移動”。
第一步:創建時間線的操作很簡單,點擊主時間線旁如下圖1紅框的小按鈕,然后選擇“新時間線”,創建時間線,并按照上述進行命名即可。
圖1:創建2條時間線
第二步:點擊“元素”,然后選擇圖像,將心形圖像導入到場景中,如下圖2,然后使用快捷鍵“Command + C”快速復制出2個相同的心形圖像。
圖2:導入心形圖像
第三步:使用鼠標調整心形圖形的大小,最好設置為兩大一小,這里小編設置的小心形寬度大小為42px,高度為39px;大心形寬度大小為61px,高度為57px,供大家參考。調整結束以后,拖動三個心形圖案到場景的最下方,并分別拉到左邊、中間和相對靠右的位置,具體位置如下圖3紅框所示。
圖3:調整心形大小和位置
第四步:移動時間線到00:07:00的位置,點擊“錄制”按鈕,開始錄制動畫,然后直接移動最左邊的心形圖像到終點的位置,此時的移動路徑會呈現一條直線,鼠標拖動直線的某個點,可以將直線按照該點進行變形,通過拖拽下圖4紅色箭頭所指的兩個拖拽點,可以調整變形的幅度,將直線變為S型曲線,調整后,最終的移動路徑如下圖4所示。
圖4:移動左邊圖形
第五步:取消“錄制”按鈕,然后移動時間到00:02:13秒,再點擊“錄制”按鈕,移動時間線到00:09:22秒處,根據上述的方法,調整中間心形圖形的移動路徑如下圖5,注意中間的心形是從右邊飛出場景的。
圖5:中間心形的移動路徑
第六步:取消“錄制”按鈕,移動時間到00:04:00秒,再點擊“錄制”按鈕,移動時間線到00:08:06秒處,根據上述的方法,調整右邊心形圖形的移動路徑如下圖6,右邊的心形從場景中間飛出場景。
圖6:右邊心形的移動路徑
當然,上述的移動路徑也不一定需要根據小編的設置而來,大家也可以隨性發揮,包括心形圖形的個數和開始動畫、結束動畫的時間,都可以根據自身需要進行調整。
第七步:選中全部三個心形圖像的時間線,然后點擊下圖7紅框的按鈕,將原本默認的“漸入/漸出”效果改為“漸出”,使得動畫效果更生動更符合當前場景。
圖7:調整動畫效果
二、祝福語閃爍效果制作
在效果預覽中,“happy national day”這句祝福語是會一閃一閃的,那么這個效果又該如何實現呢?原理其實就是利用文字透明度的重復變化,實現閃爍的效果。
第一步:切換到“主時間線”,選中文本,點擊“錄制”動畫按鈕,在00:00:00秒處,切換到“元素檢查器”,設置文本的不透明度為75%,然后間隔8毫秒,即時間線移動到00:00:08秒處,調整文本的不透明度為100%,再間隔8毫米,時間線移動到00:00:16秒,調整文本的不透明度為75%,這樣就實現了一個閃一下亮一下再暗一下的閃爍效果了。
圖8:文本動畫時間線
第二步:同樣的,移動時間線到00:00:24,重復上述步驟,再錄制一個相同的動畫,此時的時間線動畫展示如下圖9,這樣是為了實現在1.1秒內文字閃現2次,然后接下來1秒停止閃爍的效果。
圖9:文本動畫時間線
第三步:移動時間線到00:02:15秒處,然后點擊下方圖10紅框的小加號,添加一個關鍵幀,時間線操作選擇“開始時間線”,時間線選擇“主時間線”,這樣就完成了文字重復閃爍的動畫效果了。
圖10:添加關鍵幀
到這里為止,本節就結束了,在本節中,小編帶大家學習了如何制作心形圖形上浮的動畫和文字閃爍的動畫,在下一節中,將主要帶大家學習實現心形動態沿著Love軌跡移動的效果,請大家繼續關注Hype中文網站進行后續學習哦。