# 小圖標動畫
添加素材:如下圖,在“舞臺”的“屬性”面板下將其填充色調整為淺藍色,點擊“素材庫”按鈕添加相應的火箭圖片素材,調整火箭大小、位置等

添加動畫:在圖層第10幀的位置“插入關鍵幀動畫”,設置火箭從底部彎曲滑向上端并放大的動畫效果


選中第1幀,在其“屬性”面板下調整“運動”效果為“阻尼退出”

為方便辨識,將“圖層0”重命名為“火箭”,新建圖層“圓”

在“圓”圖層上添加一個圓形覆蓋住火箭,同時將“圓”圖層拖動至“火箭”圖層下方,調整圖層之間的覆蓋位置,調整圓形的填充色、線條色

在“圓”圖層第10幀“插入關鍵幀”,刪除關鍵幀之前的圓形物體


選中所有圖層20幀,右鍵→“插入幀”

在“圓”圖層10幀之后“插入關鍵幀動畫”,設置其從小變大的動畫效果

鼠標按照“圓”圖層最后一幀不放,將其向前拖動至16幀,縮小圓形動畫的運動時間

刪除“圓”圖層第8、9兩幀

補齊“圓”圖層第19、20幀

選中“圓”圖層第一個關鍵幀,在圓形元素“屬性”面板下調整“運動”效果為“阻尼退出”

復制“圓”圖層動畫定格幀(第14幀)的圓形,粘貼進新建圖層“邊框”第14幀的關鍵幀上。


取消“邊框”圖層上的圓形組合,修改圓形的填充色(透明色)、線條顏色(淺藍)、大小(5)等

在“邊框”圖層14幀之后“插入進度動畫”

制作光線效果:新建圖層“光1”,在第9幀“插入關鍵幀”,添加線條,調整位置、大小、顏色

同理,新建“光2”“光3”“光4”,分別在第9幀插入關鍵幀,并在“舞臺”上添加相應的線條,制作出發散的光線效果。

制作光線動畫效果:在“光1”至“光4”四個圖層第9幀之后“插入曲線變形動畫”

縮小四個圖層在最后一幀位置上的線條長度

刪除“光1”至“光4”四個圖層9幀之后的某些幀縮短動畫時間

調節“光1”至“光4”每個圖層第一個關鍵幀的“運動”效果為“淡出”

新建“云”圖層,添加云的圖片素材,調整云的大小、位置

在“云”圖層的第13幀“插入關鍵幀”,刪除“云”圖層13幀之前的物體

為“云”圖層13幀之后“插入關鍵幀動畫”,設置云素材由下往上移動的動畫,同時,在“屬性”面板下調節“運動”效果為“阻尼退出”,同時調整“云”圖層排列位置

新建圖層“遮罩”,在“遮罩”圖層13幀“插入關鍵幀”,復制“圓”圖層上的圓形粘貼到“遮罩”圖層第13幀

如下圖,在“云”圖層下方新建“星星”圖層,在“星星”圖層第20幀“插入關鍵幀”,添加星星圖片素材

如下圖,選中“火箭”至“圓”圖層的第30幀,右鍵→“插入幀”

為“星星”圖層“插入關鍵幀動畫”,設置星星向下移動的動畫效果,并在“屬性”面板下將“運動”效果選擇為“淡出”

選中“遮罩”圖層,點擊“轉為遮罩層”按鈕

選中“星星”圖層,點擊“添加到遮罩”按鈕,將“星星”圖層添加進“遮罩”圖層的遮罩范圍內

新建“文字”圖層,在25幀“插入關鍵幀”,添加一個文本框,輸入文字內容,調整大小、字體、顏色等屬性

在“文字”圖層“插入進度動畫”,使文字出現打字機進入的效果

新建“音樂”圖層,點擊“素材庫”選擇添加所需的音頻素材,點擊“添加”,將音頻圖標移至“舞臺”之外,在音頻元素的“屬性”面板下選擇“自動播放”為“是”

鼠標選中“聲音”圖層第1幀,按住不放將其拖至第2幀,即添加好了音效

觀看本節視頻教程:
http://cdn1.mugeda.com/course/4/4.2/4.2.1.mp4
- 閱讀須知
- Mugeda平臺介紹
- 新手必看
- Mugeda是什么?
- 快速入門
- 快速制作炫酷動畫
- 無代碼添加交互
- 學會使用Mugeda模板
- 如何快速修改木疙瘩模板
- 作品創建前必讀
- 手機屏幕適配方法
- 圖片處理
- 聲音及視頻處理
- 屏幕適配設置
- 發布和預覽鏈接的區別
- H5作品相關設置
- 如何發布作品
- 功能詳解
- 界面與舞臺
- 簡介
- 縮放層數據
- 翻頁的相關設置
- 關鍵幀和頁面的命名
- 加載的相關設置
- 物體屬性設置
- 元件界面介紹
- 濾鏡效果
- 屏幕適配范圍與安全框
- 輔助線功能
- 首頁加載的靜態導出
- 素材與媒體
- 圖片上傳/素材庫
- 文本/文本段落
- 網頁
- 幻燈片
- 視頻
- 聲音
- 聲音的控制
- 繪制素材
- 云字體
- 曲線圖表
- 拖動動畫
- 虛擬現實
- 粘貼第三方文字和圖片
- 常用編輯操作
- 鎖定物體
- 節點工具
- 路徑工具
- 排列、對齊、變形、組合、合并功能
- 轉換為元件
- 導入PSD及注意事項
- 聲音和視頻的壓縮
- 聲音和視頻的交互控制
- 動畫
- 時間軸及圖層
- 選擇工具
- 關鍵幀動畫
- 路徑動畫
- 進度動畫
- 曲線變形動畫
- 預置動畫
- 元件動畫
- 分頁/加載頁
- 遮罩動畫
- 動畫運動
- 標尺和輔助線的使用
- 復制幀/圖層
- 如何實現動畫控制
- 文字變形動畫
- 運動曲線編輯
- 行為
- 行為添加以及觸發事件
- 幀的行為
- 頁的行為
- 播放元件片段
- 改變元素屬性
- 改變圖片
- 設置定時器
- 手機功能
- 跳轉鏈接
- 拖動的多種邏輯關系
- 舞臺截圖
- 改變行為屬性增加方框顏色
- 控件
- 陀螺儀
- 定時器
- 隨機數
- 擦玻璃
- 點贊
- 繪畫板
- 投票
- 抽獎
- 連線
- 拖動容器
- 投票、抽獎實時數據管理
- 計數器組件
- 排行榜
- 微信功能
- 微信頭像/微信昵稱
- 定制圖片
- 錄制聲音
- 分享信息
- 表單
- 自定義表單
- 系統默認表單
- 定制文字
- 定制賀卡文字
- 關聯綁定
- 舞臺動畫關聯
- 元件動畫關聯
- 屬性關聯
- 自動關聯
- 公式關聯
- 條件判斷
- 邏輯表達式判斷
- 多種表達式的寫法
- Mugeda API
- MugedaAPI整體結構
- 在動畫中插入腳本
- 使用自定義回調函數
- 通過API定義微信轉發
- 獲取Mugeda后臺數據
- 部署第三方服務器
- 案例講解
- 展示動畫
- 邀請函
- 招聘
- 個人簡歷
- 可定制賀卡
- 手機廣告
- 長按手指控制動畫播放
- 2016網易娛樂圈畫傳
- 一只挖空心思的行禮箱
- 科幻風格H5的制作
- 拖動長圖類H5制作
- 小爺吳亦凡案例
- UI原型
- 小圖標動畫
- 用Mugeda巧做GIF
- 小游戲
- 拍宇航員
- 手術刀
- 測試題
- 拖動選擇
- 概率抽獎
- 聲音測試題
- 真假朋友大質檢
- 圖片合成類H5的制作
- 60秒幫你擺脫朋友圈
- H5錄音機
- 制作接力型H5
- 微信/定制
- 和寶寶聊天
- 和奧運冠軍合影
- 熱門案例(試看)
- 什么才是福
- 教你玩轉密室逃脫類H5制作
- 星巴克咖啡
- 小爺吳亦凡
- 誰是足球明星
- 拷問拍拍618機密
- 用HTML5做交互課件
- CEO邀你群聊
- 里約大冒險
- 天貓宇宙邀請函
- 快閃
- H5換裝小游戲
- 視差類型H5制作
- H5版flappy bird
- 連連看小游戲
- 用遮罩做鏡頭特效
- 網易5筆畫愛
- 剪刀石頭布小游戲
- 交互動畫類H5制作
- 最新功能(1213)
- 如何使用排行榜
- 小功能更新
- 鎖定邊距
- 其他教程
- Mugeda簡約版介紹
- 如何自定義綁定微信公眾號
- 教師版賬號詳情介紹及使用方法