html动画用css还是js,详解前端工程师常考面试题 |
您所在的位置:网站首页 › css动画和js动画的差异大吗 › html动画用css还是js,详解前端工程师常考面试题 |
01Js: 首先,js动画是逐帧动画,几乎可以完成您想要的任何动画形式。 但因为内容不同会增加生产负担,并且资源占用相对较大。 但是它的优点也很明显:非常适合执行非常精致的动画,例如3D效果,人物或动物的急转弯等。 但是,如果帧速率太低,则从一个帧到另一个帧的过渡很可能是不自然且不一致的。 缺点: JavaScript在浏览器的主线程中运行,还有其他JavaScript脚本、样式计算、布局、绘图任务需要在主线程中运行。干扰它们可能导致线程阻塞,从而导致帧丢失。 代码复杂度高于CSS动画。 优点: JavaScript动画控制能力很强,可以控制动画在播放过程中:开始、暂停、播放、终止、取消都可以完成。 动画效果比CSS3动画更丰富,一些动画效果,如曲线运动、冲击闪烁、视差滚动等效果,只有JavaScript动画才能完成。 CSS3有兼容性问题,而JS大多数时候没有兼容性问题。 例如: function mouseOver() { document.b1.src ="/i/eg_mouse.jpg" } function mouseOut() { document.b1.src ="/i/eg_mouse2.jpg" } 02Css3: 动画是使元素从一种样式逐渐变化为另一种样式的效果。 当实现一些简单的滑动,翻转和其他特殊效果时,Css3非常方便,但是当你想要实现一些很酷的效果时,它的操作通常比js操作具有更多的冗余。 在css3中制作动画时,浏览器可以进行一些优化,这将比js使用更少的cpu资源,但是效果足够流畅。 优点: (1)浏览器可以优化动画。 (2)代码相对简单,并且性能调整方向是固定的。 (3)对于帧速率性能较差的低版本浏览器,CSS3可以自然降级,而JS需要编写其他代码。 缺点: 1.运行过程的控制较弱,不可能附加事件绑定回调函数。 CSS动画只能暂停,无法在动画中找到特定的时间点,不能中途反转动画,无法更改时间比例,无法添加回调函数或将播放事件绑定到特定位置,并且没有进度报告 2。 代码冗长。 如果您想使用CSS来实现稍微复杂一点的动画,那么CSS代码最终将变得非常繁琐。 例如: div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } 总结: 如果动画只是简单的状态切换,不需要中间过程控制,在这种情况下,css动画是优选方案。 如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画,这样你的动画可以保持高效,并且你的工作流也更可控。 举报/反馈 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |