什么是HTML5？

HTML5简称H5；在大众视野中，H5往往等同于在社交网络里看到的广为传播的富有创意且可互动的网页。在专业视野中，不管是HTML5和H5，这两种说法从严格意义上来讲都不是指单一的编程语言，而是一系列web技术结合的产物，涉及的技术主要包含HTML5、CSS3、和Javascrip这3种。

HTML5：承载页面的内容，如文字、图片、表单及视频等。

CSS3：定义网页的各类样式、如按钮的大小、段落的距离、页面的布局以及文字的颜色等所有和样式相关的内容。

JavaScript：在网页中，JavaScript的作用是让人可以与网页元素进行交互。例如，它可以控制弹窗的出现和消失、页面标签的切换、链接的单击，菜单的展开与折叠。

一、动画实现1？——原生动画

 什么是原生动画？

原生动画就是指无需前端工程师通过代码实现即可直接在页面观看到的动画。在具体的实现过程中一般由不同分工的设计师输出动画文件，然后由前端工程师简单处理后，即可在页面上实现动画浏览。

常见的原生动画输出格式有GIF\Flash\Vido(MP4)和APNG。

1、GIF

是一种位图图形文件格式、以8位色重现真彩色的图像。适用于动画面积少、颜色数量少、背景色较浅的微动效上。不适用需要连续播放的图标动画或动态表情图标。

优势:

（1）浏览器原生支持，直接通过<img>图片标签即可插入页面中。

（2）设计师只要制作完毕，就能直接放在网页中，无须额外处理。

劣势：

（1）颜色不够丰富，256种颜色的表现力有限，而且不支持半透明，图片边缘有毛刺。

（2）不管GIF是否可见，网页都会一直渲染GIF图，当页面出现很多GIF动图的情况下，网页会出现明显的卡顿现象，性能也不够好。

（3）没有交互能力，无法人为的暂停与播放。

2、Flash

优点：

（1）矢量动画，缩放都不失真。

（2）呈现同样的动画效果、Flash要比GIF小得多。

（3）支持视频流式播放，边下载边播放。

（4）交互能力较强，能实现动画的播放、暂停、进度调整和人为触发/控制/改变动画等操作。

（5）动画制作过程中由Flash动画设计师输出文件，前端无工作量。

缺点：

（1）过于臃肿、需要大量的计算资源、导致手机发热、影响续航。

（2）安全问题频出、造成浏览器崩溃、影响操作系统。

3、Video

优点：

（1）表现力优秀，几乎没有无法呈现的效果。

（2）可以边加载边播放，缓解文件体积大带来的问题。

（3）不需要工程师编码，由制作视频的人员输出。

缺点：

（1）虽然可以边下载边播放，但在弱网络环境下它的体积依旧是影响页面效果的重要因素。

（2）由于存在解码的过程、且视频的分辨率普遍较高，比较消耗机器性能，带来发热耗电的问题。

（3）交互能力弱，只能实现动画播放、暂停、进度调整等。

（4）视频本身无法做到背景透明。

4、APNG

APNG是动画格式的PNG。APNG的图片格式依旧是.png,如果不支持APNG的浏览器，只会默认显示第1帧，而支持APNG的浏览器，会正常播放PNG序列。

优点：

（1）是一种无损压缩的位图图形格式。

（2）支持Alpha通道，即支持半透明、不透明以及介于两者之间的不同层次的半透明。

（3）支持24位的真彩色、能承载比GIF更丰富的细节。

（4）IOS8以上原生支持、性能和GIF类似。

（5）通过合理的压缩手段、体积反比GIF小20%-30%，但效果更优

（6）动画序列帧同样有设计师提供，前端工程师无工作量。

缺点：

（1）Android系统中浏览器并无原生支持，PC端支持甚少。

（2）如果动画帧数过大，文件体积还是较大的。

（3）不可交互、不能控制暂停播放。

二、动画实现2？——CSS3动画

1、Tranform(变换)效果具体表现：

Translate(位移)：让网页元素从平面（x1,y1）点移动到（x2,y2）点

Scale(缩放)：让网页元素放大缩小

Rotate(旋转)：让网页元素绕这某个点旋转

Skew(倾斜)：让网页元素发生倾斜变形

Matrix(矩阵)：把上述4种变换组合在一起

#box{

      tranform:translate(10px,0) roate(90deg) scale(1,5) skew(10deg,0)

}

*将网页元素水平位移10px，顺时针旋转90°，同时放大到1.5倍，最后水平倾斜10°

2、Animation(动画)

由一系列Keyframe组成“关键帧”。它可以创建帧动画、路径动画、物理动画和组合动画。

@Keyframes animation-name{

      0%{

              height:0px;

              transform:translate(0,0);

       }

      50%{

              height:50px;

              transform:translate(10px,10px);

       }

      100%{

              height:100px;

              transform:translate(20px,20px);

       }

}

*动画表为：当进度为0%的时候，网页元素的高度0，不做变化；当进度为50%的时候，网页元素高度开始变换为50px，且水平位移到（10px,10px）这个点的位置；当进度为100%的时候，网页元素高度变换为100px,且水平位移移动到（20px,20px）这个点的位置。

当把变换属性变为一帧一帧的图片时，就是逐帧动画，如下：

@Keyframes animation-name{

       0%{

              background-image:url(图片第一帧)

       }

      50%{

               background-image:url(图片第二帧)

       }

      100%{

              background-image:url(图片第三帧)

       }

}

3、Transition（过渡）

一般用于搭配CSS属性来做补间动画。如把一个正方形从100px慢慢减少到1px. 

#box{

      transition:width 1s ease 1s;

}

width：表示要做补间动画的属性（如with是宽度），只有支持动画的属性才能被transition使用

1s:表示过渡动画的时长或者动画开始前延迟的时间。

ease:表示动画函数，ease表示逐渐缓慢；linear表示匀速； ease-in表示加速； ease-out表示减速；还支持贝塞尔曲线（ cubic-bezier）

设置好过渡效果后，当通过JavaScript或其他方式改变了网页元素的宽度时，便可以看到它的过渡效果了。

CSS3动画优劣：适用于目前大部分网页的动画场景，除了复杂的光影/粒子等特效、复杂的变形动画/路径运动、三维模型动画以及骨骼动画等，CSS可以说是目前最理想的动效实现方案。

优点：

（1）动画代码量非常小，即使是Keyframe代码也比一个动画文件小的多

（2）性能非常好，只要是CSS3写的动画，基本不需要考虑性能的问题

（3）交互性极强，由于动画是通过代码编写的，可以任意控制（配置脚本语言）

（4）浏览器从底层优化动画序列，如当Tab不可见的时候，降低更新的频率提高整体性能

缺点：

（1）实现成本中等，时间在可以接受的范围，基本不会影响整个项目的进度

（2）表现力一般，由于都是由简单变换组合而成的，自然不如Video的表现力强

三、动画实现3？——CSS2+JavaScript 动画

（和CSS3能做的事情基本上是一样的，现在两者更多的是融合在一体的。唯一的差异是，通过JavaScript来控制动画，要比CSS3动画更加灵活可控，更能模拟自然运动。）

在CSS3出现之前，CSS本身并不具备动画能力，而是需要结合JavaScript来制作动画，原理即通过脚本语言的定时器一帧一帧的控制CSS属性，从而产生动画。

优点：

（1）兼容性强、基本全支持

（2）文件体积与CSS3一样都很小

（3）互动性极强，由于动画是通过代码编写，可以任意控制。

缺点：

（1）由于通过JavaScript来控制动画，则有可能在JavaScript阻塞动画也卡顿，丢帧。

（2）实现成本比CSS3要高一些，虽然不成问题，但大多数情况下可被CSS3取代。

*CSS3、CSS2+JavaScript统称CSS+JavaScript

四、动画实现4?——Canvas+SVG

（由于Canvas/SVG有较明确的使用场景，开发相对耗时，且在移动端性能较差，所以只有在场景非常契合的时候建议使用）

HTML中的一些标签可以用来承载动画，其中最典型的是Canvas\SVG这两种标签。但它们不只是网页中的节点，而且动画内容是通过JavaScript来编写的。

1、Canvas（可理解为画布，作为一张画布，它可以被绘制任何内容）

优点：

（1）兼容性强、所有移动端浏览器都支持

（2）文件体积小、都是代码编写

（3）表现力较强，可以做出很炫酷的效果

（4）交互性好，因为是脚本编写的动画

（5）Canvas只占用一个DOM节点，在做一些烟花、飘雪等运动元素很多的动画时，会比CSS/SVG性能好

缺点：

（1）纯脚本编写，实现成本高

（2）涉及复杂运算的动画，Canvas在手机上的性能不是很好，如三维场景的渲染，粒子动效等。

使用场景：

（1）数据可视化的基石之一、展示图标内容

（2）把视频绘制到画布中，可以规避Video在移动端的一些问题

（3）通过对画布中的每个像素点进行加工处理，实现滤镜或刮刮卡功能

（4）通过WebRTC对摄像头视频流进行处理实现AR/图像识别/直播/聊天室等功能（）

（5）承载WebGL的渲染内容，将三维世界带到网页中。

2、SVG

SVG是一种图像格式、矢量不失真。

优点：

（1）文件体积小、纯代码编写

（2）矢量高清、缩放不失真

（3）交互性较好、可以通过交互实现动画执行与暂停。

缺点：

（1）兼容性一般、IOS全支持、Android3以后开始支持

（2）不涉及非常多的节点动画时、性能一般；节点多时，性能较差。

（3）实现成本较高，除了脚本编写动画，还需设计师输出路径导出

（4）表现力一般，因为其定位有所偏向，主要是基础点线面的矢量形变与移动动画

使用场景

（1）数据可视化基石之二，展示高清图表内容。

（2）取代ICONfont作为新的图标实现方式

（3）定义路径制作非常自然的路径动画

（4）定义不同的形状，产生顺化的形变路径

*五、动画实现5？——WebGL

WebGL是Web高阶的一部分。WebGL是基于OpenGL ES2.0提供了3D图像的程序接口，即WebGL是OpenGL ES2.0的Web版封装，它使用HTML5 Canva并利用文档对象模型接口。

WebGL是一项利用JavaScript API渲染交互3D计算机图形和2D图形技术。

优点：

（1）相比其他方式实现等同的效果，其文件会小非常多（但需要引入一个 较大的库）

（2）表现力非常好、基本可以和3D软件媲美

（3）由于代码实现，交互能力好

缺点：

（1）移动端兼容性已基本达到可用阶段，一些不可用的手机需降级处理

（2）由于涉及非常庞大的运算，移动端性能是一个非常大的问题

（3）实现成本非常高、时间长、开发者还需具备其他领域的知识

适用场景

（1）3D模型制作与渲染

（2）全景场景构建

（3）Web虚拟现实

（4）3D游戏制作

*随着手机硬件和手机性能的不断提升，WebGL必将是未来的主流的动效实现方式，因为它可以带来非常完美的交互体验和效果，为设计师的想象力提供技术保障。并且对于设计师和前端开发来说，掌握三维建模的相关知识变得非常必要。

六、动画实现6？——通过第三方动画制作软件导出 

Animate CC/ After Effects/Hype

——学习书籍《UI动效大爆炸 After Effects移动UI动效制作学习手册》