想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 


 点赞功能为系统默认累加，每个用户只能允许点赞一次。如下图，在“控件”栏下找到“点赞”按钮，点击选中，在“舞台”上拖拉出一个点赞控件。


图2.4-36

点击预览，发现点1次，点赞上方数由0变成1，再次点击“取消点赞”，“1变成0”。


图2.4-37

选中“点赞”控件，在其“属性”面板下可修改各种属性，例如调整其文字颜色、位置、大小等。


图2.4-38

在每个人物下面添加一个“点赞”，即可设置成投票的形式。


图2.4-39
 
注：点赞的文字默认是白色，所以如果背景色是默认色，可以通过右侧属性栏来调整颜色，方便查看，如下图：


 
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 在“控件”工具栏下找到“擦玻璃”按钮，点击选中，在“舞台”上以拖拉的方式生成一个擦玻璃控件


图2.4-28

选中“舞台”上的擦玻璃控件，在其“属性”面板下可设置其各种属性，例如为其命名，改变背景图片（擦除后的图片）、前景图片（擦除前的图片）等。如下图，点击“背景图片”右边的“+”符号


图2.4-29

在弹出的“媒体库”对话框中选择一张图片素材。点击“添加”。


图2.4-30

同理，添加好前景图片


图2.4-31

点击“预览”，发现擦除了前景图片后，背景图片即出现。


图2.4-32
 
另外，我们还可以设置橡皮擦大小和剩余比例（即：擦除图片的大小和擦出剩余多少显示背景图片）



擦玻璃控件特有的触发条件：如下图，点击“舞台”上擦玻璃控件的“添加/编辑行为”按钮


图2.4-33

在弹出的“编辑行为”对话框下选择“下一页”，点击“触发条件”的下拉菜单，选择触发条件为：“擦玻璃完成”。


图2.4-34

点击添加新页面，点击预览观察效果，发现当我们将玻璃擦完后，自动跳转至下一页


图2.4-35
 
恢复擦玻璃初始状态：我们还可以通过选中元素，点击“添加/编辑行为”按钮——“动画播放控制”来设置，如下图：


 
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 

 在“控件”工具栏下找到“随机数”按钮，点击选中，在“舞台”上生成一个随机数。


图2.4-21

在其“属性”面板下可设置各种属性，例如为其命名为“随机数”，修改随机数固有属性：最小值为“0”、最大值为“500”、更新间隔为“0.1秒”，可点击预览效果。


图2.4-22

随机数的关联动画：以一个随机数关联图片的左坐标为案例进行讲解。

如下图，添加一张图片素材至“舞台”，随之点击添加随机数至“舞台”，在随机数的“属性”面板下改变其填充色为白色方便观察。


图2.4-23

设置随机数的固有属性：最大值为“500”、更新间隔为“1秒”


图2.4-24

选中“舞台”上的图片，在图片“属性”面板下点击图片“左”数值右边的“关联”按钮


图2.4-25

在“左”的关联下拉菜单下设置关联属性：
关联对象：“随机数”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“0”时被控量=“0”
当主控量=“500”时被控量=“-500”


图2.4-26

点击“预览”，发现每1秒钟图片都会随着随机数的数值变化位置


图2.4-27

 在“控件”工具栏下找到“定时器”按钮，点击选中，在“舞台”上生成一个定时器。


图2.4-10

可在其“属性”栏下设置调整定时器各项属性，例如为定时器命名为“A”、改变其颜色、文本、精度、计时方向、是否循环等。


图2.4-11

1.定时器的关联动画

定时器的功能应用：以一个定时器关联火箭上坐标的案例进行讲解
如下图，新建一个图层1，选中图层1第1帧，点击“素材库”，在“舞台”上添加一个火箭图像素材，使用“变形”工具调整火箭大小、位置等。


图2.4-12

选中火箭素材，在其“属性”面板下点击其“上”数值右边的“关联”按钮


图2.4-13

在“上”的关联下拉菜单下设置关联属性：
关联对象：“A”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“30”时被控量=“408”
当主控量=“0”时被控量=“0” 


图2.4-14

点击“预览”，发现火箭随着定时器数值的减少而往上移动


图2.4-15

同时，若将定时器的“精度”调整为“秒”时，观察动画效果，会发现火箭的移动出现卡顿效果。因此在用定时器制作动画时，为保证物体移动顺畅，最好将“精度”调整为“毫秒”。


图2.4-16

2.定时器的独有触发条件

如下图，点击定时器的“添加/编辑行为”按钮


图2.4-17

在弹出的“编辑行为”对话框下选择“下一页”，点击“触发条件”的下拉菜单，发现会多出两个触发条件：“定时器时间到”“定时器开始计时”，选择“定时器时间到”。


图2.4-18

在定时器的“属性”面板下将定时器长度（时间）改为“3秒”，并点击添加一个新页面


图2.4-19

点击“预览”，发现定时器时间到后会自动跳转至第2页面。


图2.4-20

本节视频教程请点击此处。

 在工具栏内的“控件”工具栏下找到“陀螺仪”按钮，点击选中，在“舞台”上生成一个陀螺仪。


图2.4-1

可在其“属性”面板下调整陀螺仪的各个属性，例如为其命名为“陀螺仪”，改变其颜色、文本内容、陀螺仪类型（绕X轴旋转角、绕Y轴旋转角、绕Z轴旋转角）


图2.4-2

因为陀螺仪功能只限定于手机，PC端无法演示，因此可先保存作品，将其命名为“陀螺仪”


图2.4-3

通过“通过二维码共享”功能生成二维码，用手机扫描进行查看


图2.4-4

陀螺仪的数值关联：陀螺仪的数值可以关联到任何物体的任何数值性元素，接下来我们以一个陀螺仪关联图片左坐标的案例来解释陀螺仪数值的提取方法。

如下图，添加一张图片至“舞台”，点击“陀螺仪”按钮添加一个陀螺仪至“舞台”，为方便清楚观看，改变陀螺仪填充色为白色。


图2.4-5

在“属性”面板下改变陀螺仪的类型为“绕Y轴旋转角”
 

图2.4-6

点击选中“舞台”的图片，在图片“属性”面板下找到“左”数值右边的“关联”按钮，点击。


图2.4-7

在“左”的关联下拉菜单下设置关联属性：
关联对象：“陀螺仪”
关联属性：“文本取值”
关联方式：“自动关联”
当主控量=“-50”时被控量=“0”
当主控量=“50”时被控量=“649.8”（图像的极左值）


图2.4-8

点击“保存”，通过扫描二维码查看我们的作品，晃动手机即可看到图片与陀螺仪数值变化的关联情况。


图2.4-9

本节视频教程请点击此处。

 1.添加链接方法一

点击“舞台”上的“跳转链接”按钮元素的“添加/编辑行为”，在弹出的“编辑行为”对话框中选择：“属性控制”→“跳转链接”→触发条件：点击。点击“编辑”按钮进入“参数”对话框



图2.4-102



图2.4-103

在“参数”对话框内输入需跳转页面的链接，选择“打开位置”为“当前页面”（在当前H5页面打开）或“新窗口”（打开一个新窗口）等，点击“确认”。即设置了点击“跳转链接”按钮便会跳转到目的页面。



图2.4-104

删除编辑行为：如下图，点击“舞台”上“跳转链接”按钮的“添加/编辑行为”按钮进入“编辑行为”对话框，点击原先添加的“跳转链接”行为右边的“×”符号，点击弹出的“确认删除”，删除“跳转链接”行为。


图2.4-105
 
2.添加链接方法二

在“跳转链接”按钮元素右侧的“属性”面板下的“动作”下拉菜单中选择“链接”



图2.4-106

在弹出的链接选框中输入相应链接，选择相应“打开位置”



图2.4-107
 
注：链接前面一定要加“http://”
 

参考内容：素材与媒体（声音）

参考内容：定义分享信息
 
 

（跳转到《2.7表单》第六部分：表单提交）

参考内容：素材与媒体（可视化图表）

参考内容：改变图片

参考内容：录制用户声音

内容：播放声音/停止所有声音/控制声音
 
参考内容：素材与媒体（声音）

内容：播放视频/停止所有视频/控制视频
 
参考内容：素材与媒体（视频）

手机功能包括打电话、发短信、发送邮件、地图等功能。
 
本节视频教程请点击此处。

1.打电话

点击“舞台”上的“打电话”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“手机功能”→“打电话”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-89

图2.4-90

在“参数”对话框内输入电话号码，点击“确认”。即设置了点击“打电话”按钮便会询问是否拨出之前输入的电话号码的行为（在手机端）。


图2.4-91

2.发短信

点击“舞台”上的“发短信”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“手机功能”→“发短信”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-92

图2.4-93

在“参数”对话框内输入电话号码与消息内容，点击“确认”。即设置了点击“发短信”按钮便会询问是否发出短信内容至之前输入的电话号码的行为（在手机端）。


图2.4-94

3.发送邮件

点击“舞台”上的“发送邮件”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“手机功能”→“发送邮件”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-95

图2.4-96

在“参数”对话框内输入邮箱地址、邮件标题、邮件内容，点击“确认”。即设置了点击“发送邮件”按钮便会询问是否发出邮件内容至之前输入的邮箱地址的行为（在手机端）。


图2.4-97

4.地图

点击“舞台”上的“地图”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“手机功能”→“地图”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-98

图2.4-99

在“参数”对话框内输入地址、关键字，选择地图类型等，点击“确认”。即设置了点击“地图”按钮便会出现所指示地点的地图行为。


图2.4-100

如下图，点击“预览”观察行为效果


图2.4-101

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 设置定时器行为有暂停定时器、继续定时器、重置定时器。

1.添加定时器

在操作页面左边工具栏的“控件”栏下，找到“定时器”按钮，点击添加一个定时器在“舞台”上。


图2.4-76

在其“属性”面板内将其命名为“定时器”


图2.4-77

2.暂停定时器

点击“舞台”上的“暂停”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“设置定时器”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-78


图2.4-79

在“参数”对话框内设置参数：
定时器名称：“定时器”；
设置状态：“暂停定时器”；
点击“确认”，即设置好了点击“暂停”按钮，即暂停“舞台”上定时器


图2.4-80

3.继续定时器

点击“舞台”上的“继续”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“设置定时器”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-81


图2.4-82

在“参数”对话框内设置参数：
定时器名称：“定时器”；
设置状态：“继续定时器”；
点击“确认”，即设置好了点击“继续”按钮，即继续“舞台”上定时器


图2.4-83

4.重置定时器

点击“舞台”上的“重置”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“设置定时器”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-84

图2.4-85

在“参数”对话框内设置参数：
定时器名称：“定时器”；
设置状态：“重置定时器”；
点击“确认”，即设置好了点击“重置”按钮，即重置“舞台”上定时器


图2.4-86
选中“舞台”上的定时器，在其“属性”面板内改变相关属性，例如，将“是否循环”选项改为“循环”


图2.4-87

点击预览效果


图2.4-88
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 改变图片即当点击或触发改变图片行为时，图片即会被改变。
如下图，分别将两张上传至“舞台”上的图片取名为“A”“B”


图2.4-70

图2.4-71

点击“改变图片”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“改变图片”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-72

在“参数”对话框内设置参数：
目标元素：“A”；
源元素名称：“B”；
点击“确认”，即设置好了点击“改变图片”按钮，即将图片A变成图片B的行为。


图2.4-73

点击“预览”


图2.4-74

同时，我们也可将需被改变的图片放置“舞台”中心，将用于替换的图片放置“舞台”之外不被用户看见，以此形成点击改变图片的效果。


图2.4-75

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 本小节内容，如下图，观察元素的“属性”面板，在“属性”面板下无论是宽、高、左、上、透明度等可提取到的数值都可作为改变元素属性的属性。


图2.4-59

如下图，命名图像为“Mugeda”


图2.4-60

在“改变元素属性”按钮元素上添加改变元素属性行为。点击“舞台”上“改变元素属性”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“属性控制”→“改变元素属性”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-61

在“参数”对话框内设置参数：
元素名称：“Mugeda”；
元素属性：“透明度”；
赋值方式：“用设置的值替换现有值”；
取值：“20”。
点击“确认”。即设置好了点击“改变元素属性”按钮，图像（Mugeda）的透明度值即从100变成20。


图2.4-62

点击预览效果


图2.4-63

同理，点击“改变元素属性”按钮元素的“添加/编辑行为”按钮，点击“编辑”按钮，在“参数”对话框内改变“元素属性”为“左”，其他参数不变。即设置好了点击“改变元素属性”按钮，图像（Mugeda）“左”的取值由原来数值（此案例为89.5）变成20（即图像与舞台左边的距离变成20，图像位置由右向左移动）的行为。


图2.4-64

图2.4-65

点击预览效果，发现点击“改变元素属性”按钮时图像位置由右向左移动至离“舞台”左20个值的距离。


图2.4-66

同理，点击“改变元素属性”按钮元素的“添加/编辑行为”按钮，点击“编辑”按钮，在“参数”对话框内改变“赋值方式”为“在现有值基础上增加”，其他参数不变，点击“确认”。即设置好了点击“改变元素属性”按钮，图像（Mugeda）“左”的取值在原来数值（此案例为89.5）基础上增加20（即图像与舞台左边的距离增加20，图像位置由左向右移动）的行为。


图2.4-67

点击预览，发现每点击“改变元素属性”按钮元素，图像会向右移动20个值（即图像离“舞台”左的距离增加20个值）


图2.4-68

同理，在“参数”对话框内，在“取值”输入框输入“-20”，即可设置图像距离往反方向改变的行为


图2.4-69

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 本小节以案例的形式讲解。
 
本案例在讲解播放元件片段的各种行为之前，已做好一些基础铺垫：设置元件1动画如下图：

第1帧设置一个“暂停”行为


图2.4-48

第1至20帧设置火箭从下往上飞的动画行为


图2.4-49

第21-40帧设置火箭从上往下飞的动画行为


图2.4-50

将元件1拖至“舞台”，设置播放元件片段行为。点击“向上”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“播放元件片段”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-51

图2.4-52

在“参数”对话框内设置参数：
元件示例名称：“火箭”；
是否循环：“循环”；
起始帧号：“2”；
结束帧号：“20”。
点击“确认”。即设置好了点击“向上”按钮，播放元件1（火箭）第2至20帧动画（即向上飞的动画效果）


图2.4-53

点击“向下”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“播放元件片段”→触发条件：点击。点击“编辑”按钮进入“参数”对话框


图2.4-54

图2.4-55

在“参数”对话框内设置参数：
元件示例名称：“火箭”；
是否循环：“循环”；
起始帧号：“21”；
结束帧号：“40”。
点击“确认”。即设置好了点击“向下”按钮，播放元件1（火箭）第21至40帧动画（即向下飞的动画效果）


图2.4-56

需要注意的是在添加元件之前，要提前在元件“属性”面板中给元件命名，如下图，我们提前为元件1命名为“火箭”。


图2.4-57

点击预览效果


图2.4-58

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 页的行为包括“上一页”“下一页”“跳转到页”“禁止翻页”以及“恢复翻页”等行为。

1.跳转至下一页

如下图，点击“下一页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“下一页”→触发条件：点击。即设置好点击即跳转到下一页的行为。


图2.4-35


图2.4-36

2.跳转到页

如下图，点击“跳转到页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“跳转到页”→触发条件：点击。点击“编辑”按钮，进入“参数”对话框


图2.4-37


图2.4-38

在“参数”对话框内，选择页号为“2”，“翻页方式”为“淡入”，点击“确认”


图2.4-39

3.跳转至上一页

如下图，点击来到第2页，点击“上一页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“上一页”→触发条件：点击。即设置好点击即跳转到上一页的行为。


图2.4-40

图2.4-41

 如下图，可在右边“翻页”面板内设置“翻页效果””翻页方向”等属性


图2.4-42

4.禁止翻页

如下图，点击“禁止翻页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“禁止翻页”→触发条件：点击。即设置好点击即禁止上下翻页的行为。


图2.4-43

图2.4-44

5.恢复翻页

同理，点击“恢复翻页”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“恢复翻页”→触发条件：点击。即设置好点击即恢复上下翻页的行为


图2.4-45

图2.4-46

点击预览效果。值得注意的是，“禁止翻页”“恢复翻页”行为效果只针对系统默认的翻页效果，对前面设置的各种翻页按钮不起作用。


图2.4-47

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 帧的行为有“播放”“暂停”“下一帧”“上一帧”“跳转并播放”“跳转并停止”

本案例在讲解帧的各种行为之前，已做好一些基础铺垫：

1）新建好图层0、图层1、图层2；
2）如图，在图层0第1帧时，在“舞台”上添加“第一帧”文字元素；


图2.4-9

3）同理，在图层0的第2帧放置“第二帧”文字元素，第3帧放置“第三帧”文字元素，第4帧放置“第四帧”文字元素；


图2.4-10


图2.4-11


图2.4-12

4）在图层0第5至第18帧的位置，制作了一个矩形在舞台上由左向右移动的关键帧动画。


图2.4-13

5）在图层1上添加一个矩形，设置其编辑行为为“暂停”，触发条件为“出现”，并在第1至5帧都有该“暂停”行为。


图2.4-14

现在，我们以该案例来解释帧的行为。

1.播放
如图，点击回到时间轴上的第1帧，点击舞台上“播放”按钮元素的“添加/编辑行为”按钮，为其添加编辑行为


图2.4-15

在弹出的“编辑行为”对话框中选择：“动画播放控制”→“播放”→触发条件：点击。即设置好点击即播放的行为。


图2.4-16

2.暂停

同理，点击“暂停”按钮元素的“添加/编辑行为”按钮，在弹出的“编辑行为”对话框中选择：“动画播放控制”→“暂停”→触发条件：点击。即设置好点击即暂停的行为。


图2.4-17


图2.4-18

3.跳转至下一帧

同理，为“舞台”上的“下一帧”按钮元素添加编辑行为：“动画播放控制”→“下一帧”→触发条件：点击。即设置好点击即跳转下一帧的行为。


图2.4-19


图2.4-20

4.跳转至上一帧

同理，为“舞台”上的“上一帧”按钮元素添加编辑行为：“动画播放控制”→“上一帧”→触发条件：点击。即设置好点击即跳转上一帧的行为。


图2.4-21


图2.4-22

5.跳转并播放

同理，为“舞台”上的“跳转并播放”按钮元素添加编辑行为：“动画播放控制”→“跳转到帧并播放”→触发条件：点击。点击“编辑”按钮，进入“参数”对话框


图2.4-23


图2.4-24

在“参数”对话框内填写“帧号”为“6”，点击“确认”。即设置了点击“舞台”上的“跳转并播放”按钮，即可跳转到第6帧并播放动画


图2.4-25

6.跳转并停止

同理，为“舞台”上的“跳转并停止”按钮元素添加编辑行为：“动画播放控制”→“跳转到帧并停止”→触发条件：点击。点击“编辑”按钮，进入“参数”对话框


图2.4-26


图2.4-27

在“参数”对话框内填写“帧号”为“6”，点击“确认”。即设置了点击“舞台”上的“跳转并停止”按钮，即可跳转到第6帧并停止动画


图2.4-28

点击“预览”效果


图2.4-29

我们还可通过关键帧命名的形式添加设置帧的行为。如图，点击选中时间轴上的第4帧，在“关键帧名”输入框内输入关键帧名为“第四帧”


图2.4-30

点击“跳转并停止”按钮元素的“添加/编辑行为”按钮


图2.4-31

在“编辑行为”对话框内点击“编辑”按钮，进入“参数”对话框内，改变参数属性：删除帧号“6”，选择“帧名称”为“第四帧”，点击“确认”。


图2.4-32


图2.4-33

点击“预览”，发现当点击“跳转并停止”按钮时，动画跳转至第4帧并停止。


图2.4-34
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 1. 行为

如图，点击物体右边的“添加/编辑行为”按钮，弹出“编辑行为”对话框。


图2.4-1

行为包括“动画播放控制”“媒体播放控制”“属性控制”“微信定制”“手机功能”五大部分。


图2.4-2

其中，“动画播放控制”包括“暂停”“播放”“下一帧”“上一帧”等行为功能


图2.4-3

“媒体播放控制”包括“播放声音”“停止所有声音”“控制声音”“播放视频”等行为功能。


图2.4-4

“属性控制”包括“改变元素属性”“设置定时器”“跳转链接”“提交表单”等行为功能。


图2.4-5

“微信定制”包括“定制图片”“录制声音”“显示微信头像”“显示微信昵称”“定义分享信息”等行为功能。


图2.4-6

“手机功能”包括“打电话”“发短信”“发送邮件”“日历事件”“地图”等行为功能。


图2.4-7

2. 触发条件

如下图，选中左边任意行为例如“播放”行为，在右边“触发条件”下拉菜单中有“点击”“出现”“手指按下”“手指抬起”等多种触发行为的条件选项。通过选择不同的“触发条件”组合不同的行为可以形成无数种逻辑表达。


图2.4-8

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 关键帧动画默认是匀速运动，Mugeda可以设定不同的运动模式，比如淡入、淡出、阻尼进入、阻尼退出等。

如下图，添加一个火箭图像元素，在图层时间轴上设置好由下往上运动的关键帧动画效果


图2.3-96

选中起始帧位置，在火箭元素的“属性面板”中设置其“运动”效果为“震荡进入退出”，点击“播放”预览效果


图2.3-97


也可将“运动”效果设为“阻尼进入退出”，点击预览观察效果


图2.3-98

动画运动还可应用在曲线变形动画上，如图，在曲线变形动画的起始帧位置，改变“运动”效果为“碰撞进入退出”，点击预览观察效果


图2.3-99

图2.3-100
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 遮罩动画可实现很多特殊效果，需要至少两个图层，上面是“遮罩层”，下面是“被遮罩层”。遮罩层为显示区域，被遮罩层为显示的内容。
如下图，在图层0的第1帧添加一个按钮元素


图2.3-82

点击“新建图层”按钮新添加图层1、图层2


图2.3-83

鼠标点击图层0第1帧，按住Ctrl+C复制该帧上的物体，点击选中图层2第1帧，按住Ctrl+V粘贴进物体



图2.3-84
点击选中图层1的第1帧，在“舞台”上绘制一个白色矩形



图2.3-85
调整白色矩形的透明度为40%



图2.3-86
选择“变形”工具调整其角度，使其右倾一些



图2.3-87

将图层2重命名为“遮罩层”，图层1为“被遮罩层”



图2.3-88
选中“遮罩层”图层，点击“转为遮罩层”按钮



图2.3-89
点击图层0的“关闭可视图层”按钮，关闭图层0上物体的可视化



图2.3-90
如图，在“被遮罩层”内设置一个关键帧动画，即右键→“插入帧”，右键→“插入关键帧动画”



图2.3-91
鼠标选中最后一个关键帧，将“舞台”上的白色半透明矩形移至右侧



图2.3-92
点击图层0的“关闭可视图层”还原图层0物体的可视化，在图层0上选中与“被遮罩层”最后关键帧相同的帧数，右键→“插入帧”补全图层0的帧数。



图2.3-93
同理补全“遮罩层”的帧数



图2.3-94

点击“播放”预览走光动画效果



图2.3-95

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 如下图，在右侧“加载”页面，选择“加载样式”为“进度条”，在其下拉菜单内可自行设置加载属性。例如填写“提示文字”、设置文字大小、颜色，添加背景图片、前景图片等


图2.3-67

点击“预览”观察效果


图2.3-68

如图，将样式改为“进度环”，其他属性设置不变


图2.3-69

点击“预览”观察效果


图2.3-70

将样式改为“旋转加载”，可观察到加载效果如下：


图2.3-71

将样式改为“旋转加载+百分比”，可观察到加载效果如下


图2.3-72

将样式改为“首页作为加载页面”可完成更个性化的加载形式定制。

如下图，在首页添加一个火箭图片素材，调整大小与位置。鼠标选中该素材右键→“转换为元件”


图2.3-73

双击该元件进入元件编辑页面。在时间轴20帧的位置右键→“插入帧”，右键→“插入关键帧动画”


图2.3-74

在20帧的位置右键→“插入关键帧”


图2.3-75

鼠标选中第10帧关键帧位置，将火箭图片向上拖动一些位置，制作出火箭上下移动的动画效果


图2.3-76

点击回到“舞台”，新建一个图层1，选中图层1的第一帧，点击“矩形”工具在“舞台”上拉出一个长条矩形作为进度条，可适当调整矩形颜色大小等。


图2.3-77

同时选中图层0、图层1的第30帧，鼠标右键→“插入帧”


图2.3-78

选中图层1的有帧位置，右键→“关键帧动画”


图2.3-79

选中图层1的起始关键帧，点击矩形元素，在其“属性面板”内将其“宽”值设为“1”


图2.3-80

添加一个新页面，点击预览动画效果，发现长条矩形出现横向拉长，即加载的动画效果，动画播放完后自动跳至第2页。


图2.3-81

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 元件动画可以实现复杂的动画效果，每一个元件都是一个独立的完整动画，元件在“舞台”上运动的同时，元件内部的动画也可以同时播放，元件可以重复使用。

如图，点击“素材库”，在“舞台”上添加一个车轮的图片素材


图2.3-48

选中车轮素材，右键→“转换为元件”，即将车轮元素属性转换为元件


图2.3-49

双击“舞台”上的车轮，进入元件编辑页面


图2.3-50

在时间轴50帧位置右键→“插入帧”


图2.3-51

在任意有帧的位置右键→“插入关键帧动画”


图2.3-52

点击选中最后有帧位置（此处为第50帧），在“属性面板”下调整元件属性“Z轴旋转角度”为“360”度


图2.3-53

点击“播放”可观察车轮出现自转一周的动画效果


图2.3-54

点击“舞台”回到“舞台”编辑页面


图2.3-55

点击“预览”发现元件动画可重复不断地播放


图2.3-56

元件也可重复使用。例如在“元件面板”下找到车轮元件，鼠标可将其选中并拖拉至“舞台”


图2.3-57

图2.3-58

元件可配合舞台操作进行复杂的动画设置。如下图，在“素材库”中添加进一个汽车图片素材至“舞台”，选中汽车图片，右键→“排列”→“移至底层”


图2.3-59

调整“舞台”上原本的两个车轮元件位置、大小，使其对齐覆盖汽车图片上的两个车轮


图2.3-60

点击“预览”，出现汽车轮胎转动的动画效果


图2.3-61

在“舞台”的40帧位置，右键→“插入帧”


图2.3-62

在有帧的位置右键→“插入关键帧动画”


图2.3-63

选中关键帧动画的起始帧（此处为第1帧），将汽车移至屏幕左侧。


图2.3-64

选中关键帧动画的最后帧（此处为第40帧），将汽车移至屏幕右侧。


图2.3-65

点击“预览”，观察汽车从屏幕左侧开至右侧的动画效果


图2.3-66
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 预置动画可实现一秒钟制作动画，分为进入动画、强调动画以及退出动画。

1.    添加进入动画

如下图，给文字素材添加进入动画。点击文字素材右边的“添加预置动画”按钮


图2.3-43

在弹出的对话框内选择进入动画效果为“弹入”，同理将其他两个文字素材添加“弹入”的进入动画效果。可点击预览效果


图2.3-44

2.    强调动画

点击“强调动画”文字素材右边的“添加预置动画”按钮，


图2.3-45

在弹出的对话框中选择强调动画效果为“晃动”，可点击预览效果。


图2.3-46

3.    退出动画

同理点击“退出动画”文字素材右边的“添加预置动画”按钮，在弹出的对话框中选择推出动画效果为“蹦出”，可点击预览效果。


图2.3-47

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 曲线变形动画可以实现一个形状变成另一个形状的动画效果。

如下图，选中新图层0的第1帧，鼠标点击“矩形”工具在“舞台”上绘制一个矩形。


图2.3-35

在时间轴20帧的位置，右键→“插入帧”


图2.3-36

在时间轴有帧的位置，右键→“插入曲线变形动画”


图2.3-37

选中最后一帧，鼠标点击“节点”工具


图2.3-38

改变矩形形状为三角形


图2.3-39

点击“播放”，观察矩形变成三角形的动画效果


图2.3-40

同理，点击选中时间轴上的最后一帧，在“属性面板”下改变物体填充色为红色，点击“播放”观察动画效果，发现矩形变成三角形的同时，物体颜色也逐渐由紫色变成红色。


图2.3-41

图2.3-42
 

想要了解更多Mugeda功能？>>>猛戳我，学习更多教程
 
本节视频教程请点击此处。

 进度动画可实现绘制线条过程的效果和文字的打字机效果。

1.    制作图像进度动画

如下图，在图层0的第1帧位置，鼠标点击“圆角矩形”工具在“舞台”上绘制出一个圆角矩形。


图2.3-25

在其“属性面板”下改变该矩形的填充色为“无色”、线条色为“黑色”


图2.3-26

继续绘制出一个圆角矩形和一个圆形，形成手机外框样式。


图2.3-27

在时间轴30帧位置右键→“插入帧”


图2.3-28

在以插入帧的任意位置右键→“插入进度动画”，时间轴变成紫色


图2.3-29

点击“预览”，发现此时动画变成逐渐绘制的效果。


图2.3-30

2.    制作文字进度动画

如图，点击新建一个图层，点击“文字”工具，在“舞台”上创建一个文本框


图2.3-31

点击编辑文字内容


图2.3-32

在新建图层1上的有帧位置，右键→“插入进度动画”


图2.3-33

点击“预览”，观察字体逐字出来的动画效果


图2.3-34