ae制h5文字动画_绝对干货!H5动画制作方法全揭秘
原标题:绝对干货!H5动画制作方法全揭秘
近年来,H5页面火爆整个移动互联网,这些页面的炫酷展现,都离不开动效设计和制作,而动效设计和制作早已成为一名合格设计师必需掌握的技能。
目前,设计师制作H5页面更多的是借助H5制作工具,本文将以H5制作工具为例和大家一起挖掘几种常见的H5动效制作方法。
H5制作工具自带的动画功能
目前市面上用的比较多的H5制作工具有木疙瘩、ih5等,本文将以木疙瘩为例给大家介绍。
关键帧动画:可以实现常见的动画效果,比如位移、大小、旋转、透明度改变等。
变形动画:可以实现形状的改变和颜色过渡的动画效果。
进度动画:可以实现进度走势效果,图表走势图和打字机效果用进度动画来做比较理想。
逐帧动画
逐帧动画就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。
优点:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似于电影的播放模式,很适合于表演细腻的动画。
例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。
缺点:因为每一帧都不是不同的图片,制作会增加负担并且最终输出的文件也很大,在移动互联网上不利于传播。
鉴于以上优缺点,大家在制作动画过程中可以少量地添加逐帧动画来表现一些细节。
逐帧动画的实现很简单,但逐帧动画的内容制作,可能会让一些同学头痛,下面给大家罗列3种获得逐帧动画内容的方法。
手绘
如果手绘能力较好的设计师可以将每一帧的画面自己画出来,当然这样工作量也会比较大
从视频里获取
如果看中里某个视频里某段动画效果,想用到项目当中来,可以通过AE将视频转换成序列帧图片,具体操作方法如下:
将视频文件导入到AE中,找到 合成菜单--添加到渲染队列--在面板里将格式改为“JPG“序列或者“PNG“序列--渲染出来即是一张张内容不同的的静态图片。
如果图片太大的话,可以通过图片压缩工具来对图片大小做进一步优化。
从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配合java可以实现很多不错的效果,比如:3D效果,svg和canvas绘图动画等。
以上五种方法,系统全面地涵盖了目前市面上常见的H5页面的制作方法,理解了以上方法,也就理解了动画背后制作的原理。
在制作的过程中,针对不同的动画效果,你可以选择最合适的动画制作方法来实现。
来源:公众号 UI设计师之家返回搜狐,查看更多
责任编辑:
ae制h5文字动画_绝对干货!H5动画制作方法全揭秘相关推荐
- 地图上制作线路的动画_纯干货:动画制作的十二个法则(上)
制作动画的十二个原则,不论是3D动画还是flash还是AE都适用. 首先先找到十二个妹子,演示用. 一:挤压与拉伸 通过挤压与拉伸赋予物体或角色弹性,使其更加灵动. 左为使用该原则的例子,右为对比. ...
- ios开发 方形到圆的动画_画个圆动画,的两种实现。iOS 动画由很浅,入浅,当然是 Swift...
方法一,使用 CAShapeLayer 和 UIBezierPath 加上 CABasicAnimation 有一个动画属性 strokeEnd 就算完 方法二,复杂一些.频繁调用 CALayer 的 ...
- android 同根动画_[转载]Android anim动画切换效果
关于动画的实现,Android提供了Animation,在Android SDK介绍了2种Animation模式: 1. Tween Animation:通过对场景里的对象不断做图像变换(平移.缩放. ...
- html打开网页过场动画_辽源HTML网站制作优化
官方网站是v3cef6企业推广互联网的必要条件.企业官方网站要特别注意页面布局设计,毕竟页面效果会直接影响到客户的转化率.那么,如何做好公司的网站设计呢?您需要遵循五个设计原则: 优化辽源HTML网站 ...
- ue4 怎么修改骨骼动画_【UE4】动画重定向
虚幻4动画重定向 重定向虚幻争霸中两个角色,使用同一套动画. 1.首先我们从虚幻商城下载两个角色到项目内.(我这里选择了Wraith.Revenant) 由于需要使用另外的动画,我这里选择将两个骨架的 ...
- animator创建动画_为游戏创建动画的基础
animator创建动画 You can consider animation as the technique or procedure of making the illusion of moti ...
- 怎么把视频制作成GIF动态图?这几种制作方法很简单
怎么把视频制作成GIF动态图呢?相信大家在日常的聊天中喜欢使用各种表情包,一旦网络上出现一些有趣的热梗视频时,就会出现很多相关的表情包.我们也想将自己的视频或者是一些有趣的视频制作成GIF动态图应该怎 ...
- h5文字垂直居中_基于两款开源 h5 媒体编辑器定制一套海报系统
收到一份需求,是要制作一套在线海报系统,系统的参考样例如下图所示 分为资源展示站 海报的设计工具 这种平台现在市场上成功的有好多家,功能都较为完备并且模板十分丰富.这种需求往大了做可以称之为 DaaS ...
- loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...
最新文章
- Spring Security 和 Shiro 该如何选择?
- android魅族进度条,魅族基于安卓 10 的首个 Flyme 内测版已推送:16s Pro/16s 尝鲜,可强制开启 90Hz 刷新率...
- 下图为双总线结构机器的数据通路_PDPS机器人虚拟调试 弧焊仿真 第一课 弧焊项目创建...
- 电力笔记-30个行业专业词汇(Ⅰ期)
- kvm、qemu-kvm、ibvirt及openstack,之间的关系
- foreach输出mysql方法_mysql – “foreach”循环:使用R中的所有核心(特别是如果我们在foreach循环中发送sql查询)...
- Java图书管理系统(控制台程序)
- DOM元素节点属性outerHTML和innerHTML
- 科学研究设计七:单案例设计
- Win11磁盘清理在哪打开?
- 柴静调查:穹顶之下_调查:HTML5数据列表
- 极简椭圆曲线密码学入门
- GL-Studio 4.3-1 安装
- Google AAB测试
- 解决maven打包时手动添加的依赖jar包打不进去的情况
- 昨日黄花Hadoop 方兴未艾云原生——传统大数据平台的云原生化改造
- 使用cmd时cd命令失效
- WEB前端网页设计-Bootstrap 按钮下拉菜单
- 【渗透测试】SolidState靶机渗透练习_rbash逃逸+4555端口james服务漏洞
- 2021 年高教社杯全国大学生数学建模竞赛题目(D 题 连铸切割的在线优化)
热门文章
- 2018年支付宝领取大红包破解教程
- windows10加域/退域
- Windows10黑体字体
- Microsoft Edge 收藏夹如何显示在界面上方?
- html网页设计板报,html5做一个黑板报页面
- 如何触发‘isTrusted = true‘点击事件
- (3)Mathpix Snipping Tool——公式截图获取工具(转为LaTex、MarkDown格式)
- 那个找不到工作的iOS程序猿
- 如何听广播来学计算机,MAC使用技巧之苹果itunes如何收听国内的广播?
- 考公 | 粉笔网课笔记——数量 刘凯