杭州ui培训
达内杭州ui培训中心

0571-56020830

热门课程

达内:HTML 5 动效设计的八种手法

  • 时间:2015-12-10
  • 发布:杭州UI培训
  • 来源:优设网


    合理的动效设计能够带给用户良好的体验,一个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设计培训专家表示,网页设计师可以根据不同情况,选用动效设计手法,制作出属于自己的优秀动效设计效果。


上一篇:设计干货!25条史诗级平面设计技巧
下一篇:404页面设计技巧及优秀案例鉴赏

795万高校毕业生创历史新高,2017届毕业生就业近况几何?

达内副总裁齐一楠接受新浪专访,解读2016达内耀升级

达内教育总裁韩少云受邀出席GIE国际教育峰会做主题演讲

响应全球编程一小时 达内微软推出“发现杯”中国青少年编程挑战活动

选择城市和中心
贵州省

广西省

海南省