H5動(dòng)畫在微信朋友圈愈來(lái)愈火爆，看到各種腦洞大開(kāi)的動(dòng)畫，你是不是也有量一量自己腦洞大小的沖動(dòng)？今天小編為大家分享Mugeda在線制作工具如何制作微信H5頁(yè)面動(dòng)畫方法，一起來(lái)看看吧！
這里我用的工具室Mugeda在線制作工具，建議使用chrome瀏覽器會(huì)支持的比較好。
方法/步驟
大體的流程是這樣的：
1. 添加元素（圖片、文字等）到舞臺(tái)；
2. 為添加的元素定義動(dòng)畫；
3. 定義和用戶的交互行為（例如點(diǎn)擊跳轉(zhuǎn)等）；
4. 導(dǎo)出或發(fā)布內(nèi)容；
首先創(chuàng)建
然后需要選擇一個(gè)動(dòng)畫尺寸。在這個(gè)例子中我們選擇300x250, 這是一個(gè)典型的適合移動(dòng)設(shè)備動(dòng)畫的尺寸。選擇尺寸后，按“確定”繼續(xù)。
準(zhǔn)備好一個(gè)大小為300x250的舞臺(tái)，這時(shí)候我們就可以開(kāi)始制作動(dòng)畫內(nèi)容
我們?yōu)槲枧_(tái)添加一個(gè)背景圖片。從IDE左側(cè)的工具欄上選擇“圖片”按鈕，可以打開(kāi)選擇圖片的對(duì)話框
選擇圖片對(duì)話框是在制作動(dòng)畫中用的最多的對(duì)話框之一。他提供了三種上傳圖片的方式：選擇本地文件，輸入網(wǎng)址，通過(guò)拖拽批量上傳。上傳的時(shí)候還可以指定一個(gè)目標(biāo)文件夾。我們暫時(shí)采用默認(rèn)上傳位置即可。這個(gè)例子中我們從本地上傳一個(gè)木質(zhì)紋理圖片。大家可以自由選擇一個(gè)圖片。選擇圖片并上傳后，其尺寸、格式以及預(yù)覽會(huì)顯示在對(duì)話框中。如果滿意了，就點(diǎn)擊“選擇”將圖片添加到舞臺(tái)上。
由于添加的圖片尺寸(370x280)比舞臺(tái)大，圖片會(huì)縮小顯示在舞臺(tái)中央。
為了使其全屏顯示，可以點(diǎn)擊選擇圖片，然后在IDE右側(cè)的屬性對(duì)話框中編輯其位置和大小使其全屏顯示。
接下來(lái)，我們?yōu)槲枧_(tái)添加一段文字。首先在IDE上方的時(shí)間線上，點(diǎn)擊時(shí)間線左下角的“新圖層”添加一個(gè)新的圖層。
新添加的圖層會(huì)自動(dòng)命名為”圖層1”, 并添加在圖層0的上面。
下面我們來(lái)添加文字。從IDE左側(cè)的工具欄選擇”文字“， 并在舞臺(tái)上點(diǎn)擊鼠標(biāo)添加文字。
這是文字剛添加到舞臺(tái)的樣子。我們需要調(diào)整其屬性。
點(diǎn)擊左側(cè)工具欄上的選擇工具，然后選中添加的文字。文字的屬性會(huì)出現(xiàn)在右側(cè)的屬性面板中。
在屬性面板調(diào)整其參數(shù)到一個(gè)滿意的樣子。下面是一個(gè)調(diào)整好的樣子。
到此為止，我們已經(jīng)完成了第一個(gè)步驟：添加元素到舞臺(tái)。接下來(lái)，我們?yōu)樘砑拥奈淖侄x一個(gè)簡(jiǎn)單的動(dòng)畫。在繼續(xù)之前，我們先保存一下作品，點(diǎn)擊IDE上部工具條上的”保存”按鈕，或者從文件菜單中選擇“文件/保存”。第一次保存作品時(shí)，需要提供一個(gè)文件名稱。保存時(shí)的舞臺(tái)截圖，將作為作品的縮略圖存在。今后再次保存時(shí)，不需要提供文件名，而作品縮略圖會(huì)根據(jù)最新的舞臺(tái)截圖進(jìn)行更新。
為了制作動(dòng)畫，我們需要先將內(nèi)容的幀數(shù)擴(kuò)展至一個(gè)適合的數(shù)據(jù)。默認(rèn)情況下，動(dòng)畫內(nèi)容只有一幀，這個(gè)可以時(shí)間線面板上看到：
我們現(xiàn)在把動(dòng)畫的幀數(shù)調(diào)整到20幀，以便制作動(dòng)畫。在時(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)才可見(jiàn)。為了理解這一點(diǎn)，可以點(diǎn)擊工具欄上的播放按鈕，在舞臺(tái)上預(yù)覽作品。
注意觀察時(shí)間線的當(dāng)前幀變化，以及舞臺(tái)上文字和背景圖片的可見(jiàn)性。由于我們要在文字上定義動(dòng)畫，因此，按照上述同樣的方法，選中圖層1，然后將其也擴(kuò)展至20幀。
終于可以開(kāi)始添加動(dòng)畫了。在時(shí)間線上，單擊圖層1中1到20幀的任何一幀，單擊右鍵，在出現(xiàn)的菜單中選擇“插入關(guān)鍵幀動(dòng)畫”。
這時(shí)候，圖層1變成了淺綠色，并且在圖層范圍的最后一幀（第20幀）出現(xiàn)了一個(gè)紅色的點(diǎn)。這表明，動(dòng)畫已經(jīng)添加成功了。圖層1中的第1幀和第20幀，定義了動(dòng)畫的開(kāi)始、結(jié)束幀。中間的幀就可以由系統(tǒng)自動(dòng)通過(guò)插值產(chǎn)生了。我們可以為圖層1中包含的（文字）元素在動(dòng)畫的開(kāi)始和結(jié)束幀分別定義不同的（位置、大小等）屬性，從而產(chǎn)生動(dòng)畫效果。
在時(shí)間線上選中圖層1的第1幀，選中IDE左側(cè)的“變形”工具，然后在舞臺(tái)上選中文字，可以對(duì)文字進(jìn)行縮放、旋轉(zhuǎn)等操作。也可以直接在屬性面板調(diào)整其屬性。在這個(gè)例子中，我們把文字的初始透明度設(shè)置為10，旋轉(zhuǎn)設(shè)為180度，大小縮小一點(diǎn)，并放置在舞臺(tái)中央。調(diào)整好的屬性如下圖所示。
保存作品。然后從工具欄點(diǎn)擊“播放”在舞臺(tái)上預(yù)覽動(dòng)畫效果。也可以在工具欄上點(diǎn)擊“預(yù)覽”在一個(gè)單獨(dú)的窗口預(yù)覽動(dòng)畫效果。還可以在工具欄點(diǎn)擊”二維碼“獲取一個(gè)二維碼，然后在手機(jī)上預(yù)覽產(chǎn)生的動(dòng)畫。
默認(rèn)生成的動(dòng)畫會(huì)不停的循環(huán)，如果不想要循環(huán)，可以通過(guò)菜單項(xiàng)”動(dòng)畫/循環(huán)“來(lái)切換循環(huán)狀態(tài)。
到此為止，我們已經(jīng)完成了添加元素、定義動(dòng)畫兩個(gè)步驟。這已經(jīng)可以滿足相當(dāng)一部分網(wǎng)頁(yè)動(dòng)畫的需求了。下面我們進(jìn)一步為動(dòng)畫添加一個(gè)最簡(jiǎn)單的跳轉(zhuǎn)行為。就是當(dāng)點(diǎn)擊文字時(shí)，跳轉(zhuǎn)到一個(gè)目標(biāo)網(wǎng)頁(yè)。
暫停舞臺(tái)的動(dòng)畫播放，選中背景圖片，然后在其屬性面板上，為其添加一個(gè)”鏈接“行為，地址指向百度，打開(kāi)方式選擇“外部打開(kāi)”。
再次通過(guò)預(yù)覽窗口（注意不是在舞臺(tái)上播放）查看動(dòng)畫。點(diǎn)擊背景圖片，將會(huì)導(dǎo)航至網(wǎng)頁(yè)。至此就完成了一個(gè)簡(jiǎn)單的動(dòng)畫，不需要編碼的H5動(dòng)畫，最后一步就是導(dǎo)出。
為了在你的網(wǎng)站使用這個(gè)動(dòng)畫內(nèi)容，最簡(jiǎn)單的方式，就是導(dǎo)出完整的動(dòng)畫包，并內(nèi)嵌到自己的網(wǎng)站中。記住在導(dǎo)出前保存你的作品。然后在工具欄選擇導(dǎo)出按鈕，或者在菜單中選擇”文件/導(dǎo)出/動(dòng)畫”。該操作會(huì)將動(dòng)畫內(nèi)容打包下載到你的硬盤上。
導(dǎo)出的動(dòng)畫包中包含有動(dòng)畫播放所需要的腳本、樣式、頁(yè)面、圖像等。雙擊其中的index.html文件可以直接在瀏覽器中觀看動(dòng)畫內(nèi)容或者通過(guò)iframe的方式嵌入動(dòng)畫。
注意事項(xiàng)
工具中有很多動(dòng)畫效果和交互功能，比如在微信中點(diǎn)擊、滑動(dòng)、搖一搖等大家自行挖掘添加即可。
以上就是Mugeda在線制作工具制作微信H5頁(yè)面動(dòng)畫流程，大家學(xué)會(huì)了嗎？希望這篇文章能對(duì)大家有所幫助！
