火星网校
干货来袭！H5动效制作方法大揭秘
近年来，H5页面火爆整个移动互联网，这些页面的炫酷展现，都离不开动效设计和制作，而动效设计和制作早已成为一名合格设计师必需掌握的技能；目前，设计师制作H5页面更多的是借助H5制作工具，本文将以H5制作工具为例和大家一起挖掘几种常见的H5动效制作方法。
一、 H5制作工具自带的动画功能
目前市面上用的比较多的H5制作工具有木疙瘩、 ih5等，本文将以木疙瘩为例给大家介绍：
关键帧动画，可以实现常见的动画效果，比如：位移、大小、旋转、透明度改变等；
变形动画，可以实现形状的改变和颜色过渡的动画效果；
进度动画，可以实现进度走势效果，图表走势图和打字机效果用进度动画来做比较理想。
二、逐帧动画
逐帧动画就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。
优点：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似于电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。
缺点：因为每一帧都不是不同的图片，制作会增加负担并且最终输出的文件也很大，在移动互联网上不利于传播。
鉴于以上优缺点，大家在制作动画过程中可以少量地添加逐帧动画来表现一些细节，逐帧动画的实现很简单，逐帧动画的内容制作，让一些同学会头痛，下面给大家罗列3种获得逐帧动画内容的方法。
1.手绘，如果手绘能力较好的设计师可以将每一帧的画面自己画出来，当然这样工作量也会比较大。
2.从视频里获取，如果看中里某个视频里某段动画效果，想用到项目当中来，可以通过AE将视频转换成序列帧图片，具体操作方法如下：
将视频文件导入到AE中，找到 合成菜单--添加到渲染队列--在面板里将格式改为“JPG“序列或者“PNG“序列--渲染出来即是一张张内容不同的的静态图片，如果图片太大的话，可以通过图片压缩工具来对图片大小做进一步优化。
3. 从gif动画里获取，如果看中的是GIF动画里面的素材，同样也可以将图片获取，需要先下载一个看图软件“2345看图王“或者“7GIF“，可以将GIF图里的每一帧图片保存出来。
三、GIF动画
GIF动画的制作方法有很多种，可以通过PS来制作，也可以在AE中制作好视频再导入到PS中转成GIF动画形式。
GIF图片擅长于制作细节的小动画，位图，优势在于 “体型”小，制作成本低，GIF动画常在H5动效里用做loading效果、热门小标签等，所以，小的动画可以用GIF来展现。
四、视频
H5页面中，很多效果其实是视频，比如曾经有一个标题叫做“该新闻已被BMW快速删除“宝马案例，刷爆了整个微信朋友圈，如果不带交互效果，用视频全屏的方式来播放动画也是有非常不错的选择。
五、在H5制作工具中插入代码实现动效
很多H5制作工具，也支持插入代码来辅助实现一些功能，以木疙瘩为例，点击脚本工具可以插入代码，
比如做事件绑定，可以加入这样一段代码：
mugeda.addEventListener('renderReady',function(){});
如果对前端有深入了解的设计师，也可以将制作的H5页面从制作工具中导出为html文件格式，在源文件里面添加一些前端代码，html5加上css3.0配合javascript可以实现很多不错的效果，比如：3D效果,svg和canvas绘图动画等。
以上五种方法，系统全面地涵盖了目前市面上常见的H5页面的制作方法，理解了以上方法，也就理解了动画背后制作的原理，在制作的过程中，针对不同的动画效果，你可以选择最合适的动画制作方法来实现。
来源：UI设计之家
上一篇 UI设计移动端图标全攻略！
下一篇 海报中字体如何设计才会更出彩！
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
探讨并理解游戏开发中的UE5网络课程，提升游戏开发者的技能和专业知识，是教育游戏开发的重要途径。
-
此文章将详细介绍UE5智慧城市课程的内容，学习路径以及如何通过该课程提升个人技能。浓厚的实践性质让学生在学习中得到真实成果。
-
对于热衷游戏开发和设计的从业者和学习者，火星时代教育提供了高质量的UE5就业培训课程和教育资源，使学员能够在实际工作中更好地应......
-
探讨UE5模拟仿真如何在培训基地进行技术学习的实际应用，以及这如何改变教育培训的方式。
-
本文章详细探讨UE5设计师的学习费用,帮助读者理解在掌握UE5的设计和开发技能上需要的投资。
-
本篇文章将详细讲解UE5数字展厅培训班价格以及课程内容。其中还将包含具体的课程特色介绍，以及火星时代教育平台在相关培训方案的设......
