当前位置:首页>新闻中心>团队动态>HTML5常见动效制作手法

团队动态 Valuable internet information


HTML5常见动效制作手法

关键词:网站建设 来源:南宁网站建设 作者:南宁网站制作 发布时间:2017-10-25 浏览次数:2290



H5,众所周知,可谓是火遍大江南北,到现在还是很流行的H5页面,为何H5那么受欢迎?简单的说,一个元素动往往比静更吸引眼球,一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验,而一个H5运营宣传页,借助这些优势,采用炫酷的动画特效进行传播并起到品牌打造的作用。

 

当然了,各式各样H5运营页的炫酷展现离不开“动效设计”,现在桂林手机网站建设和大家一同挖掘几种常见的H5动效制作手法。

 

1、GIF

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

 

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

 

2、逐帧动画

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

 

3、CSS3

CSS3应该是动画家族里绝对不会被遗忘的一名成员。这里我们定义它为擅长于平面层的动画。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。

 

4、SVG

SVG,也是动效制作中不可忽略的一大热门方法,我们定义它为擅长于线条的动画,弊端是:IE8,Android4.2及以下支持不好。


评论(0 条评论)
游客

QQ咨询

在线咨询真诚为您提供专业解答服务

咨询热线

0771-3805202
7*24小时服务热线

微信交流

云尚网站建设二维码扫一扫添加微信
首页
电话咨询
短信咨询
获取报价
提供您的想法
点击我,提交您的需求
00
:
30
只需30分钟
获取报价及开发方案