整理 - JS动画和CSS动画特点及区别

JS动画和CSS动画特点及区别

CSS动画

优点

1） 浏览器可以对动画进行优化。

1、浏览器使用与 requestAnimationFrame 类似的机制，requestAnimationFrame比起setTimeout，setInterval设置动画的优势主要是：

• requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔仅仅跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
• 在隐藏或不可见的元素中 requestAnimiationFrame 不会进行重绘或回流，这当然就意味着更少的cpu,gpu和内存使用量。
  2、 强制使用硬件加速（通过GPU来提高动画性能）

2）代码相对简单、性能调优方向固定

3）对于帧数表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码。

缺点

1、运行过程控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停，不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或绑定回访事件，无进度报告。

2、代码冗长。想用CSS实现稍微复杂一点动画，最后CSS代码都会变得非常笨重。

CSS动画流程的原因

渲染线程分为 main thread（主线程）和compositor thread（合成器线程）。

如果CSS动画只改变transform和opacity ，这时整个CSS动画得以在compositor thread完成（而JS动画则会在 main thread 执行，然后触发 compositor 进行下一步操作），所以，当在JS执行一些昂贵的任务时，main thread 繁忙， css动画由于使用了 compositor thread 可以保持流畅。

在主线程中，维护了一棵Layer树（LayerTreeHost），管理了TiledLayer。

在compositor thread，维护了同样一棵LayTreeHostimpl，管理了Layerimpi。

这两棵树的内容是拷贝关系。因此彼此不干扰，当JavaScript在 main thread 操作 LayerTreeHost 的同时， compositor thread 可以用 LayerTreeHosttimpl 做渲染。当 JavaScript 繁忙导致主线程卡住时，合成到屏幕的过程也是流程的。

鼠标键盘消息会被首先分发到 compositor thread， 然后再到 main thread。这样，当 main thread 繁忙时， compositor thread 还是能够相应一部分消息。

例如，鼠标滚动时，假如 main thread 繁忙，compositor thread 也会处理滚动消息，滚动已经被提交的页面部分（未被提交的部分将被刷白）

JS动画

优点

1、JavaScript动画控制能力很强，可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。

2、动画效果比CSS3动画丰富，有些动画效果，比如曲线运动，冲击闪烁，视差滚动效果，只有JavaScript动画才能完成。

3、CSS3有兼容性问题，而JS大多时候没有兼容性问题。

缺点

1、JavaScript在浏览器的主线程中运行，而主线程中还有其他需要运行的 JavaScript脚本、样式计算、布局、绘制任务 等，对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。

2、代码的复杂度高于CSS动画

总结

如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，CSS动画是优选方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥JavaScript库。然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的APP。那么你应该使用JS动画，这样你的动画可以保持高效，并且你的工作流也更可控。所以，在实现一些小的交互互动的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用JavaScript比较可靠。

差异

1、代码复杂度，js动画代码相对复杂一些。
2、动画运行时，对动画的控制程度上，js能够让动画，暂停、取消、终止，css动画不能添加事件。
3、动画性能看，js动画多了一个js解析的过程，性能不如css动画好。