功能详解

功能详解

4.1.9【新功能教程】改变行为属性增加边框颜色和填充色

原创分享mingyueliu 发表了文章 • 0 个评论 • 256 次浏览 • 2018-08-17 17:32 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.

演示地址: http://cn.mugeda.com/animation/edit/a604a6ac

首先在页面上绘制两个图形以及两个对应的行为按钮,,一个按 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.

演示地址: http://cn.mugeda.com/animation/edit/a604a6ac

首先在页面上绘制两个图形以及两个对应的行为按钮,,一个按钮用来改变对应图形的填充色,另一个按钮用来改变对应图形的边框颜色。

1.gif


然后分别给被改变填充色和边框颜色的两个图形分别命名。

2.gif


33.gif


然后分别给下面的两个按钮绑定上行为。

3.gif


4.gif


5.gif


然后在作品里点击这个按钮,对应元素的填充色就会变为行为里所选择的颜色。


6.gif


改变元素边框颜色的行为操作与之类似,选择另一个按钮,,然后点击改变元素属性,点击编辑。

7.gif


8.gif



4.1.16【新功能教程】屏幕适配范围与安全框

原创分享mingyueliu 发表了文章 • 0 个评论 • 219 次浏览 • 2018-08-17 17:26 • 来自相关话题

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

为了方便设计师更好的编辑内容,防止内容在设备上超出可见显示范围(安全框),木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角,可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。






选择后 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

为了方便设计师更好的编辑内容,防止内容在设备上超出可见显示范围(安全框),木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角,可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。

1.gif


选择后,物体上会出现一个方框指示指定设备的可见范围(安全框)。如果舞台上添加的内容超出了指定设备的安全框,方框会显示为红色以提示设计师调整元素位置。如果没有元素超出安全框,方框会显示为绿色。

2.gif

 

4.1.15【新功能教程】计数器组件

原创分享mingyueliu 发表了文章 • 0 个评论 • 237 次浏览 • 2018-08-17 17:24 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
通常我们在制作作品时,涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图,我们点击计数器工具在舞台上添加一个计数器,设置默认值和计数值。






我们先在舞台上添加相关按钮素材。如图,添加两个文本框分别命名为 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
通常我们在制作作品时,涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图,我们点击计数器工具在舞台上添加一个计数器,设置默认值和计数值。

1.png


我们先在舞台上添加相关按钮素材。如图,添加两个文本框分别命名为“显示计数”“获取计数”

2.png


为“增加计数”按钮添加“增加计数”行为
数据服务→增加计数→触发条件:点击→设置参数 
计数器名称:“计数器1” 
显示计数元素:“显示计数”

3.png


4.png


同理,为“获取计数”按钮添加“获取计数”行为。可点击预览观看效果。
双击舞台上的计数器弹出“计数器”对话框,点击“管理实时数据”,可以修改当前数据。

5.png

 

4.1.14【新功能教程】运动曲线编辑

原创分享mingyueliu 发表了文章 • 0 个评论 • 196 次浏览 • 2018-08-17 17:21 • 来自相关话题

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

编辑地址:http://prerelease.mugeda.com/a ... 15485
预览地址:http://prerelease.mugeda.com/c ... 15485

为了支持更加灵活的编辑运动曲线,关键 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

编辑地址:http://prerelease.mugeda.com/a ... 15485
预览地址:http://prerelease.mugeda.com/c ... 15485

为了支持更加灵活的编辑运动曲线,关键帧动画增加了“自定义运动曲线”的功能。

1.gif


选择“自定义运动曲线”后,可以点击编辑对运动曲线进行编辑。以一个包含有2个关键帧的基本动画为例,打开“编辑运动曲线”对话框后可以在左侧点击选择想要编辑的运动曲线,即可在右侧显示出运动曲线并可进行编辑。

2.gif


第一次打开时,默认曲线是线性,并且显示为半透明,表示还没有指定任何曲线。可以从“预置曲线”中选择一个曲线类型,这时候,曲线会显示为实线。运动曲线的横坐标代表时间,纵坐标代表运动进度(即0%指100%)。每一段运动曲线由首尾的两个绿色节点表示,左下角的绿色节点代表对应关键帧动画段的开始时刻和运动进度0%,右上角的绿色节点代表对应关键帧动画段的结束时刻和运动进度100%。运动曲线可以通过拖动红色控制节点进行编辑,实现不同运动特征的运动。

4.gif


添加了运动曲线后,左侧对应的的属性列表会显示一个关闭按钮,表明该属性已经指定了一个自定义的运动曲线。每一个列出的属性(例如宽度、透明度、滤镜等),都可以定义自己独立的运动曲线。如果没有指定,对应的属性就会采用默认属性的运动曲线。如果没有指定默认运动曲线,则会采用线性运动曲线。

如果关键帧动画包含有多个关键帧动画,运动曲线会显示为多段。每一段都由首尾两个节点来分割。其中,显示为绿色的为当前正在编辑的关键帧动画段。点击任意曲线段可以切换当前编辑的动画段。如果想要只显示当前动画段,可以切换曲线上方“显示所有关键帧”选项。

5.gif


运动曲线编辑目前支持关键帧动画和变形动画,并支持如下参数的动画曲线定制:


x偏移量
y偏移量
宽度
高度
透明度
旋转角度
滤镜(阴影、模糊、灰度、亮度、对比度、色调等)
变形动画参数(字体大小、字间距、行间距、填充颜色、线条颜色等)



下面是2个常见的运动曲线的例子:

自由落体:自由落体可以由在水平方向上的匀速运动和在垂直方向上的加速运动来模拟。其运动曲线类似下图:

6.gif


缓动进度:这是一种常见的进度显示方式,即一个减速移动,连接一个匀速缓动,再连接一个加速移动。其运动曲线类似下图:

7.gif


上述提供的演示地址包含了这两种运动的实现方法和效果。

在连接多段运动曲线时需要注意,由于控制自由度的限制,有时候为了实现平滑的多段运动,需要调整关键帧的位置或者每一段运动的位移数值,以便对运动速度进行微调,实现想要达到的运动效果。

4.1.13【新功能教程】文字变形动画

原创分享mingyueliu 发表了文章 • 0 个评论 • 146 次浏览 • 2018-08-17 17:15 • 来自相关话题

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

编辑地址(第4页):
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

变形动画新增 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

编辑地址(第4页):
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

变形动画新增对文本的支持。即:可以为文本添加变形动画, 并在关键帧上设置文本的属性进行变形动画。目前支持的文本变形动画的属性有:


字体颜色
字体大小
行间距
字间距
滤镜效果


4.1.12【新功能教程】投票、抽奖实时数据管理

原创分享mingyueliu 发表了文章 • 0 个评论 • 215 次浏览 • 2018-08-17 17:13 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 设计师可以通过实时数据管理的功能,用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).

演示地址:http://cn.mugeda.com/animation/edit/ed60ab32 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 设计师可以通过实时数据管理的功能,用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).

演示地址:http://cn.mugeda.com/animation/edit/ed60ab32

以投票为例:
现在舞台上已经生成了一个标准的投票组件以及给一个按钮绑定了抽奖的行为,当用户发生投票行为时,被投票目标的票数会在当前基础上+1,,假如现在有北京,上海两个投票对象,假如北京目前所得票数为100,现在我们想把北京所得的票数改为50,通过实时数据管理即可轻松修改。

1.gif


首先点击管理实时数据,会弹出如下对话框。

2.gif


我们现在想要把北京改为50票,只需要把北京后面的输入框内的数值改为50,点击确定即可。

3.gif


保存以后,打开作品,会发现北京的票数由原先票数改变成了50票。

4.gif


同样的,通过抽奖组件的实时数据管理,可以去修改奖品的剩余数量以及领奖码的剩余数量。

5.gif

 

4.1.11【新功能教程】首页加载的静态导出

原创分享mingyueliu 发表了文章 • 0 个评论 • 168 次浏览 • 2018-08-17 17:11 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 动画导出器在动画导出的时候做一层检测,当用了首页作为加载的时候,符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后,当用户打开动画,可以在第一时间看到首页,减少了以前黑屏的时间。

目前符合条件的动画特征 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 动画导出器在动画导出的时候做一层检测,当用了首页作为加载的时候,符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后,当用户打开动画,可以在第一时间看到首页,减少了以前黑屏的时间。

目前符合条件的动画特征:

组件只包含文字、图片、形状、元件、组

填充效果只支持纯色填充、图片背景填充

动画支持关键帧、形状、变形的线性变换

支持组件的2d定位

所有使用的图片的总面积不大于某个阈值

支持新的预定义文字——加载进度,取值0到100

文字组件支持非云字体

屏幕适配支持默认

不含有交互特性(如行为、预置动画)

动画在导出或者发布的时候,如果上述条件满足,则自动将首页作为加载做静态导出。可以观察到的特征是:
导出:在导出包里出现了新的文件msl.js。
发布:查看msl.js链接的存在性。例如:发布地址是http://xxx.xxx.xxx/xxxx/xxxx/index.html,查看http://xxx.xxx.xxx/xxxx/xxxx/msl.js的存在性。

4.1.10【新功能教程】滤镜效果

原创分享mingyueliu 发表了文章 • 0 个评论 • 238 次浏览 • 2018-08-17 17:09 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 编辑地址:
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

目前支持如下滤镜:

查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 编辑地址:
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

目前支持如下滤镜:


灰度 Grayscle
亮度 Brightness
对比度 Contrast
饱和度 Saturation
色调 Hue
模糊 Blur
阴影 Shadow
泛黄做旧 Sepia
负片 Invert



为了给元素添加滤镜,选中元素后,在属性面板选择想要添加的滤镜效果,然后点击“+”图标即可将指定的滤镜效果添加到元素上。

1.gif


根据需要,可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如,模糊滤镜可以调节模糊程度。其中,阴影滤镜包含有多个参数,可以将鼠标移动到阴影效果上显示参数并编辑。

2.gif


如果不想要使用一个已经添加的滤镜效果,可以通过对应的滤镜效果右侧的删除按钮移除。

3.gif


滤镜效果也支持动画。即:在关键帧上添加的滤镜效果,可以在关键帧动画时进行插值,实现滤镜效果的动画渲染。在动画插值过程中,如果某个关键帧上没有添加指定的滤镜,那么将会采用默认滤镜效果参数进行插值。例如:

如果第1个关键帧添加了100%的灰度,而第2个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认灰度(0%)进行插值;

如果第2个关键帧添加了8像素的模糊,而第1个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认模糊(0像素,即没有模糊)进行插值;

其它的以此类推。

目前滤镜效果的局限是,由于安卓和iOS手机上仅支持CSS滤镜,不支持Canvas滤镜,
因此手机上需要用Canvas进行渲染的部分(例如遮罩和截屏)暂时不支持滤镜,这一
点在使用中需要注意。

4.1.8【新功能教程】辅助线功能

原创分享mingyueliu 发表了文章 • 0 个评论 • 159 次浏览 • 2018-08-17 16:12 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 辅助线的作用于photoshop里的辅助线功能类似,开启辅助线后,设计师在拖拽物体至辅助线时,物体会自动停靠至辅助线位置,,辅助线仅仅在ide内可以看到,,渲染后的作品看不到辅助线。






具体使用方法
1、绘制一 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 辅助线的作用于photoshop里的辅助线功能类似,开启辅助线后,设计师在拖拽物体至辅助线时,物体会自动停靠至辅助线位置,,辅助线仅仅在ide内可以看到,,渲染后的作品看不到辅助线。

1.gif


具体使用方法
1、绘制一条辅助线
按住alt键不要松开,然后在舞台上拖拽鼠标左键至某个方向(上下左右),即可绘制出一条辅助线。

2.gif


当鼠标移动至辅助线附近时,即可拖动辅助线,同时显示鼠标所在辅助线的坐标.

2、隐藏\显示辅助线及删除辅助线的几种方法

拖拽辅助线的时候,,和pshotoshop一样,将辅助线拖拽至舞台之外即可删除辅助线。

3.gif


4.gif


也可以通过视图菜单中的删除所有辅助线进行删除。

5.gif


6.gif


点击工具栏中的辅助线工具,即可快速显示\隐藏所有辅助线,也可以通过视图菜单中的辅助线选项,来进行显示隐藏。
 

3.2.2 UI原型:用Mugeda巧做GIF

原创分享mingyueliu 发表了文章 • 0 个评论 • 141 次浏览 • 2018-08-17 16:02 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

 下面我们介绍用Mugeda导出GIF动画的方法:

1.序列帧动画导出GIF动画

如图,以序列帧形式添加几张图片至舞台,使其形成一个整体的动画效果
导出GIF动画步骤:文件→导出→GIF动画注意:所有导出只支持导出第1 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

 下面我们介绍用Mugeda导出GIF动画的方法:

1.序列帧动画导出GIF动画

如图,以序列帧形式添加几张图片至舞台,使其形成一个整体的动画效果
导出GIF动画步骤:文件→导出→GIF动画注意:所有导出只支持导出第1页

11.png


可修改舞台大小改变导出的GIF动画大小

22.png


2.关键帧动画导出GIF动画

同时,我们也可以在第1页制作一个关键帧动画,点击文件→导出→GIF动画,同样可以导出GIF动画

33.png


3.元件动画导出GIF动画

我们制作一个车轮360度旋转的元件动画

44.png


将该元件放置舞台第1页(对齐小汽车元素合适的位置),同时在舞台上制作一个小汽车从左到右移动的关键帧动画效果

55.png


点击:文件→导出→GIF动画,同样可以导出GIF动画
注意:舞台帧数大于等于元件内帧数

66.png


4.曲线变形动画导出GIF动画舞台上的曲线变形动画可以导出GIF动画,元件内的曲线变形动画则不可以导出

77.png


5.进度动画导出GIF动画

如图,我们将需导出的进度动画移至第1页,点击:文件→导出→GIF动画,导出GIF动画

88.png


以上列举了一些支持导出GIF动画的几种形式,如下图,是一些不支持导出GIF动画的形式

99.png

 

3.1.11【展示动画】小爷吴亦凡

原创分享mingyueliu 发表了文章 • 0 个评论 • 160 次浏览 • 2018-08-17 15:57 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例的原理是用陀螺仪控制舞台上的图片或视频。
 
在讲解本案例之前,我们首先需熟悉陀螺仪旋转轴的原理,如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。






上传视频素材
注意:为防止视频在不同手机的不兼 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例的原理是用陀螺仪控制舞台上的图片或视频。
 
在讲解本案例之前,我们首先需熟悉陀螺仪旋转轴的原理,如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。

1.png


上传视频素材
注意:为防止视频在不同手机的不兼容性,我们在制作案例前可先将视频导成序列帧的形式再上传进编辑页面

2.png

 
在舞台上添加一个陀螺仪,选择旋转类型,如下图为“绕Y轴旋转角”,同时将其命名为“Y”

3.png


设置关联属性

选择视频素材,点击其“左”属性右边的“关联”按钮,设置关联属性:
参考物体:“Y” 
参考属性:“文本取值” 
关联方式:“控制点插值”
 主控量:“-40” 
被控量:“0” 
主控量:“40” 
被控量:“-1198” 
(注意:具体数值可提前在手机上观察得出)

4.png

 
同时添加另外一个陀螺仪,设置其类型为“绕X轴旋转角”,为其命名为“X”。

5.png


选择视频素材,点击其“上”属性右边的“关联”按钮,
 
设置关联属性:
参考物体:“X” 
参考属性:“文本取值” 
关联方式:“控制点插值”
主控量:“20” 
被控量:“0” 
主控量:“80”
被控量:“-173”

6.png

 

3.1.10【展示动画】拖动长图类H5制作

原创分享mingyueliu 发表了文章 • 0 个评论 • 200 次浏览 • 2018-08-17 15:50 • 来自相关话题

 要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
设置首页
如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面






可为每个素材添加预置动画效果






将“点击”图标右键转换为元件,双 查看全部
 要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
设置首页
如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面

1.png


可为每个素材添加预置动画效果

2.png


将“点击”图标右键转换为元件,双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。

3.png


设置长图元件动画

新建图层,在第3帧插入帧,插入关键帧,同时添加进长图背景素材

4.png


将背景图片右键转换为元件,进入元件页面。
新建图层,分层导入其他图片素材。

5.png


为所有素材图层插入关键帧动画,分别设置素材的动画效果,例如给人物素材设置放大缩小动画,为“向左滑动”图标设置向左滑动动画效果。

6.png


回到舞台,补全所有图层的帧数,为长图元件添加预置动画,如图为“向右移入”

7.png


如下图,为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”,添加矩形,为其添加一个“出现即暂停”的行为。注意随时保存作品。

8.png


选中长图元件,在其属性栏内设置“拖动/旋转”为“水平拖动”

9.png


设置点击出现提示效果
新建图层“提示层”,在第4帧插入空白关键帧,同时导入原先预备好的提示素材。可为其添加预置动画效果等。

10.png


新建两个按钮层,分别在一个图层的第3帧放置“分享”按钮,在另一个图层第4帧提示页面放置一个“返回”按钮。

11.png


补全“行为层”及其他图层帧数,为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为

12.png


为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画,同理可为接下来的人物素材设置提示出现消失的动画。

13.png


设置分享动画的提示:如下图,新建“分享”图层,添加分享提示的素材,命名为“分享”,将其移至舞台之外。

14.png


为“分享”按钮添加“改变元素属性”行为属性控制→改变元素属性→触发条件:点击。 设置“参数” 元素名称:“分享” 元素属性:“左” 赋值方式:“用设置的值替换现有值” 取值:“0”

15.png


16.png


同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为,即点击将其移至舞台之外。

17.png

 

3.1.9【展示动画】科幻风格H5的制作

原创分享mingyueliu 发表了文章 • 0 个评论 • 224 次浏览 • 2018-08-17 15:44 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​1. 制作科技感走线动画(进度动画)

如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性






然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​1. 制作科技感走线动画(进度动画)

如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性

1.png


然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画

2.png


我们新建5个图层,分别在每个图层上绘制一条直线

3.png


为第一条直线的某个时间段插入进度动画:右键→插入进度动画→(在特定帧数上)右键→插入关键帧

4.png



同理分别为其他几条线插入进度动画,制作出直线一条条绘制出来的炫酷效果

5.png


也可新建图层,在合适的位置添加相关图片素材等

6.png


2. 制作酷炫logo动画(进度动画)

同理,我们也可以用进度动画制作相关logo的绘制效果。
如下图,我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形

7.png


为其添加进度动画

8.png


3. 制作酷炫酒瓶走光动画(遮罩动画)

我们先用曲线工具绘制一个酒瓶形状,同时新建图层2,将酒瓶复制粘贴进图层2


9.png


选中图层2,将其物体的填充色去掉,只剩下边框

10.png


在图层2下面新建图层3,添加一个矩形,在其属性栏的填充颜色内选择“线性”,制作白色光亮效果

11.png


为所有图层添加帧,为图层3的光亮物体制作一个从上往下移动的动画效果

12.png


选中图层2,将其转换为“遮罩层”

13.png


我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。
最后可点击预览效果。

14.png


3.1.8【展示动画】一只挖空心思的行礼箱 

原创分享mingyueliu 发表了文章 • 0 个评论 • 239 次浏览 • 2018-08-17 15:39 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1.制作元件动画

如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面






如图,在元件第20帧插入帧,插入关键帧动画。
选中变形工具,按住Ctrl键 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1.制作元件动画

如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面

1.png


如图,在元件第20帧插入帧,插入关键帧动画。
选中变形工具,按住Ctrl键将中间的控制原点移至舞台右侧中间位置

2.png


分别选中第一帧、最后一帧,改变其“Y轴旋转”为“-90”“90”

3.png


4.png


可点击“预览”观察元件动画的效果

同时我们在帧数的中间位置(图片正居舞台)插入关键帧,调整“透视度”为“50”

5.png


如下图,我们新建多个图层,复制图层0上的所有帧,分别粘贴进每一个图层内

6.png


如下图,在图层8上,删除除第一帧之外的前半部分帧数,同时修改第一帧的“Y轴旋转”为“0”

7.png


8.png


同理,分别删除图层7、6、5、4前半部分的一些帧如下图,分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”

9.png


移动图层2、1、0上的关键帧如下图位置,即在前面分别插入2、4、6帧

10.png


新建图层9,在与图层0第一帧相同帧数上插入一个矩形,调整颜色如下图,制作一个光韵矩形。

11.png


如下图为光韵矩形也设置相同的翻页动画,调整其第一帧关键帧的“Y轴旋转”为“-90”,调整其最后一帧关键帧的“Y轴旋转”为“0”,同时在最后插入一个空白帧。

12.png


如下图,隔图层复制光韵图层及帧。

13.png


之后,可双击元件每个图层的物体,分别进入各自的组,添加相对应的素材。
即做好一个元件动画。

14.png


2.制作“左右滑动预览”动画

回到舞台,新建一个图层,添加“左右滑动预览”指示图标、一个文本框、两个定时器
分别为文本框、两个定时器命名为“关联数值”“加”“减”

15.png


改变文本框数值为“10”。点击其“添加/编辑行为”按钮,添加两个行为:

属性控制→设置定时器 →触发条件:出现 →设置“参数”:
定时器名称:加
设置状态:暂停记时器

16.png


17.png


属性控制→设置定时器 →触发条件:出现 →设置“参数”:
定时器名称:减
设置状态:暂停记时器

18.png


为“加”定时器添加行为
属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”:
元素名称:关联数值
元素属性:文本取值
赋值方式:在现有值基础上增加
取值:0.01

19.png


20.png


同理,为“减”定时器添加行为
属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”:
元素名称:关联数值
元素属性:文本取值
赋值方式:在现有值基础上增加
取值:-0.01

21.png


设置元件的动画关联如下图:
关联对象:关联取值
关联属性:文本取值
开始值:10
结束值:0
播放模式:同步

22.png


为元件添加六个行为,分别为
“向左滑动‘加’定时器继续计时”
“向左滑动‘减’定时器暂停计时”
“向右滑动‘减’定时器继续计时”
“向右滑动‘加’定时器暂停计时”
“点击暂停‘加’定时器”
“点击暂停‘减’定时器”

23.png


为文本框添加两个控制定时器的行为:

属性控制→设置定时器→触发条件:属性改变→设置“参数”
定时器名称:减
设置状态:暂停记时器
执行条件:检查元素状态
元素名称:关联数值
参考属性:文本取值
逻辑条件:小于等于
参考值:0

24.png


25.png


属性控制→设置定时器→触发条件:属性改变→设置“参数”
定时器名称:加
设置状态:暂停记时器
执行条件:检查元素状态
元素名称:关联数值
参考属性:文本取值
逻辑条件:大于
参考值:10

26.png

 

3.1.7【展示动画】2016网易娱乐圈画传

原创分享mingyueliu 发表了文章 • 0 个评论 • 327 次浏览 • 2018-08-17 15:19 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
1.制作缩放动画
 我们先在图层1添加第一张图






在图层2添加第二张图,将第二张图放大,使其放置第一张图的画面大小符合舞台(即与图层1第一张图大小画面重合)






如下图为两个图层第50帧位置上插入 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
1.制作缩放动画
 我们先在图层1添加第一张图

1.1_.png


在图层2添加第二张图,将第二张图放大,使其放置第一张图的画面大小符合舞台(即与图层1第一张图大小画面重合)

1.2_.png


如下图为两个图层第50帧位置上插入帧,在图层1上第二帧插入一个空白帧使其只出现在第一帧上,为图层2插入关键帧动画,在最后一帧关键帧上调整第二张图片的大小使其符合舞台

1.3_.png


如图我们新建图层3,在最后一帧插入空白帧,添加进第三张图片,调整图片大小使其放置第二张图的位置大小符合舞台(即与图层2最后一帧图片大小画面重合)

1.5_.png


同理我们在三个图层第100帧位置上插入帧,为图层2、3插入关键帧动画,分别在其最后一帧关键帧上缩小图片,使第三张图的大小符合舞台

1.6_.png


同理新建图层4添加第四张图片,制作动画效果,此处不详述。

1.7_.png


2.制作“长按按钮播放动画”效果

如图,新建图层,添加一个按钮元素

1.8_.png


新建“行为层”添加一个矩形,设置矩形“出现即暂停”行为,同时在该图层第二帧添加一个空白帧,使该行为只使用在第一帧

1.9_.png


为按钮素材添加两个行为:
动画播放控制→播放→触发条件:手指按下;
动画播放控制→暂停→触发条件:手指抬起。
 
 

3.1.6【展示动画】长按手指控制动画播放 

原创分享mingyueliu 发表了文章 • 0 个评论 • 331 次浏览 • 2018-08-17 15:15 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果

1.控制舞台动画
我们首先在舞台上添加一个矩形,设置“出现即暂停”的行为






选择最上图层,在舞台需手指按住的位置上添加一个矩形,设置其透明度为“ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果

1.控制舞台动画
我们首先在舞台上添加一个矩形,设置“出现即暂停”的行为

1.png


选择最上图层,在舞台需手指按住的位置上添加一个矩形,设置其透明度为“0”

2.png


随后为该透明矩形添加两个行为:
动画播放控制→播放→触发条件:手指按下;
动画播放控制→暂停→触发条件:手指抬起。

3.png


2.控制元件动画
首先,我们可在舞台上添加一个元件动画,如下图,为其命名为“麦穗”

4.png


回到舞台,继续为控制矩形添加两个行为,即“手指抬起即暂停”“手指按下即播放”

5.png


分别在这两个行为的“参数”对话框内设置“作用对象”为“麦穗”

6.png


3.控制提示元素
如下图,在舞台上添加一个“要一直按住才会播放哦”的提示语,为其命名为“提示”

7.png


为控制矩形再添加两个行为:
1.属性控制→“改变元素属性”→触发条件:手指按下→设置参数
元素名称:提示
元素属性:透明度
赋值方式:用设置的值替换现有值
取值“0”

8.png


9.png


2.属性控制→“改变元素属性”→触发条件:手指抬起→设置参数
元素名称:提示
元素属性:透明度
赋值方式:用设置的值替换现有值
取值“100”

10.png


这样,一个“长按手指控制动画播放”的效果已做好。

【Mugeda简约版】※Mugeda简约版编辑界面介绍※

原创分享lichun761014 回复了问题 • 3 人关注 • 1 个回复 • 1913 次浏览 • 2017-05-16 12:16 • 来自相关话题

2.1.4 Mugeda界面与舞台:时间轴

原创分享15899622371 回复了问题 • 6 人关注 • 3 个回复 • 2554 次浏览 • 2017-05-06 11:28 • 来自相关话题

【Mugeda新功能】声音更新功能一览

Mugeda培训songyue 发表了文章 • 6 个评论 • 1677 次浏览 • 2017-04-19 11:09 • 来自相关话题

声音增加了如下功能: 
1) 控制音量 
2) 控制播放位置 
3) 用声音播放位置关联(控制)元素属性 
4) 用元素属性关联(控制)声音播放位置
 
示例:http://beta.mugeda.com/client/ ... 5826a 
编辑链接:http://beta.mugeda.com/ 查看全部
声音增加了如下功能: 
1) 控制音量 
2) 控制播放位置 
3) 用声音播放位置关联(控制)元素属性 
4) 用元素属性关联(控制)声音播放位置
 
示例:http://beta.mugeda.com/client/ ... 5826a 
编辑链接:http://beta.mugeda.com/animation/edit/a675826a
 
在“控制声音”的行为中增加了对音量和播放位置的控制。这两个控制和“控制方式”参数独立,并不依赖于声音播放状态。例如,如果声音目前没有播放,并且设置了播放位置为第2秒,那么声音将会在下一次播放的时候从第2秒开始播放。
image001.png

 
选中声音对象,可以对其进行播放位置的关联,其关联方式类似于对动画播放进行关联控制。
image003.png

 
也可以将某个元素的属性和声音播放的进度关联在一起,这样,声音播放进度(取值为0~100)将可以用来控制元素的属性。
image005.png

 

 

【Mugeda新功能】连线组件的使用

Mugeda培训songyue 发表了文章 • 0 个评论 • 1326 次浏览 • 2017-04-19 10:49 • 来自相关话题

连线组件用来在一些特定场合(例如教育类测试课件)的内容中允许用户用连线来连接两个元素,从而实现特定的交互效果。下面用实例来说明如何使用连线组件。
 
示例地址: http://b13b5c18.u.mgd5.com/cam ... .html 
编辑地址: http://beta.mugeda.co 查看全部
连线组件用来在一些特定场合(例如教育类测试课件)的内容中允许用户用连线来连接两个元素,从而实现特定的交互效果。下面用实例来说明如何使用连线组件。
 
示例地址: http://b13b5c18.u.mgd5.com/cam ... .html 
编辑地址: http://beta.mugeda.com/animation/edit/c36da7fa
 
1、首先在工具栏选择连线组件。
image001.png

在舞台上绘制连线组件,和绘制直线是一样的。区别是: 
*连线元素绘制后,具有自身的一些特殊属性(下面会提到); 
*绘制在舞台上的连线,只是代表了连线时的初始位置,用于给用户提示;
 
2、绘制好后,可以对其进行属性配置。
image003.png

 
各个属性说明如下: 
1) 显示端点提示:是否在连线的端点提供一个脉动的圆形动画提示用户连线; 
2) 提示颜色:端点提示的颜色; 
3) 允许多线链接:打开之后连线允许同时停留在多个停靠位置 
4) 停靠位置:希望连线连接成功的命名元素的列表。连线只能和列表里面的元素连接成功;
 
在渲染的时候,可以用鼠标(PC)或者手指(手机)按住某一个连线的任意位置拖动连线。当连线的端点靠近了一个设置好的停靠位置时,连线会自动吸附到该停靠位置。这时候如果松开鼠标或者手指,就可以连线成功。连线成功成功后,可以继续拖动连线进行修改。如果一个连线预先设置了多个连线停靠位置,前一个连线成功后,后一个连线会出现在初始位置,提示用户还可以继续连线。直到所有连线都成功为止。
image005.png

 
3、连线的结果可以通过下面的方式来获取(假如连线元素的名称是"连线") 
{{连线}}: 连接成功的第一个命名元素的名称 
{{连线.0}}, {{连线.1}}, {{连线.2}}: 连接成功的第0,1,2个命名元素的名称 
如果连线没有成功,上面的表达式返回空字符串("")。
 
为了支持自动化处理,行为触发条件中增加了“连线完成”。该选项仅对连线元素有效。下图示范了如何利用该条件进行行为处理。
image007.png

 
连线上的行为新增了一个判断条件’停靠物体名称’。如下图所示,这样的设置,让这个行为只是当连线连到’红色2’的这个物体上才会触发。如果停靠物体名称不选择任何物体,那么停靠到所有的停靠物体上面都有效。
image009.png

 
 

【Mugeda简约版】※Mugeda简约版编辑界面介绍※

原创分享lichun761014 回复了问题 • 3 人关注 • 1 个回复 • 1913 次浏览 • 2017-05-16 12:16 • 来自相关话题

【Mugeda简约版】※Mugeda简约版编辑界面介绍※

回复

原创分享lichun761014 回复了问题 • 3 人关注 • 1 个回复 • 1913 次浏览 • 2017-05-16 12:16 • 来自相关话题

2.1.4 Mugeda界面与舞台:时间轴

回复

原创分享15899622371 回复了问题 • 6 人关注 • 3 个回复 • 2554 次浏览 • 2017-05-06 11:28 • 来自相关话题

2.2.4 素材与媒体:幻灯片

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 1683 次浏览 • 2016-09-20 16:02 • 来自相关话题

2.1.7 Mugeda界面与舞台:什么是舞台?

回复

问题答疑mingyueliu 发起了问题 • 1 人关注 • 0 个回复 • 1676 次浏览 • 2016-09-20 14:42 • 来自相关话题

2.1.3 Mugeda界面与舞台:快捷工具栏

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 1596 次浏览 • 2016-09-19 17:39 • 来自相关话题

2.1.2 Mugeda界面与舞台:菜单栏

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 1600 次浏览 • 2016-09-19 17:32 • 来自相关话题

2.9.3 API的应用:Mugeda对象

回复

原创分享mingyue 发起了问题 • 1 人关注 • 0 个回复 • 2455 次浏览 • 2016-09-07 11:37 • 来自相关话题

2.9.1 API的应用:在动画中添加代码

回复

原创分享mingyue 发起了问题 • 5 人关注 • 0 个回复 • 3092 次浏览 • 2016-09-07 11:01 • 来自相关话题

4.1.9【新功能教程】改变行为属性增加边框颜色和填充色

原创分享mingyueliu 发表了文章 • 0 个评论 • 256 次浏览 • 2018-08-17 17:32 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.

演示地址: http://cn.mugeda.com/animation/edit/a604a6ac

首先在页面上绘制两个图形以及两个对应的行为按钮,,一个按 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.

演示地址: http://cn.mugeda.com/animation/edit/a604a6ac

首先在页面上绘制两个图形以及两个对应的行为按钮,,一个按钮用来改变对应图形的填充色,另一个按钮用来改变对应图形的边框颜色。

1.gif


然后分别给被改变填充色和边框颜色的两个图形分别命名。

2.gif


33.gif


然后分别给下面的两个按钮绑定上行为。

3.gif


4.gif


5.gif


然后在作品里点击这个按钮,对应元素的填充色就会变为行为里所选择的颜色。


6.gif


改变元素边框颜色的行为操作与之类似,选择另一个按钮,,然后点击改变元素属性,点击编辑。

7.gif


8.gif



4.1.16【新功能教程】屏幕适配范围与安全框

原创分享mingyueliu 发表了文章 • 0 个评论 • 219 次浏览 • 2018-08-17 17:26 • 来自相关话题

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

为了方便设计师更好的编辑内容,防止内容在设备上超出可见显示范围(安全框),木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角,可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。






选择后 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

为了方便设计师更好的编辑内容,防止内容在设备上超出可见显示范围(安全框),木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角,可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。

1.gif


选择后,物体上会出现一个方框指示指定设备的可见范围(安全框)。如果舞台上添加的内容超出了指定设备的安全框,方框会显示为红色以提示设计师调整元素位置。如果没有元素超出安全框,方框会显示为绿色。

2.gif

 

4.1.15【新功能教程】计数器组件

原创分享mingyueliu 发表了文章 • 0 个评论 • 237 次浏览 • 2018-08-17 17:24 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
通常我们在制作作品时,涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图,我们点击计数器工具在舞台上添加一个计数器,设置默认值和计数值。






我们先在舞台上添加相关按钮素材。如图,添加两个文本框分别命名为 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
通常我们在制作作品时,涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图,我们点击计数器工具在舞台上添加一个计数器,设置默认值和计数值。

1.png


我们先在舞台上添加相关按钮素材。如图,添加两个文本框分别命名为“显示计数”“获取计数”

2.png


为“增加计数”按钮添加“增加计数”行为
数据服务→增加计数→触发条件:点击→设置参数 
计数器名称:“计数器1” 
显示计数元素:“显示计数”

3.png


4.png


同理,为“获取计数”按钮添加“获取计数”行为。可点击预览观看效果。
双击舞台上的计数器弹出“计数器”对话框,点击“管理实时数据”,可以修改当前数据。

5.png

 

4.1.14【新功能教程】运动曲线编辑

原创分享mingyueliu 发表了文章 • 0 个评论 • 196 次浏览 • 2018-08-17 17:21 • 来自相关话题

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

编辑地址:http://prerelease.mugeda.com/a ... 15485
预览地址:http://prerelease.mugeda.com/c ... 15485

为了支持更加灵活的编辑运动曲线,关键 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

编辑地址:http://prerelease.mugeda.com/a ... 15485
预览地址:http://prerelease.mugeda.com/c ... 15485

为了支持更加灵活的编辑运动曲线,关键帧动画增加了“自定义运动曲线”的功能。

1.gif


选择“自定义运动曲线”后,可以点击编辑对运动曲线进行编辑。以一个包含有2个关键帧的基本动画为例,打开“编辑运动曲线”对话框后可以在左侧点击选择想要编辑的运动曲线,即可在右侧显示出运动曲线并可进行编辑。

2.gif


第一次打开时,默认曲线是线性,并且显示为半透明,表示还没有指定任何曲线。可以从“预置曲线”中选择一个曲线类型,这时候,曲线会显示为实线。运动曲线的横坐标代表时间,纵坐标代表运动进度(即0%指100%)。每一段运动曲线由首尾的两个绿色节点表示,左下角的绿色节点代表对应关键帧动画段的开始时刻和运动进度0%,右上角的绿色节点代表对应关键帧动画段的结束时刻和运动进度100%。运动曲线可以通过拖动红色控制节点进行编辑,实现不同运动特征的运动。

4.gif


添加了运动曲线后,左侧对应的的属性列表会显示一个关闭按钮,表明该属性已经指定了一个自定义的运动曲线。每一个列出的属性(例如宽度、透明度、滤镜等),都可以定义自己独立的运动曲线。如果没有指定,对应的属性就会采用默认属性的运动曲线。如果没有指定默认运动曲线,则会采用线性运动曲线。

如果关键帧动画包含有多个关键帧动画,运动曲线会显示为多段。每一段都由首尾两个节点来分割。其中,显示为绿色的为当前正在编辑的关键帧动画段。点击任意曲线段可以切换当前编辑的动画段。如果想要只显示当前动画段,可以切换曲线上方“显示所有关键帧”选项。

5.gif


运动曲线编辑目前支持关键帧动画和变形动画,并支持如下参数的动画曲线定制:


x偏移量
y偏移量
宽度
高度
透明度
旋转角度
滤镜(阴影、模糊、灰度、亮度、对比度、色调等)
变形动画参数(字体大小、字间距、行间距、填充颜色、线条颜色等)



下面是2个常见的运动曲线的例子:

自由落体:自由落体可以由在水平方向上的匀速运动和在垂直方向上的加速运动来模拟。其运动曲线类似下图:

6.gif


缓动进度:这是一种常见的进度显示方式,即一个减速移动,连接一个匀速缓动,再连接一个加速移动。其运动曲线类似下图:

7.gif


上述提供的演示地址包含了这两种运动的实现方法和效果。

在连接多段运动曲线时需要注意,由于控制自由度的限制,有时候为了实现平滑的多段运动,需要调整关键帧的位置或者每一段运动的位移数值,以便对运动速度进行微调,实现想要达到的运动效果。

4.1.13【新功能教程】文字变形动画

原创分享mingyueliu 发表了文章 • 0 个评论 • 146 次浏览 • 2018-08-17 17:15 • 来自相关话题

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

编辑地址(第4页):
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

变形动画新增 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

编辑地址(第4页):
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

变形动画新增对文本的支持。即:可以为文本添加变形动画, 并在关键帧上设置文本的属性进行变形动画。目前支持的文本变形动画的属性有:


字体颜色
字体大小
行间距
字间距
滤镜效果


4.1.12【新功能教程】投票、抽奖实时数据管理

原创分享mingyueliu 发表了文章 • 0 个评论 • 215 次浏览 • 2018-08-17 17:13 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 设计师可以通过实时数据管理的功能,用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).

演示地址:http://cn.mugeda.com/animation/edit/ed60ab32 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 设计师可以通过实时数据管理的功能,用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).

演示地址:http://cn.mugeda.com/animation/edit/ed60ab32

以投票为例:
现在舞台上已经生成了一个标准的投票组件以及给一个按钮绑定了抽奖的行为,当用户发生投票行为时,被投票目标的票数会在当前基础上+1,,假如现在有北京,上海两个投票对象,假如北京目前所得票数为100,现在我们想把北京所得的票数改为50,通过实时数据管理即可轻松修改。

1.gif


首先点击管理实时数据,会弹出如下对话框。

2.gif


我们现在想要把北京改为50票,只需要把北京后面的输入框内的数值改为50,点击确定即可。

3.gif


保存以后,打开作品,会发现北京的票数由原先票数改变成了50票。

4.gif


同样的,通过抽奖组件的实时数据管理,可以去修改奖品的剩余数量以及领奖码的剩余数量。

5.gif

 

4.1.11【新功能教程】首页加载的静态导出

原创分享mingyueliu 发表了文章 • 0 个评论 • 168 次浏览 • 2018-08-17 17:11 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 动画导出器在动画导出的时候做一层检测,当用了首页作为加载的时候,符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后,当用户打开动画,可以在第一时间看到首页,减少了以前黑屏的时间。

目前符合条件的动画特征 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 动画导出器在动画导出的时候做一层检测,当用了首页作为加载的时候,符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后,当用户打开动画,可以在第一时间看到首页,减少了以前黑屏的时间。

目前符合条件的动画特征:

组件只包含文字、图片、形状、元件、组

填充效果只支持纯色填充、图片背景填充

动画支持关键帧、形状、变形的线性变换

支持组件的2d定位

所有使用的图片的总面积不大于某个阈值

支持新的预定义文字——加载进度,取值0到100

文字组件支持非云字体

屏幕适配支持默认

不含有交互特性(如行为、预置动画)

动画在导出或者发布的时候,如果上述条件满足,则自动将首页作为加载做静态导出。可以观察到的特征是:
导出:在导出包里出现了新的文件msl.js。
发布:查看msl.js链接的存在性。例如:发布地址是http://xxx.xxx.xxx/xxxx/xxxx/index.html,查看http://xxx.xxx.xxx/xxxx/xxxx/msl.js的存在性。

4.1.10【新功能教程】滤镜效果

原创分享mingyueliu 发表了文章 • 0 个评论 • 238 次浏览 • 2018-08-17 17:09 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 编辑地址:
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

目前支持如下滤镜:

查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 编辑地址:
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

目前支持如下滤镜:


灰度 Grayscle
亮度 Brightness
对比度 Contrast
饱和度 Saturation
色调 Hue
模糊 Blur
阴影 Shadow
泛黄做旧 Sepia
负片 Invert



为了给元素添加滤镜,选中元素后,在属性面板选择想要添加的滤镜效果,然后点击“+”图标即可将指定的滤镜效果添加到元素上。

1.gif


根据需要,可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如,模糊滤镜可以调节模糊程度。其中,阴影滤镜包含有多个参数,可以将鼠标移动到阴影效果上显示参数并编辑。

2.gif


如果不想要使用一个已经添加的滤镜效果,可以通过对应的滤镜效果右侧的删除按钮移除。

3.gif


滤镜效果也支持动画。即:在关键帧上添加的滤镜效果,可以在关键帧动画时进行插值,实现滤镜效果的动画渲染。在动画插值过程中,如果某个关键帧上没有添加指定的滤镜,那么将会采用默认滤镜效果参数进行插值。例如:

如果第1个关键帧添加了100%的灰度,而第2个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认灰度(0%)进行插值;

如果第2个关键帧添加了8像素的模糊,而第1个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认模糊(0像素,即没有模糊)进行插值;

其它的以此类推。

目前滤镜效果的局限是,由于安卓和iOS手机上仅支持CSS滤镜,不支持Canvas滤镜,
因此手机上需要用Canvas进行渲染的部分(例如遮罩和截屏)暂时不支持滤镜,这一
点在使用中需要注意。

4.1.8【新功能教程】辅助线功能

原创分享mingyueliu 发表了文章 • 0 个评论 • 159 次浏览 • 2018-08-17 16:12 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 辅助线的作用于photoshop里的辅助线功能类似,开启辅助线后,设计师在拖拽物体至辅助线时,物体会自动停靠至辅助线位置,,辅助线仅仅在ide内可以看到,,渲染后的作品看不到辅助线。






具体使用方法
1、绘制一 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 辅助线的作用于photoshop里的辅助线功能类似,开启辅助线后,设计师在拖拽物体至辅助线时,物体会自动停靠至辅助线位置,,辅助线仅仅在ide内可以看到,,渲染后的作品看不到辅助线。

1.gif


具体使用方法
1、绘制一条辅助线
按住alt键不要松开,然后在舞台上拖拽鼠标左键至某个方向(上下左右),即可绘制出一条辅助线。

2.gif


当鼠标移动至辅助线附近时,即可拖动辅助线,同时显示鼠标所在辅助线的坐标.

2、隐藏\显示辅助线及删除辅助线的几种方法

拖拽辅助线的时候,,和pshotoshop一样,将辅助线拖拽至舞台之外即可删除辅助线。

3.gif


4.gif


也可以通过视图菜单中的删除所有辅助线进行删除。

5.gif


6.gif


点击工具栏中的辅助线工具,即可快速显示\隐藏所有辅助线,也可以通过视图菜单中的辅助线选项,来进行显示隐藏。
 

3.2.2 UI原型:用Mugeda巧做GIF

原创分享mingyueliu 发表了文章 • 0 个评论 • 141 次浏览 • 2018-08-17 16:02 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

 下面我们介绍用Mugeda导出GIF动画的方法:

1.序列帧动画导出GIF动画

如图,以序列帧形式添加几张图片至舞台,使其形成一个整体的动画效果
导出GIF动画步骤:文件→导出→GIF动画注意:所有导出只支持导出第1 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

 下面我们介绍用Mugeda导出GIF动画的方法:

1.序列帧动画导出GIF动画

如图,以序列帧形式添加几张图片至舞台,使其形成一个整体的动画效果
导出GIF动画步骤:文件→导出→GIF动画注意:所有导出只支持导出第1页

11.png


可修改舞台大小改变导出的GIF动画大小

22.png


2.关键帧动画导出GIF动画

同时,我们也可以在第1页制作一个关键帧动画,点击文件→导出→GIF动画,同样可以导出GIF动画

33.png


3.元件动画导出GIF动画

我们制作一个车轮360度旋转的元件动画

44.png


将该元件放置舞台第1页(对齐小汽车元素合适的位置),同时在舞台上制作一个小汽车从左到右移动的关键帧动画效果

55.png


点击:文件→导出→GIF动画,同样可以导出GIF动画
注意:舞台帧数大于等于元件内帧数

66.png


4.曲线变形动画导出GIF动画舞台上的曲线变形动画可以导出GIF动画,元件内的曲线变形动画则不可以导出

77.png


5.进度动画导出GIF动画

如图,我们将需导出的进度动画移至第1页,点击:文件→导出→GIF动画,导出GIF动画

88.png


以上列举了一些支持导出GIF动画的几种形式,如下图,是一些不支持导出GIF动画的形式

99.png

 

3.1.11【展示动画】小爷吴亦凡

原创分享mingyueliu 发表了文章 • 0 个评论 • 160 次浏览 • 2018-08-17 15:57 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例的原理是用陀螺仪控制舞台上的图片或视频。
 
在讲解本案例之前,我们首先需熟悉陀螺仪旋转轴的原理,如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。






上传视频素材
注意:为防止视频在不同手机的不兼 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例的原理是用陀螺仪控制舞台上的图片或视频。
 
在讲解本案例之前,我们首先需熟悉陀螺仪旋转轴的原理,如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。

1.png


上传视频素材
注意:为防止视频在不同手机的不兼容性,我们在制作案例前可先将视频导成序列帧的形式再上传进编辑页面

2.png

 
在舞台上添加一个陀螺仪,选择旋转类型,如下图为“绕Y轴旋转角”,同时将其命名为“Y”

3.png


设置关联属性

选择视频素材,点击其“左”属性右边的“关联”按钮,设置关联属性:
参考物体:“Y” 
参考属性:“文本取值” 
关联方式:“控制点插值”
 主控量:“-40” 
被控量:“0” 
主控量:“40” 
被控量:“-1198” 
(注意:具体数值可提前在手机上观察得出)

4.png

 
同时添加另外一个陀螺仪,设置其类型为“绕X轴旋转角”,为其命名为“X”。

5.png


选择视频素材,点击其“上”属性右边的“关联”按钮,
 
设置关联属性:
参考物体:“X” 
参考属性:“文本取值” 
关联方式:“控制点插值”
主控量:“20” 
被控量:“0” 
主控量:“80”
被控量:“-173”

6.png

 

3.1.10【展示动画】拖动长图类H5制作

原创分享mingyueliu 发表了文章 • 0 个评论 • 200 次浏览 • 2018-08-17 15:50 • 来自相关话题

 要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
设置首页
如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面






可为每个素材添加预置动画效果






将“点击”图标右键转换为元件,双 查看全部
 要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
设置首页
如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面

1.png


可为每个素材添加预置动画效果

2.png


将“点击”图标右键转换为元件,双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。

3.png


设置长图元件动画

新建图层,在第3帧插入帧,插入关键帧,同时添加进长图背景素材

4.png


将背景图片右键转换为元件,进入元件页面。
新建图层,分层导入其他图片素材。

5.png


为所有素材图层插入关键帧动画,分别设置素材的动画效果,例如给人物素材设置放大缩小动画,为“向左滑动”图标设置向左滑动动画效果。

6.png


回到舞台,补全所有图层的帧数,为长图元件添加预置动画,如图为“向右移入”

7.png


如下图,为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”,添加矩形,为其添加一个“出现即暂停”的行为。注意随时保存作品。

8.png


选中长图元件,在其属性栏内设置“拖动/旋转”为“水平拖动”

9.png


设置点击出现提示效果
新建图层“提示层”,在第4帧插入空白关键帧,同时导入原先预备好的提示素材。可为其添加预置动画效果等。

10.png


新建两个按钮层,分别在一个图层的第3帧放置“分享”按钮,在另一个图层第4帧提示页面放置一个“返回”按钮。

11.png


补全“行为层”及其他图层帧数,为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为

12.png


为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画,同理可为接下来的人物素材设置提示出现消失的动画。

13.png


设置分享动画的提示:如下图,新建“分享”图层,添加分享提示的素材,命名为“分享”,将其移至舞台之外。

14.png


为“分享”按钮添加“改变元素属性”行为属性控制→改变元素属性→触发条件:点击。 设置“参数” 元素名称:“分享” 元素属性:“左” 赋值方式:“用设置的值替换现有值” 取值:“0”

15.png


16.png


同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为,即点击将其移至舞台之外。

17.png

 

3.1.9【展示动画】科幻风格H5的制作

原创分享mingyueliu 发表了文章 • 0 个评论 • 224 次浏览 • 2018-08-17 15:44 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​1. 制作科技感走线动画(进度动画)

如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性






然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​1. 制作科技感走线动画(进度动画)

如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性

1.png


然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画

2.png


我们新建5个图层,分别在每个图层上绘制一条直线

3.png


为第一条直线的某个时间段插入进度动画:右键→插入进度动画→(在特定帧数上)右键→插入关键帧

4.png



同理分别为其他几条线插入进度动画,制作出直线一条条绘制出来的炫酷效果

5.png


也可新建图层,在合适的位置添加相关图片素材等

6.png


2. 制作酷炫logo动画(进度动画)

同理,我们也可以用进度动画制作相关logo的绘制效果。
如下图,我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形

7.png


为其添加进度动画

8.png


3. 制作酷炫酒瓶走光动画(遮罩动画)

我们先用曲线工具绘制一个酒瓶形状,同时新建图层2,将酒瓶复制粘贴进图层2


9.png


选中图层2,将其物体的填充色去掉,只剩下边框

10.png


在图层2下面新建图层3,添加一个矩形,在其属性栏的填充颜色内选择“线性”,制作白色光亮效果

11.png


为所有图层添加帧,为图层3的光亮物体制作一个从上往下移动的动画效果

12.png


选中图层2,将其转换为“遮罩层”

13.png


我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。
最后可点击预览效果。

14.png


3.1.8【展示动画】一只挖空心思的行礼箱 

原创分享mingyueliu 发表了文章 • 0 个评论 • 239 次浏览 • 2018-08-17 15:39 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1.制作元件动画

如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面






如图,在元件第20帧插入帧,插入关键帧动画。
选中变形工具,按住Ctrl键 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1.制作元件动画

如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面

1.png


如图,在元件第20帧插入帧,插入关键帧动画。
选中变形工具,按住Ctrl键将中间的控制原点移至舞台右侧中间位置

2.png


分别选中第一帧、最后一帧,改变其“Y轴旋转”为“-90”“90”

3.png


4.png


可点击“预览”观察元件动画的效果

同时我们在帧数的中间位置(图片正居舞台)插入关键帧,调整“透视度”为“50”

5.png


如下图,我们新建多个图层,复制图层0上的所有帧,分别粘贴进每一个图层内

6.png


如下图,在图层8上,删除除第一帧之外的前半部分帧数,同时修改第一帧的“Y轴旋转”为“0”

7.png


8.png


同理,分别删除图层7、6、5、4前半部分的一些帧如下图,分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”

9.png


移动图层2、1、0上的关键帧如下图位置,即在前面分别插入2、4、6帧

10.png


新建图层9,在与图层0第一帧相同帧数上插入一个矩形,调整颜色如下图,制作一个光韵矩形。

11.png


如下图为光韵矩形也设置相同的翻页动画,调整其第一帧关键帧的“Y轴旋转”为“-90”,调整其最后一帧关键帧的“Y轴旋转”为“0”,同时在最后插入一个空白帧。

12.png


如下图,隔图层复制光韵图层及帧。

13.png


之后,可双击元件每个图层的物体,分别进入各自的组,添加相对应的素材。
即做好一个元件动画。

14.png


2.制作“左右滑动预览”动画

回到舞台,新建一个图层,添加“左右滑动预览”指示图标、一个文本框、两个定时器
分别为文本框、两个定时器命名为“关联数值”“加”“减”

15.png


改变文本框数值为“10”。点击其“添加/编辑行为”按钮,添加两个行为:

属性控制→设置定时器 →触发条件:出现 →设置“参数”:
定时器名称:加
设置状态:暂停记时器

16.png


17.png


属性控制→设置定时器 →触发条件:出现 →设置“参数”:
定时器名称:减
设置状态:暂停记时器

18.png


为“加”定时器添加行为
属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”:
元素名称:关联数值
元素属性:文本取值
赋值方式:在现有值基础上增加
取值:0.01

19.png


20.png


同理,为“减”定时器添加行为
属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”:
元素名称:关联数值
元素属性:文本取值
赋值方式:在现有值基础上增加
取值:-0.01

21.png


设置元件的动画关联如下图:
关联对象:关联取值
关联属性:文本取值
开始值:10
结束值:0
播放模式:同步

22.png


为元件添加六个行为,分别为
“向左滑动‘加’定时器继续计时”
“向左滑动‘减’定时器暂停计时”
“向右滑动‘减’定时器继续计时”
“向右滑动‘加’定时器暂停计时”
“点击暂停‘加’定时器”
“点击暂停‘减’定时器”

23.png


为文本框添加两个控制定时器的行为:

属性控制→设置定时器→触发条件:属性改变→设置“参数”
定时器名称:减
设置状态:暂停记时器
执行条件:检查元素状态
元素名称:关联数值
参考属性:文本取值
逻辑条件:小于等于
参考值:0

24.png


25.png


属性控制→设置定时器→触发条件:属性改变→设置“参数”
定时器名称:加
设置状态:暂停记时器
执行条件:检查元素状态
元素名称:关联数值
参考属性:文本取值
逻辑条件:大于
参考值:10

26.png

 

3.1.7【展示动画】2016网易娱乐圈画传

原创分享mingyueliu 发表了文章 • 0 个评论 • 327 次浏览 • 2018-08-17 15:19 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
1.制作缩放动画
 我们先在图层1添加第一张图






在图层2添加第二张图,将第二张图放大,使其放置第一张图的画面大小符合舞台(即与图层1第一张图大小画面重合)






如下图为两个图层第50帧位置上插入 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
1.制作缩放动画
 我们先在图层1添加第一张图

1.1_.png


在图层2添加第二张图,将第二张图放大,使其放置第一张图的画面大小符合舞台(即与图层1第一张图大小画面重合)

1.2_.png


如下图为两个图层第50帧位置上插入帧,在图层1上第二帧插入一个空白帧使其只出现在第一帧上,为图层2插入关键帧动画,在最后一帧关键帧上调整第二张图片的大小使其符合舞台

1.3_.png


如图我们新建图层3,在最后一帧插入空白帧,添加进第三张图片,调整图片大小使其放置第二张图的位置大小符合舞台(即与图层2最后一帧图片大小画面重合)

1.5_.png


同理我们在三个图层第100帧位置上插入帧,为图层2、3插入关键帧动画,分别在其最后一帧关键帧上缩小图片,使第三张图的大小符合舞台

1.6_.png


同理新建图层4添加第四张图片,制作动画效果,此处不详述。

1.7_.png


2.制作“长按按钮播放动画”效果

如图,新建图层,添加一个按钮元素

1.8_.png


新建“行为层”添加一个矩形,设置矩形“出现即暂停”行为,同时在该图层第二帧添加一个空白帧,使该行为只使用在第一帧

1.9_.png


为按钮素材添加两个行为:
动画播放控制→播放→触发条件:手指按下;
动画播放控制→暂停→触发条件:手指抬起。
 
 

3.1.6【展示动画】长按手指控制动画播放 

原创分享mingyueliu 发表了文章 • 0 个评论 • 331 次浏览 • 2018-08-17 15:15 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果

1.控制舞台动画
我们首先在舞台上添加一个矩形,设置“出现即暂停”的行为






选择最上图层,在舞台需手指按住的位置上添加一个矩形,设置其透明度为“ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果

1.控制舞台动画
我们首先在舞台上添加一个矩形,设置“出现即暂停”的行为

1.png


选择最上图层,在舞台需手指按住的位置上添加一个矩形,设置其透明度为“0”

2.png


随后为该透明矩形添加两个行为:
动画播放控制→播放→触发条件:手指按下;
动画播放控制→暂停→触发条件:手指抬起。

3.png


2.控制元件动画
首先,我们可在舞台上添加一个元件动画,如下图,为其命名为“麦穗”

4.png


回到舞台,继续为控制矩形添加两个行为,即“手指抬起即暂停”“手指按下即播放”

5.png


分别在这两个行为的“参数”对话框内设置“作用对象”为“麦穗”

6.png


3.控制提示元素
如下图,在舞台上添加一个“要一直按住才会播放哦”的提示语,为其命名为“提示”

7.png


为控制矩形再添加两个行为:
1.属性控制→“改变元素属性”→触发条件:手指按下→设置参数
元素名称:提示
元素属性:透明度
赋值方式:用设置的值替换现有值
取值“0”

8.png


9.png


2.属性控制→“改变元素属性”→触发条件:手指抬起→设置参数
元素名称:提示
元素属性:透明度
赋值方式:用设置的值替换现有值
取值“100”

10.png


这样,一个“长按手指控制动画播放”的效果已做好。

【Mugeda新功能】声音更新功能一览

Mugeda培训songyue 发表了文章 • 6 个评论 • 1677 次浏览 • 2017-04-19 11:09 • 来自相关话题

声音增加了如下功能: 
1) 控制音量 
2) 控制播放位置 
3) 用声音播放位置关联(控制)元素属性 
4) 用元素属性关联(控制)声音播放位置
 
示例:http://beta.mugeda.com/client/ ... 5826a 
编辑链接:http://beta.mugeda.com/ 查看全部
声音增加了如下功能: 
1) 控制音量 
2) 控制播放位置 
3) 用声音播放位置关联(控制)元素属性 
4) 用元素属性关联(控制)声音播放位置
 
示例:http://beta.mugeda.com/client/ ... 5826a 
编辑链接:http://beta.mugeda.com/animation/edit/a675826a
 
在“控制声音”的行为中增加了对音量和播放位置的控制。这两个控制和“控制方式”参数独立,并不依赖于声音播放状态。例如,如果声音目前没有播放,并且设置了播放位置为第2秒,那么声音将会在下一次播放的时候从第2秒开始播放。
image001.png

 
选中声音对象,可以对其进行播放位置的关联,其关联方式类似于对动画播放进行关联控制。
image003.png

 
也可以将某个元素的属性和声音播放的进度关联在一起,这样,声音播放进度(取值为0~100)将可以用来控制元素的属性。
image005.png

 

 

【Mugeda新功能】连线组件的使用

Mugeda培训songyue 发表了文章 • 0 个评论 • 1326 次浏览 • 2017-04-19 10:49 • 来自相关话题

连线组件用来在一些特定场合(例如教育类测试课件)的内容中允许用户用连线来连接两个元素,从而实现特定的交互效果。下面用实例来说明如何使用连线组件。
 
示例地址: http://b13b5c18.u.mgd5.com/cam ... .html 
编辑地址: http://beta.mugeda.co 查看全部
连线组件用来在一些特定场合(例如教育类测试课件)的内容中允许用户用连线来连接两个元素,从而实现特定的交互效果。下面用实例来说明如何使用连线组件。
 
示例地址: http://b13b5c18.u.mgd5.com/cam ... .html 
编辑地址: http://beta.mugeda.com/animation/edit/c36da7fa
 
1、首先在工具栏选择连线组件。
image001.png

在舞台上绘制连线组件,和绘制直线是一样的。区别是: 
*连线元素绘制后,具有自身的一些特殊属性(下面会提到); 
*绘制在舞台上的连线,只是代表了连线时的初始位置,用于给用户提示;
 
2、绘制好后,可以对其进行属性配置。
image003.png

 
各个属性说明如下: 
1) 显示端点提示:是否在连线的端点提供一个脉动的圆形动画提示用户连线; 
2) 提示颜色:端点提示的颜色; 
3) 允许多线链接:打开之后连线允许同时停留在多个停靠位置 
4) 停靠位置:希望连线连接成功的命名元素的列表。连线只能和列表里面的元素连接成功;
 
在渲染的时候,可以用鼠标(PC)或者手指(手机)按住某一个连线的任意位置拖动连线。当连线的端点靠近了一个设置好的停靠位置时,连线会自动吸附到该停靠位置。这时候如果松开鼠标或者手指,就可以连线成功。连线成功成功后,可以继续拖动连线进行修改。如果一个连线预先设置了多个连线停靠位置,前一个连线成功后,后一个连线会出现在初始位置,提示用户还可以继续连线。直到所有连线都成功为止。
image005.png

 
3、连线的结果可以通过下面的方式来获取(假如连线元素的名称是"连线") 
{{连线}}: 连接成功的第一个命名元素的名称 
{{连线.0}}, {{连线.1}}, {{连线.2}}: 连接成功的第0,1,2个命名元素的名称 
如果连线没有成功,上面的表达式返回空字符串("")。
 
为了支持自动化处理,行为触发条件中增加了“连线完成”。该选项仅对连线元素有效。下图示范了如何利用该条件进行行为处理。
image007.png

 
连线上的行为新增了一个判断条件’停靠物体名称’。如下图所示,这样的设置,让这个行为只是当连线连到’红色2’的这个物体上才会触发。如果停靠物体名称不选择任何物体,那么停靠到所有的停靠物体上面都有效。
image009.png

 
 

【Mugeda新功能】抽奖组件使用

Mugeda培训songyue 发表了文章 • 9 个评论 • 1530 次浏览 • 2017-04-19 10:25 • 来自相关话题

演示地址:http://beta.mugeda.com/client/ ... 91ea1 
编辑地址:http://beta.mugeda.com/animation/edit/9b591ea1
 
抽奖组件具体使用方法:
1、首先在工具栏中选中抽奖组件.





2、然后会弹出抽奖组件的配置 查看全部

演示地址:http://beta.mugeda.com/client/ ... 91ea1 
编辑地址:http://beta.mugeda.com/animation/edit/9b591ea1
 
抽奖组件具体使用方法:
1、首先在工具栏中选中抽奖组件.
1.png


2、然后会弹出抽奖组件的配置.
image003.png

开始时间和结束时间:是指抽奖发生时,如果抽奖在时间范围内则可以抽奖,否则不可以抽奖. 
允许重复抽奖次数:限制用户抽奖的次数,如果超过设置的值则不可以抽奖 
再次抽奖等待时间:限制用户多次抽奖时间间隔,单位为(秒),用户的多次抽奖时间间隔不能超过这个设置 
抽奖模式:即抽即中、均匀分布 
安全验证:如果开启了安全验证, 用户在抽奖的时候需要输入验证码,验证码输入正确才给抽奖
奖项设置:一行一个奖项,格式为: [奖品名次:奖品名称:奖品数量] ,例 
1:一等奖:10 
2:二等奖:100 
3:三等奖:1000
领奖码(非必填):一行一个领奖码,格式为:[奖品名次:领奖码:奖品数量] ,例:
1:lingjiangma1:10 
2:lingjiangma2:100 
3:lingjiangma3:1000
奖品的名次对应奖项设置中的奖品名次,领奖码可以设置为任意不重复的值,如果配置了领奖码这个选项,当中奖的时候,中奖信息中会携带所对应的领奖码,比如抽奖时中了一等奖,那么对应的领奖码就是 lingjian
 
3、以上配置完成后,点击确认按钮即可生成一个完整的抽奖组件.  
 
4、设置4个文本框用来显示抽奖的结果,设计师可根据文本框内的内容来进行判断,然后进行样式的设计.
2.png

设置完以后分别给文本框进行命名,用来绑定抽奖组件.
 
5、绘制一个物体,用来充当抽奖按钮
3.png


6、选中绘制出的物体,给物体增加抽奖行为
4.png


然后编辑抽奖行为
image011.png

抽奖组件选择刚刚的生成的抽奖组件
 
显示抽奖结果类别:抽奖的结果会显示在指定的文本框内, 如果抽奖结果为-1代表没有中奖,如果是0那么他就中了一等奖,如果是1那么就是二等奖,以此类推,设计师可根据返回的数字进行判断来决定样式 
显示抽奖结果文本:假如中了一等奖,一等奖对应的名称是小米手机,那么对应的文本框内就会显示小米手机
显示抽奖凭据:如果设置了领奖码,假如一等奖对应的领奖码是 yidengjiang1 那么这个领奖码就会显示在对应文本框内
显示剩余抽奖次数:会在对应文本框内显示用户还有几次抽奖机会
绑定表单提交:如果页面上有物体绑定了提交表单行为,如果配置了这个选项,用户在提交表单的时候,会偷偷的把抽奖结果信息绑定到表单上作为附加信息提交.
 

Mugeda新功能教程:投票组件的使用

Mugeda培训songyue 发表了文章 • 0 个评论 • 1970 次浏览 • 2017-01-23 15:59 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
(点击图片看大图)

 1. 添加一个投票组件:




 
2. 按照提示完成投票的设置:




 
3. 确认投票数据设置后,会在舞台上生成一个投票组件,并且会自动命名(投票1),同时会在数据库上注册一个投 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
(点击图片看大图)

 1. 添加一个投票组件:
1.jpg

 
2. 按照提示完成投票的设置:
2.jpg

 
3. 确认投票数据设置后,会在舞台上生成一个投票组件,并且会自动命名(投票1),同时会在数据库上注册一个投票数据点。注意,投票组件是一个服务器数据组件,在内容展示时不会出现。为了能够投票,还需要添加投票行为:
3.jpg

 
4. 添加3个文字对象,投票给上海、投票数、是否投票。分别对应的功能为:投票按钮、显示“上海”的投票数,和显示当前用户是否给“上海”投过票。后两个文字对象需要命名,后面要引用:
4.jpg

 
5. 为投票按钮添加“投票”行为:
5.jpg

 
6. 编辑投票行为进行设置。其中,投票对象是上面添加的投票数据对象;显示结果对象和显示是否投票分别对应上面添加的对应文字对象:
6.jpg

 
7. 设置成功后就可以进行投票了。投票结果会显示在对应的文字信息中便于后续处理,同时会根据投票设置显示相应的结果文字,便于用关联、条件等方式控制更多的交互行为:
7.jpg