欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

HTML5 动效的常见制作方法

发布时间:2017:10:04 15:04:19 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1539个文字,预计阅读时间4分钟
导语
海淘科技为你推出众所周知,HTML5 动效的常见制作方法。一个元素,动往往比静更吸引眼球;一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页,炫酷的

智唯网络为你推出众所周知,HTML5 动效的常见制作方法。一个元素,动往往比静更吸引眼球;一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造。近两年,小到loading动画,表单动效,大到各式各样H5运营页的炫酷展现,“动效设计”一词可谓是火遍大江南北,而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例,和大家一同挖掘几种常见的H5动效制作手法。

我们由浅入深来挖掘这动效制作的秘密,一个入门级的小问题:看上图这几个动画例子,大家是否能说出这动画是如何制作出来的呢?而又是如何在网页之上呈现的呢?

对,答案必须是设计师们都非常熟悉的gif小动画了,H5动效制作的第一手法,便是GIF了。

动效制作手法1:GIF

推荐阅读:佛山网站建设教你如何判断Hhtml5自助建站系统哪个比较好?

GIF图片擅长于制作细节的小动画,位图,优势在于 “体型”很小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。制作GIF动画的方式有很多,例如我们所熟悉的Photoshop时间轴,或是利用Flash,AE将动画导出存成GIF格式等等。

HTML5 动效的常见制作方法

GIF动画最常在H5动效里当担loading导航条,热门小标签等元素,要把控图片大小和精度之间的平衡,所以它一般用于制作小细节的动画。

HTML5 动效的常见制作方法

H5页面承载GIF图片的方式相对以下要介绍的其他方法,是最省成本,最为简便的。只需要以背景图片/内容图片的形式在页面上进行引用即可。

聊完了GIF动画的一些特点,那么我们必须同时对比一下它的堂兄弟:逐帧动画 。

动效制作手法2:逐帧动画

逐帧动画即是利用一张等间距的动画分解逐帧图片,由js脚本模拟编写或是使用css3新属性step()制作而成。step()在移动端的兼容性是很好的,但使用比较小众。逐帧动画和GIF动画的差别在于,脚本可以控制逐帧动画的快慢和动作的暂停,而GIF动画无法在后期通过代码进行动画速率及透明度的修改。

做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片.png”,再通过JavaScript脚本或CSS3 animation的过度函数step() 来控制图片的background-position,二者结合就可以快速输出一个逐帧动画啦。

HTML5 动效的常见制作方法

从以往的经验看GIF动画或是逐帧动画,我们往往认为它们只适合做一些小细节的动画。其实二者也可以承载一些很独特的动画效果!如以下这个例子,这是陌陌的一个宣传h5页面,它便是由逐帧分解图+JavaScript脚本模拟逐帧动画 拼合而成的。

HTML5 动效的常见制作方法

HTML5 动效的常见制作方法


动效制作手法3:CSS3

CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。先来看个例子,来自阿迪达斯的H5运营页《罗斯-绝不凋谢》:

HTML5 动效的常见制作方法

这炫酷到没朋友的动画效果其实主要就是依靠CSS3编写完成的。这里给大家介绍一下CSS3的动画三大属性:Transform 变形,Transition 过渡,和Animation 动画。

Transform 变形:拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效,罗斯的例子中,便是对充分结合了这几个变化特效的产物。

Transition 过渡:拥有修改执行变换的属性,时长,速率和延迟时间的能力,大家都很熟悉的贝塞尔曲线,也是归属于transition的设定之下的。

***拓展工具:贝塞尔定制传送门***

Animation 动画:若将Transform解释为动作,Transition解释为过渡,那么Animation则是连续的几个动作,即动画。Animation可以我们设定keyframes的值,,让元素在一段时间内完成多个动作。


然而我们如何高质高效把动画设计传达给工程师呢?

这里来个小小的Tips:建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套装!以下图为例:这是一个点击反馈的小动画,在无法提供Demo的时候,我们可以使用”动画属性分解表”的方式。动画属性分解表可以让工程师根据表格内填写的数值进行动画的编写,会比凭空的和工程师进行交流传达,来的更精准一些。

动画属性分解表示例:

HTML5 动效的常见制作方法

动效制作手法4:SVG

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:网页设计中,如何让字体和图片搭配得更加好看

下一篇:2016年网页设计新趋势:3D页面效果成为未来

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信