课程咨询 :0571-56020837 QQ:162157806

南昌达内UI名师

南昌UI培训 > 达内新闻 > 由浅入深的8个HTML5动效设计
  • 由浅入深的8个HTML5动效设计

    发布:南昌UI培训      来源:优设网      时间:2015-12-10


  •     合理的动效设计能够带给用户良好的体验,一个H5运营宣传页,离不开酷炫的动效设计。动效设计可谓是网页设计师最需要掌握的技能之一了,达内ui设计培训专家总结了八种 HTML5 动效设计手法,由浅入深的帮助大家提升网页设计能力。

        1:GIF

        GIF图片擅长于制作细节的小动画,位图,体型小,可压缩,制作成本低,以图片的形态适用于各种操作系统,无兼容性的后顾之忧。我们可以用Photoshop时间轴,或Flash,AE将动画导出存成GIF格式,轻松制作GIF动画。

        GIF动画最常在H5动效里当担loading导航条,热门小标签等元素,一般用于制作小细节的动画。

        H5页面承载GIF图片的方式是最省成本,最为简便的。

        2:逐帧动画

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

        做一个逐帧动画我们需要一张等间距的“动画分解逐帧图片.png”,再通过JavaScript脚本或CSS3 animation的过度函数step() 来控制图片的background-position,快速输出一个逐帧动画。

        3:CSS3

        CSS3是动画家族里颇有存在感的一名成员。CSS是擅长于平面层的动画。CSS3的缺陷在于其部分属性没有被浏览器良好的支持。

        CSS3的动画具有的三大属性:Transform 变形,Transition 过渡,和Animation 动画。

        Transform 变形:拥有 rotate 旋转 skew 扭曲 scale 缩放 translate 移动 matrix 矩阵变形五大特效。

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

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

        4:SVG

        SVG,也是动效制作中不可忽略的重要方法,SVG是擅长于线条的动画,弊端是:IE8,Android4.2 及以下支持不好。

        SVG,是可缩放矢量图形(Scalable Vector Graphics), 是被存成了 XML 格式的图像,特点是:

        可被多种工具读取和修改
        尺寸更小,可压缩性更强
        矢量
        纯粹的 XML

        一张SVG图是由一堆的定位锚点连线生成的,因此可以很方便的存为文档格式。而页面中的引用,也是简单的将此文本引入即可。

        5:Canvas

        HTML5 的新元素 <canvas>,类似画板,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。Canvas 是擅长于绘画的动画。

        网上所见的多数图表动画,都是由Canvas或是SVG制作而成的,二者类似,但也有不少区别:

        canvas是画框,有自己固定的高宽,svg是不依赖分辨率的矢量,可以任意放大缩小。
        canvas能以.jpg的格式保存图像,svg是文本的格式保存图像
        canvas绘制的图像不占DOM,而svg的每个图像都是1个DOM元素
        canvas适合图像密集型的动画,而svg不适合大量使用。
        canvas完全依赖脚本绘制作,而svg可直接使用矢量转存生成。

        6:Flash->Canvas

        Flash转Canvas的方法也是最近非常火爆的方式。通过Flash cc制作复杂又精细的动画,导成Canvas文件,动画中的交互操作,依赖Create.js的脚步库完成。

        7:video

        用视频输出非常特别的动效。

        8:JavaScript

        但凡是涉及到交互反馈的动画,小至滚屏翻页,大到重力感应等都需要js进行处理脚步的编写。所有的动画特效都离不开Javascript支持。网上有不少Javascript脚本库,只要加以利用,就可以酷炫的动画效果。

        总结:

        达内ui设计培训专家表示,网页设计师可以根据不同情况,选用动效设计手法,制作出属于自己的优秀动效设计效果。


    推荐文章

上一篇:404页面设计趋势及优秀设计案例

下一篇:北京商报教育论坛,达内分享O2O模式成功原因

最新开班日期  |  更多

UI设计培训免费训练营

UI设计培训免费训练营

开班日期:每周一

UI设计培训高级班

UI设计培训高级班

开班日期:每周一

UI设计培训全日制班

UI设计培训全日制班

开班日期:每周一

UI设计培训周末班

UI设计培训周末班

开班日期:每周一

  • 地址:南昌市北京西路156号洪城大厦10楼
  • 课程培训电话:0571-56020837 QQ:162157806     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.com.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56