一個好的靜態場景決定了一個網頁所能達到的下限，而一個好的動態效果則決定了一個網頁所能達到的上限。在上一章節中，小編帶大家制作好了電子賀卡的靜態場景頁面，而在本節中，將正式開始進入動態效果的制作，這是取決網頁是否成功的核心所在。

下面，小編將在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中文網站進行后續學習哦。