满满的好奇心
在谈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比较靠谱。
网友评论