Hype作爲Mac現下常用的HTML5製作軟件，在動畫的設計方面有着強大的功能。
今天小編就帶大家瞭解這款HTML5製作軟件如何做出元素漸變色動畫。小編自用的版本是Hype 4，下面就使用軟件頁面進行演示。
首先需要大家在網站下載Hype 4的正版軟件並打開，在頁面中新建出一個元素，小編以圓形元素爲例爲大家演示。
新建一個圓形元素界面
圖1：新建一個圓形元素界面
可以先給圓形元素填充一種顏色，Hype 4提供多種色板可以進行選擇，小編選擇一種粉色進行填充，把粉色作爲元素的起始顏色。
圖2：填充初始顏色界面
第二步，調節時間軸，確定終止時間節點，將刻度線拖拽到終止時間節點位置。
時間軸界面
圖3：時間軸界面
下面就是關鍵一步，點擊“記錄”按鈕，開始自動記錄關鍵幀功能。
自動記錄關鍵幀界面
圖4：自動記錄關鍵幀界面
當“記錄”按鈕背景變爲紅色時，就表示已經開始記錄。將圓形元素按照一定路徑進行拖動，藍色虛線即是元素運行的路徑。
元素運動路徑設置界面
圖5：元素運動路徑設置界面
漸變色動畫需要元素沿路徑運動的過程中從一個顏色轉變爲另一種顏色，所以這時需要給終止狀態下的元素填充另一種顏色。小編在色板中選擇了一種紫色作爲最終顏色狀態。
終止時間節點元素狀態界面
圖6：終止時間節點元素狀態界面
設置完成後，記得關閉自動記錄關鍵幀功能，防止後期出現不需要的動畫效果。
最後就是觀看動畫的效果啦，在鍵盤點擊“空格鍵”可以快速播放動畫，就能看到效果啦。
可以看到在不同幀上面元素顏色發生着改變，Hype 4自動記錄功能的強大之處也可以在這裏體現，當用戶設置了初始顏色和最終顏色，自動記錄關鍵幀功能會爲元素補上中間狀態的顏色，得到的效果就是漸變色效果啦。
動畫效果界面
圖7：動畫效果界面
以上就是製作漸變色動畫效果的步驟啦，快來和小編一起使用這款Hype 4吧，從製作簡單、精巧的小動畫開始。