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比较可靠。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhheigea
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13