动画浅析

满满的好奇心

    在谈css3动画加速之前，先考虑几个问题：

    1.我们为什么要做动画？

    2.为什么推荐css3动画？

    带着这两个问题，我们一起探索一下关于动画加速的内容。

1.为什么要做动画？

        各位司机们一定会在脑海中浮现一个词－－“用户体验”。作为用户来讲，用起来爽，就是用户体验好，除了必须做到的性能加速，我们能不能在使用感觉上让用户感觉“上瘾”，不至于觉得无聊，也是改善用户体验的必经之路。除此之外，我们在请求接口的时候，难免遇到时间过长，数据量过大的问题，在用户等待的过程中，我们可以用动画来化解尴尬。

尴了个尬。。

2.为什么推荐css3动画？

        这里，并不是说其他方式行不通，那我们通过对比的方式来看一下动画之间的差异。（由于鄙公司要兼容万恶的IE，而且动画允许最低到IE10，下列对比内容有一些客观原因在内）

兼容性对比：(css, svg, canvas, webGL, Web Animations)

css animation:

css动画兼容

svg smil animation：

svg动画兼容

canvas 动画：

canvas动画兼容

webGL：

webGL动画兼容

Web Animations:

web animations动画兼容

从兼容性的角度，如果要兼容IE10，符合要求的只有CSS3和canvas。

易用性对比（css3,canvas）

css3:

优点：

    简单、高效

    声明式的

    不依赖主线程，采用硬件加速（GPU）

    简单的控制keyframe animation 播放和暂停

缺点：

    不能动态的修改或定义动画内容

    不同的动画无法实现同步（这个可以通过逗号隔开不同的动画，实现不同属性，不同的变化趋势函数）

    多个动画彼此无法堆叠(这个可以通过延迟去控制，animate支持用逗号隔开不同的动画)

canvas:

优点：

     画2D图形时，页面渲染性能比较高

    页面渲染性能受图形复杂度影响小

    渲染性能只受图形的分辨率的影响

    画出来的图形可以直接保存为 .png 或者 .jpg的图形

     最适合于画光栅图像（如游戏和不规则几何图形等），编辑图片还有其他基于像素的图形操作。

缺点：

     整个就是一张图，没有DOM节点可供操作

    没有实现动画的API，你必须依靠定时器和其他事件来更新Canvas

    对文本的渲染支持是比较差

    对要求有高可访问性（盲文、声音朗读等）页面，比较困难

     对交互要求高的（比如TIBCO的很多产品）的界面，不建议使用Canvas

通过对比发现，canvas适合做动画，如果去操作dom去写逻辑，或者遇到文本内容，我觉得还是css3比较靠谱。