h5封装去底部_常用的H5动效制作方法

· 动效制作手法一：GIF

GIF图片是擅长制作细节的小动画，位图，优势在于 “体型”很小，可压缩，制作成本低。它以图片的形态存在，适用于各种操作系统，无兼容性的后顾之忧。缺点是压缩后失真率高，动画是定型不可操控的。

制作GIF动画的方式有很多，例如我们所熟悉的Photoshop时间轴，或是利用Flash，AE将动画导出存成GIF格式等等。大量的微信图文内的动图就是GIF来实现的。

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

· 动效制作手法二：逐帧/序列帧动画

逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。

step()在移动端的兼容性是很好的，但使用比较小众。

逐帧动画和GIF动画的差别在于，脚本可以控制逐帧动画的快慢和动作的暂停，而GIF动画无法在后期通过代码进行动画速率及透明度的修改。缺点体积过大，对加载来说是一个比较大的负担。

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

目前移动端上会用到自动播放动画或者视频的要求，但是直接嵌入会出现进度条和系统自带的播放按钮等元素。所以会把视频导出成序列帧来使用。

而序列帧技术那边还会把多张图合并成一张图导成精灵图来使用。

CSS图片拼合精灵图 可有效降低图片文件的HTTP连接请求，提升网站性能，提高用户体验。

是以多个图片按一定间距合并为一个大图片文件这样的形式。

在线拼合Sprites网址：

http://www.cn.spritegen.website-performance.org/

· 动效制作手法三：视频类动画

用视频输出会有非常特别的效果，具有很强的感染力。大部分的H5案例都是用视频套了一个H5的外壳。加入一些交互操作。

那前面的序列帧动画为什么不直接用视频呢？

其实这类视频H5都会一开始让你操作，点击开启，进入探索……其实会发现，你所点击的是一个播放视频的按钮，按钮去触发了之后的结果。

经典案例：《你有未接来电》、《纪念碑谷2安卓上线》

· 动效制作手法四：CSS

CSS3应该是动画家族里绝对不会被遗忘的一名成员。

这里我们定义它为擅长于平面层的动画。同样能实现很多空间拉伸变化的伪3D命令效果。CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持。

先来看个例子，来自阿迪达斯的H5运营页《罗斯-绝不凋谢》。视频直接观看H5效果：

http://v.qq.com/page/w/6/l/w0174ud2x6l.html

这些炫酷到没朋友的动画效果其实主要就是依靠CSS3编写完成的。

这里给大家介绍一下CSS3的动画三大属性：

Transform 变形，Transition 过渡，和Animation 动画。

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

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

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

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

建议使用“案例Demo或者分镜头脚本+动画属性分解表+素材切图”的套装！

以下图为例：这是一个点击反馈的小动画，我们可以使用”动画属性动效表”的方式。可以让工程师根据表格内填写的数值进行动画的编写，会比凭空的和工程师进行交流传达，来的更精准一些。

动画属性分解表示例：

倩女幽魂手游的葫芦娃推广移动官网，滑屏弹出葫芦娃动效表：

· 动效制作手法五：SVG

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

SVG，是可缩放矢量图形(Scalable Vector Graphics)， 是被存成了 XML 文本格式的图像，没有真实的图片像素存在占储存空间。缺点是实现成本不太划算，要手动去写，而且大量的运算会造成卡顿。

这里必须要注意的点是：如果你想制作一个SVG动画，请一定要使用AI工具绘制输出矢量图给到工程师哦。

· 动效制作手法六：Canvas

作为HTML5的新标签 ，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

它本身是没有绘图能力的。所有的绘制工作必须依赖 JavaScript 完成。我们定义它为擅长于绘画的动画。

如下图，绘制这样一个大量元素下落的动画效果，就是Canvas所擅长的。

Canvas可以算是SVG的堂兄弟。大部分的图表动画，都是由Canvas或是SVG制作而成的，二者的动画能力相似但也有以下这些区别：

• canvas是画框，有自己固定的高宽，svg是不依赖分辨率的矢量，可以任意放大缩小。

• canvas能以.jpg的格式保存图像，svg是文本的格式保存图像

• canvas适合图像密集型的动画，而svg不适合大量使用，例如制作飘雪等

• canvas完全依赖脚本绘制作，而svg可直接使用矢量转存生成。

http://changegout.com/(三维人物模型)

WebGL：一种3D绘图标准，要依赖canvas运行。

· 动效制作手法七：JavaScript

其实，只要是涉及到交互反馈的动画，小至滚屏翻页，大到重力感应等都需要js进行处理脚步的编写。也就是说，所有的动画特效都离不开Javascript同学的支持。

市面上有很多特别的Javascript脚本库，例如jQuery.js；three.js，细细运用，就可以做出非同凡响的动画效果。

前面提到canvas所有的绘制工作必须依赖JavaScript完成，而我们要制作三维模型放入网页中就是这个道理，技术使用了three.JS这个库，在canvas这个画布上用JS这个画笔画出了三维模型。

举例AI官网：

http://test.nie.163.com/test_html/fuxi/qiehuan/#project

· 动效制作手法 番外篇1：Flash->Canvas

除去上面几种常见的手法，Flash转Canvas的方法也是比较火的一种形式。

既然提到曾经辉煌的Flash，那产出物必须离不开炫酷这个形容词：通过Flash cc制作复杂又精细的动画，导成Canvas文件，动画中的交互操作，依赖Create.js的脚步库完成。

视频直接看H5效果：

http://v.qq.com/page/o/m/7/o0174u3cim7.html

之前尝试用AN新建H5 canvas制作发现安卓机子跑动不是很顺畅，技术这边发现使用一个pixianimate插件，相比前一个用createjs库，而后一个用的是pixijs库，封装的东西更好，适配的也更好。

举例逆水寒移动官网：

· 动效制作手法 番外篇2：AE->JS

AE制作json文件格式动画以及lottie开源库的使用，比较适合MG动画和UI类动效。

最后汇总H5动效常见的制作手法，并加以理解，设计师自己制作的时候就能先第一时间判断后续制作原理。

TIPS：怎么看自己找到的网站是用什么形式做的动效内容呢？

大家看到好的网址，可以尝试用谷歌浏览器的开发者工具中的appliation存储信息，去查看当中的切图。学习这个站点是怎么做的，设计师应该怎么处理图层逻辑。