js动画和css动画的区别是什么

青灯夜游
Freigeben: 2021-11-18 16:32:30
Original
4497 Leute haben es durchsucht

区别:1、js是逐帧动画,每一帧都是由代码控制,代码复杂度高;而css是关键帧动画,补间动画部分由浏览器完成,代码复杂度低。2、js的动画执行在主线程,容易引发阻塞和等待;css的动画执行在合成线程,专事专干,不阻塞主线程。

js动画和css动画的区别是什么

本教程操作环境:windows7系统、CSS3&&javascript1.8.5版、Dell G3电脑。

js动画和css动画的区别

区别一:

js是逐帧动画,每一帧都是由代码控制,操作不当,极易引发回流

css是关键帧动画,补间动画部分由浏览器完成,便于浏览器进行优化,动画执行过程控制的更好

js动画的代码复杂度高于CSS动画

区别二:

js的动画执行在主线程,主线程还有其他任务要执行,容易引发阻塞和等待,降低动画执行效率

css的动画执行在合成线程,专事专干,不阻塞主线程,合成线程的动画也不会触发回流和重绘

CSS动画

优点:

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

(2)代码相对简单,性能调优方向固定

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

缺点:

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

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

JS动画

优点:

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

(2)动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaScript动画才能完成

(3)CSS3有兼容性问题,而JS大多时候没有兼容性问题

缺点:

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

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

小结

如果动画只是简单的状态切换,不需要中间过程控制,在这种情况下,css动画是优选方案。

它可以让你将动画逻辑放在样式文件里面,而不会让你的页面充斥 Javascript 库。

然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画,这样你的动画可以保持高效,并且你的工作流也更可控。

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

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt vonjs动画和css动画的区别是什么. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!