js动画与css3动画的区别

Posted 2021-12-12 永远没有404

欢迎学习交流！！！
持续更新中…

文章目录

• JS动画（逐帧动画）
• css3（补间动画）
• 总结

---

JS动画（逐帧动画）

       首先，在js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以其可操作性很高，几乎可以完成任何想要的动画形式。但是由于逐帧动画的帧序列内容不一样，会增加制作负担，且资源占有比较大。

       但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。正是由于js对动画的操作复杂度比较高，能对动画有一个比较好的控制，如开始、暂定、回放、终止、取帧等，可以很精确的做到。因此可以js可以通过操作DOM和BOM来做一些酷炫的动态效果，以及爆炸特效，且兼容性比较好。

       但是，如果帧率过低的话，会导致帧与帧之间的过渡很可能会不自然、不连贯。

缺点：

• js是单线程的脚本语言，当js在浏览器主线程运行时，主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务，对其干扰线程可能出现阻塞，造成丢帧的情况。
• 其次，js在做动画的时候，其复杂度是高于css3的，需要考虑一些计算，操作等方便问题。

优点：

• javascript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
• 动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成
• CSS3有兼容性问题，而JS大多时候没有兼容性问题

css3（补间动画）

       css3动画的制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可，两个关键帧之间帧的内容由Composite线程自动生成，不需要人为处理。当然也可以多次添加关键帧的位置。

       因为只设置几个关键帧的位置，所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画，或者在动画过程中不能对其进行一些操作等。

       css3在实现一些简单的滑动，翻转等特效的时候会很方便，但是想要做到一些酷炫的效果的时候，其操作往往可能会比js操作有更多的冗余。

       css3在做动画的时候，浏览器可以对其进行一些优化，会比js使用更少的占用cpu资源，但是效果足够流畅。

缺点：

• 运行过程控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
• 代码冗长。如果想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

优点：

• 浏览器可以对动画进行优化。
• 代码相对简单,性能调优方向固定
• 对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

总结

       如果动画只是一些简单的状态切换，滑动等效果，不需要中间的控制过程，css3是比较好的选择，它直接在css文件中就可以实现，并不需要引入太多的js库。

       而想做一些复杂的客户端界面，开发一个复杂ui的app，实现一个复杂纹理动画等，需要对页面进行精准的控制计算，应该使用js动画，这样动画可以保持高效，并且工作流也更可控。

       因此，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。