css动画和js动画的区别?
CSS3的动画的优点:
- 在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)
- 代码相对简单
但其缺点也很明显:
- 在动画控制上不够灵活
- 兼容性不好
- 部分动画功能无法实现(如滚动动画,视差滚动等)
JavaScript 的动画正好弥补了这两个缺点,控制能力很强,可以单帧的控制、变换,同时写得好完全可以兼容IE6,并且功能强大。但想想 CSS动画的transform矩阵是C++级的计算,必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。
所以,对于一些复杂控制的动画,使用javascript会比较靠谱。而在实现一些小的交互动效的时候,就多考虑考虑CSS吧
刚翻到CSSTrick里面的比较文章:Myth Busting: CSS Animations vs. JavaScript。基本上跟我说的差不多。里面还附上了一个很有趣的结果,有兴趣也可以自己跑跑看:
Animated properties | JS更快 | CSS更快 |
top, left, width, height | Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS 6), iPad 3 (iOS7), Samsung Galaxy Tab 2, Chrome, Firefox, Safari, Opera, Kindle Fire HD, IE11 | (none) |
translate, scale | Windows Surface RT, iPhone 5s (iOS7), iPad 3 (iOS7), Samsung Galaxy Tab 2, Firefox, Opera, IE11 | iPad 3 (iOS6), Safari, Chrome |
要注意一下,测试的元素均脱离了文档流,同时采用的JS不是原生JS或jQuery.animate
,而是GSAP,后者采用了更多的技巧以优化动画播放。GSAP可以优化帧率的技巧可以看这里。
以实际项目经验而言,同一个上下文,两个方案做动画的效率差别不大,更加影响效率的是:
- 是否导致layout
- repaint的面积
- 是否是有高消耗的属性(css shadow等)
- 是否启用硬件加速
动态改变常规流元素的margin、height,将导致大面积layout过程,用JS或者CSS3是一样慢的。
动态改变元素的translate3D,自然开启了3D加速,用setTimeout
/setInterval
/requestAnimationFrame
和CSS3没有很大的帧速差别。
现今主要的不同点是
- 功能涵盖面,JS比CSS3大
- 定义动画过程的
@keyframes
不支持递归定义,如果有多种类似的动画过程,需要调节多个参数来生成的话,将会有很大的冗余(比如jQuery Mobile的动画方案),而JS则天然可以以一套函数实现多个不同的动画过程 - 时间尺度上,
@keyframes
的动画粒度粗,而JS的动画粒度控制可以很细 - CSS3动画里被支持的时间函数非常少,不够灵活
- 以现有的接口,CSS3动画无法做到支持两个以上的状态转化
- 定义动画过程的
- 实现/重构难度不一,CSS3比JS更简单,性能调优方向固定
- 对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码
- CSS3有兼容性问题,而JS大多时候没有兼容性问题