H5動畫在微信朋友圈愈來愈火爆，看到各種腦洞大開的動畫，你是不是也有量一量自己腦洞大小的沖動？今天小編為大家分享Mugeda在線制作工具如何制作微信H5頁面動畫方法，一起來看看吧！

這里我用的工具室Mugeda在線制作工具，建議使用chrome瀏覽器會支持的比較好。

方法/步驟

大體的流程是這樣的：

1. 添加元素（圖片、文字等）到舞臺；

2. 為添加的元素定義動畫；

3. 定義和用戶的交互行為（例如點(diǎn)擊跳轉(zhuǎn)等）；

4. 導(dǎo)出或發(fā)布內(nèi)容；

首先創(chuàng)建

然后需要選擇一個(gè)動畫尺寸。在這個(gè)例子中我們選擇300x250, 這是一個(gè)典型的適合移動設(shè)備動畫的尺寸。選擇尺寸后，按“確定”繼續(xù)。

準(zhǔn)備好一個(gè)大小為300x250的舞臺，這時(shí)候我們就可以開始制作動畫內(nèi)容

我們?yōu)槲枧_添加一個(gè)背景圖片。從IDE左側(cè)的工具欄上選擇“圖片”按鈕，可以打開選擇圖片的對話框

選擇圖片對話框是在制作動畫中用的最多的對話框之一。他提供了三種上傳圖片的方式：選擇本地文件，輸入網(wǎng)址，通過拖拽批量上傳。上傳的時(shí)候還可以指定一個(gè)目標(biāo)文件夾。我們暫時(shí)采用默認(rèn)上傳位置即可。這個(gè)例子中我們從本地上傳一個(gè)木質(zhì)紋理圖片。大家可以自由選擇一個(gè)圖片。選擇圖片并上傳后，其尺寸、格式以及預(yù)覽會顯示在對話框中。如果滿意了，就點(diǎn)擊“選擇”將圖片添加到舞臺上。

由于添加的圖片尺寸(370x280)比舞臺大，圖片會縮小顯示在舞臺中央。

為了使其全屏顯示，可以點(diǎn)擊選擇圖片，然后在IDE右側(cè)的屬性對話框中編輯其位置和大小使其全屏顯示。

接下來，我們?yōu)槲枧_添加一段文字。首先在IDE上方的時(shí)間線上，點(diǎn)擊時(shí)間線左下角的“新圖層”添加一個(gè)新的圖層。

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

下面我們來添加文字。從IDE左側(cè)的工具欄選擇”文字“， 并在舞臺上點(diǎn)擊鼠標(biāo)添加文字。

這是文字剛添加到舞臺的樣子。我們需要調(diào)整其屬性。

點(diǎn)擊左側(cè)工具欄上的選擇工具，然后選中添加的文字。文字的屬性會出現(xiàn)在右側(cè)的屬性面板中。

在屬性面板調(diào)整其參數(shù)到一個(gè)滿意的樣子。下面是一個(gè)調(diào)整好的樣子。

到此為止，我們已經(jīng)完成了第一個(gè)步驟：添加元素到舞臺。接下來，我們?yōu)樘砑拥奈淖侄x一個(gè)簡單的動畫。在繼續(xù)之前，我們先保存一下作品，點(diǎn)擊IDE上部工具條上的”保存”按鈕，或者從文件菜單中選擇“文件/保存”。第一次保存作品時(shí)，需要提供一個(gè)文件名稱。保存時(shí)的舞臺截圖，將作為作品的縮略圖存在。今后再次保存時(shí)，不需要提供文件名，而作品縮略圖會根據(jù)最新的舞臺截圖進(jìn)行更新。

為了制作動畫，我們需要先將內(nèi)容的幀數(shù)擴(kuò)展至一個(gè)適合的數(shù)據(jù)。默認(rèn)情況下，動畫內(nèi)容只有一幀，這個(gè)可以時(shí)間線面板上看到：

我們現(xiàn)在把動畫的幀數(shù)調(diào)整到20幀，以便制作動畫。在時(shí)間線上點(diǎn)擊圖層0，選中第20幀，然后單擊鼠標(biāo)右鍵，從出現(xiàn)的菜單中選擇“插入幀(F5)”，可以將圖層0的幀數(shù)擴(kuò)展至第20幀。也可以選中第20幀后，直接按下鍵盤的F5鍵，達(dá)到同樣的效果。

這時(shí)候時(shí)間線顯示如下。注意，圖層0已經(jīng)包含20幀，而圖層1仍然只有一幀。

注意，定義在圖層中的元素（圖像、文字等），只有在圖層的范圍內(nèi)才可見。為了理解這一點(diǎn)，可以點(diǎn)擊工具欄上的播放按鈕，在舞臺上預(yù)覽作品。

注意觀察時(shí)間線的當(dāng)前幀變化，以及舞臺上文字和背景圖片的可見性。由于我們要在文字上定義動畫，因此，按照上述同樣的方法，選中圖層1，然后將其也擴(kuò)展至20幀。

終于可以開始添加動畫了。在時(shí)間線上，單擊圖層1中1到20幀的任何一幀，單擊右鍵，在出現(xiàn)的菜單中選擇“插入關(guān)鍵幀動畫”。

這時(shí)候，圖層1變成了淺綠色，并且在圖層范圍的最后一幀（第20幀）出現(xiàn)了一個(gè)紅色的點(diǎn)。這表明，動畫已經(jīng)添加成功了。圖層1中的第1幀和第20幀，定義了動畫的開始、結(jié)束幀。中間的幀就可以由系統(tǒng)自動通過插值產(chǎn)生了。我們可以為圖層1中包含的（文字）元素在動畫的開始和結(jié)束幀分別定義不同的（位置、大小等）屬性，從而產(chǎn)生動畫效果。

在時(shí)間線上選中圖層1的第1幀，選中IDE左側(cè)的“變形”工具，然后在舞臺上選中文字，可以對文字進(jìn)行縮放、旋轉(zhuǎn)等操作。也可以直接在屬性面板調(diào)整其屬性。在這個(gè)例子中，我們把文字的初始透明度設(shè)置為10，旋轉(zhuǎn)設(shè)為180度，大小縮小一點(diǎn)，并放置在舞臺中央。調(diào)整好的屬性如下圖所示。

保存作品。然后從工具欄點(diǎn)擊“播放”在舞臺上預(yù)覽動畫效果。也可以在工具欄上點(diǎn)擊“預(yù)覽”在一個(gè)單獨(dú)的窗口預(yù)覽動畫效果。還可以在工具欄點(diǎn)擊”二維碼“獲取一個(gè)二維碼，然后在手機(jī)上預(yù)覽產(chǎn)生的動畫。

默認(rèn)生成的動畫會不停的循環(huán)，如果不想要循環(huán)，可以通過菜單項(xiàng)”動畫/循環(huán)“來切換循環(huán)狀態(tài)。

到此為止，我們已經(jīng)完成了添加元素、定義動畫兩個(gè)步驟。這已經(jīng)可以滿足相當(dāng)一部分網(wǎng)頁動畫的需求了。下面我們進(jìn)一步為動畫添加一個(gè)最簡單的跳轉(zhuǎn)行為。就是當(dāng)點(diǎn)擊文字時(shí)，跳轉(zhuǎn)到一個(gè)目標(biāo)網(wǎng)頁。

暫停舞臺的動畫播放，選中背景圖片，然后在其屬性面板上，為其添加一個(gè)”鏈接“行為，地址指向百度，打開方式選擇“外部打開”。

再次通過預(yù)覽窗口（注意不是在舞臺上播放）查看動畫。點(diǎn)擊背景圖片，將會導(dǎo)航至網(wǎng)頁。至此就完成了一個(gè)簡單的動畫，不需要編碼的H5動畫，最后一步就是導(dǎo)出。

為了在你的網(wǎng)站使用這個(gè)動畫內(nèi)容，最簡單的方式，就是導(dǎo)出完整的動畫包，并內(nèi)嵌到自己的網(wǎng)站中。記住在導(dǎo)出前保存你的作品。然后在工具欄選擇導(dǎo)出按鈕，或者在菜單中選擇”文件/導(dǎo)出/動畫”。該操作會將動畫內(nèi)容打包下載到你的硬盤上。

導(dǎo)出的動畫包中包含有動畫播放所需要的腳本、樣式、頁面、圖像等。雙擊其中的index.html文件可以直接在瀏覽器中觀看動畫內(nèi)容或者通過iframe的方式嵌入動畫。

注意事項(xiàng)

工具中有很多動畫效果和交互功能，比如在微信中點(diǎn)擊、滑動、搖一搖等大家自行挖掘添加即可。

以上就是Mugeda在線制作工具制作微信H5頁面動畫流程，大家學(xué)會了嗎？希望這篇文章能對大家有所幫助！

最新評論