【代码分享】动态修改作品最上方的网页标题

回复

原创分享lx_mgd 发起了问题 • 1 人关注 • 0 个回复 • 16 次浏览 • 2 天前 • 来自相关话题

【模版设计师专访】第五期:胡馨匀、陈佳雯 第2季模版大赛一等奖

原创分享qz 发表了文章 • 0 个评论 • 96 次浏览 • 6 天前 • 来自相关话题

胡馨匀、陈佳雯,第2季木疙瘩HTML5模版设计大赛一等奖获得者,鲁迅美术学院学生。

获奖作品:《生》   观看模板>>
指导教师:陈峰
专家评语:设计精美,动效合理,交互提示明确,背景音乐、音效搭配恰当,文案不错,直达内心深处,作品很打动人!
获奖感言:
这次能获得木疙瘩H5大赛一等奖 查看全部
设计师.png

胡馨匀、陈佳雯,第2季木疙瘩HTML5模版设计大赛一等奖获得者,鲁迅美术学院学生。

获奖作品:《生》   观看模板>>
指导教师:陈峰
专家评语:设计精美,动效合理,交互提示明确,背景音乐、音效搭配恰当,文案不错,直达内心深处,作品很打动人!
获奖感言:
这次能获得木疙瘩H5大赛一等奖,我们感到非常的高兴与荣幸。感谢平台给予我们的机会,感谢陈峰老师对我们精心的指导,感谢各位评委对我们作品的认可。是这次比赛让我们有了自由发挥的空间。在作品的创作过程中,我们品尝到了辛苦与快乐,而我们自身也通过不断地实践创作得到了提升,也开始对自己有了更大的信心。这次能获奖更是对我们往后创作作品的一种鞭策,我们将在这个基础上更加严格地要求自己,激情筑梦,为大家展现出更好的作品。
 
>>>进入鲁迅美术学院空间>>>
 
>>>观看视频专访>>>
 
Q1. 首先介绍一下自己吧
我们是胡馨匀、陈佳雯,是来自鲁迅美术学院动画专业的学生。这次在木疙瘩H5模版大赛中荣获一等奖和人气奖。
 
Q2. 谈谈你参加木疙瘩模版大赛的感受?
很幸运能够获得这次参赛的机会,首先得感谢我们的指导老师,陈老师提供给我们展示的平台。使我们体验到了很多在学校日常工作里体会不到的宝贵经历,通过这次比赛不仅锻炼了我们的实践能力,小组成员之间的合作意识也得到了提高,还认识了许多专业的设计师和优秀的作品。
 
Q3. 你是通过什么途径认识和接触到木疙瘩的呢?
我们是在学校H5课题的学习过程中,通过老师介绍,才认识的木疙瘩。
 
Q4. 你对木疙瘩有哪些期待呢?
希望木疙瘩能够在越来越多的媒体行业中崭露头角,让更多的用户能够体验到炫酷、有趣、互动交流的H5作品。
 
Q5. 你觉得制作H5最需要具备什么能力?
有一定的审美意识和设计基础,有丰富的想象力和创造力;了解交互设计的概念,和H5的制作流程;基本了解木疙瘩操作界面,和工具的使用。
 
Q6. 你觉得什么样的H5可以称得上是一个好的H5呢?
 
设计精美,动效合理,交互提示明显,背景音乐、音效搭配恰当,直达用户内心深处,能打动人心的H5作品。
 
Q7. 你在制作一个H5时,一般的流程是什么呢,可以和我们分享一下吗?
首先提出想法,进行讨论调查。然后构建故事版,列出大纲和绘制头脑风暴,将有关想法和创意点都列出来。然后排除干扰,选取内容进行综合创作。最后将绘制好的素材导入木疙瘩无代码动画制作平台中,进行H5的动画制作。
 
Q8. 请分享一个你在制作H5时的小窍门或独门秘籍。
在H5交互设计方面,选择小而有趣的动效,在不经意的时候不经意的地方放一些小动效反而能够产生出其不意的效果。
 
Q9. 作为一名H5设计师,除了要掌握过硬的技巧外,还需要具备新颖的创意,你在设计H5的时候,会不会遇到灵感缺乏的时候,这种时候你都是通过哪些途径让自己产生新的创意呢?
最重要的当然是去欣赏其他优秀的作品,这是最有效也是最直接的方法,多吸收优秀作品的精华,再消化加工转换为自己的知识。或者也可以通过看书来寻求灵感,构思故事内容。苦恼的时候也可以通过听音乐自我放松,同时认真感受脑海中所形成的画面。
 
Q10. 向大家分享一些学习设计的网站或者书籍,说明理由。
网站有花瓣网、站酷等,无论是素材还是案例都很多,而且质量也很不错。虎课网,包含许多设计教学,教程细致,还有专业老师点评,也经常会开展一些比赛活动,让大家积极参与到设计中去。书籍方面,原研哉的《设计中的设计》,这本书阐述了设计的思想与原理,只有了解了思想与原理懂得了设计的意义才能创造出美好的作品。
 
 
 
 

9月3日—9月9日技术问题汇总

回复

问题答疑goodman123 发起了问题 • 1 人关注 • 0 个回复 • 166 次浏览 • 2018-09-09 19:19 • 来自相关话题

8月27日—9月2日技术问题汇总

回复

问题答疑goodman123 发起了问题 • 2 人关注 • 0 个回复 • 201 次浏览 • 2018-09-03 01:06 • 来自相关话题

第2季木疙瘩H5模版设计大赛获奖结果

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

经过12天激烈的复赛评选,第2季木疙瘩H5模版设计大赛的获奖结果终于出炉。感谢所有评委的认真评选,以及所有参与网络投票的大众评委们!
在所有参赛的模版作品中,绝大多数都通过了商业模版审核,将陆续在木疙瘩模版中心上线售卖,喜欢的盆友不要错过啦~
入围的模版作品都是精品,让我们为所有入围的小伙伴们点个赞 查看全部
WechatIMG1152.png

经过12天激烈的复赛评选,第2季木疙瘩H5模版设计大赛的获奖结果终于出炉。感谢所有评委的认真评选,以及所有参与网络投票的大众评委们!
在所有参赛的模版作品中,绝大多数都通过了商业模版审核,将陆续在木疙瘩模版中心上线售卖,喜欢的盆友不要错过啦~
入围的模版作品都是精品,让我们为所有入围的小伙伴们点个赞~
下面公布获奖作品:
 
>>>点击查看>>>

8月20日—8月26日技术问题汇总

回复

问题答疑goodman123 发起了问题 • 1 人关注 • 0 个回复 • 267 次浏览 • 2018-08-26 21:22 • 来自相关话题

【代码分享】检测作品是不是在微信环境

回复

原创分享lx_mgd 发起了问题 • 1 人关注 • 0 个回复 • 201 次浏览 • 2018-08-22 17:09 • 来自相关话题

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

原创分享mingyueliu 发表了文章 • 0 个评论 • 143 次浏览 • 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 个评论 • 127 次浏览 • 2018-08-17 17:26 • 来自相关话题

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

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






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

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

1.gif


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

2.gif

 

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

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

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






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

1.png


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

2.png


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

3.png


4.png


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

5.png

 

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

原创分享mingyueliu 发表了文章 • 0 个评论 • 121 次浏览 • 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 个评论 • 87 次浏览 • 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 个评论 • 138 次浏览 • 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 个评论 • 103 次浏览 • 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 个评论 • 139 次浏览 • 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 个评论 • 109 次浏览 • 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 个评论 • 106 次浏览 • 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 个评论 • 106 次浏览 • 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 个评论 • 108 次浏览 • 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 个评论 • 123 次浏览 • 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