H5動畫操作指南「h5怎麼做動畫效果」

H5動畫在微信朋友圈愈來愈火爆，看到各種腦洞大開的動畫，你是不是也有量一量自己腦洞大小的衝動？現在告訴大家如何不變成也能製作在開始製作微信H5頁面動畫。這裡我用的工具室Mugeda在線製作工具，建議使用chrome瀏覽器會支持的比較好。

工具/原料

H5頁面的製作素材，包括圖片，音樂，文案等
你的腦洞

方法/步驟

1大體的流程是這樣的：1. 添加元素（圖片、文字等）到舞台；2. 為添加的元素定義動畫；3. 定義和用戶的交互行為（例如點擊跳轉等）；4. 導出或發布內容；

2首先創建

3.然後需要選擇一個動畫尺寸。在這個例子中我們選擇300×250, 這是一個典型的適合移動設備動畫的尺寸。選擇尺寸後，按“確定”繼續。

4.準備好一個大小為300×250的舞台，這時候我們就可以開始製作動畫內容

5.我們為舞台添加一個背景圖片。從IDE左側的工具欄上選擇“圖片”按鈕，可以打開選擇圖片的對話框

6.選擇圖片對話框是在製作動畫中用的最多的對話框之一。他提供了三種上傳圖片的方式：選擇本地文件，輸入網址，通過拖拽批量上傳。上傳的時候還可以指定一個目標文件夾。我們暫時採用默認上傳位置即可。這個例子中我們從本地上傳一個木質紋理圖片。大家可以自由選擇一個圖片。選擇圖片並上傳後，其尺寸、格式以及預覽會顯示在對話框中。如果滿意了，就點擊“選擇”將圖片添加到舞台上。

7.由於添加的圖片尺寸(370×280)比舞台大，圖片會縮小顯示在舞台中央。

8.為了使其全屏顯示，可以點擊選擇圖片，然後在IDE右側的屬性對話框中編輯其位置和大小使其全屏顯示。

9.接下來，我們為舞台添加一段文字。首先在IDE上方的時間線上，點擊時間線左下角的“新圖層”添加一個新的圖層。

10.新添加的圖層會自動命名為”圖層1”, 並添加在圖層0的上面。

11.下面我們來添加文字。從IDE左側的工具欄選擇”文字“，並在舞台上點擊鼠標添加文字。

12.這是文字剛添加到舞台的樣子。我們需要調整其屬性。

13.點擊左側工具欄上的選擇工具，然後選中添加的文字。文字的屬性會出現在右側的屬性面板中。

14.在屬性面板調整其參數到一個滿意的樣子。下面是一個調整好的樣子。

15.到此為止，我們已經完成了第一個步驟：添加元素到舞台。接下來，我們為添加的文字定義一個簡單的動畫。在繼續之前，我們先保存一下作品，點擊IDE上部工具條上的”保存”按鈕，或者從文件菜單中選擇“文件/保存”。第一次保存作品時，需要提供一個文件名稱。保存時的舞台截圖，將作為作品的縮略圖存在。今後再次保存時，不需要提供文件名，而作品縮略圖會根據最新的舞台截圖進行更新。

16.為了製作動畫，我們需要先將內容的幀數擴展至一個適合的數據。默認情況下，動畫內容只有一幀，這個可以時間線面板上看到：

17.我們現在把動畫的幀數調整到20幀，以便製作動畫。在時間線上點擊圖層0，選中第20幀，然後單擊鼠標右鍵，從出現的菜單中選擇“插入幀(F5)”，可以將圖層0的幀數擴展至第20幀。也可以選中第20幀後，直接按下鍵盤的F5鍵，達到同樣的效果。

18.這時候時間線顯示如下。注意，圖層0已經包含20幀，而圖層1仍然只有一幀。

19.注意，定義在圖層中的元素（圖像、文字等），只有在圖層的範圍內才可見。為了理解這一點，可以點擊工具欄上的播放按鈕，在舞台上預覽作品。

19.注意觀察時間線的當前幀變化，以及舞台上文字和背景圖片的可見性。由於我們要在文字上定義動畫，因此，按照上述同樣的方法，選中圖層1，然後將其也擴展至20幀。

20.終於可以開始添加動畫了。在時間線上，單擊圖層1中1到20幀的任何一幀，單擊右鍵，在出現的菜單中選擇“插入關鍵幀動畫”。

21.這時候，圖層1變成了淺綠色，並且在圖層範圍的最後一幀（第20幀）出現了一個紅色的點。這表明，動畫已經添加成功了。圖層1中的第1幀和第20幀，定義了動畫的開始、結束幀。中間的幀就可以由系統自動通過插值產生了。我們可以為圖層1中包含的（文字）元素在動畫的開始和結束幀分別定義不同的（位置、大小等）屬性，從而產生動畫效果。