浏览器动画与requestAnimationFrame

作为一枚前端呢,需要经常处理动画的问题,当然CSS动画在大多数场景下都是经济高效的选择,但也有着许多CSS动画无法满足的场景,如canvas下的动画效果,就无法使用CSS来实现。

这些场景下,我们不得不使用js来实现动画效果,但是js实现动画会有些什么问题呢?

大概的问题有以下几点:
1.掉帧
2.重复执行
3.并发动画

掉帧

掉帧就是指某些动画过程并没有展示到显示器上,这与显示器的刷新率有关,当js动画执行的频率与显示其刷新频率存在交错时,就很容易出现掉帧现象,此时我们需要的时一个接口,能够在显示器刷新的恰当时机执行我们的动画,这就是requestAnimationFrame

requestAnimationFrame

这是浏览器提供的接口,接受一个函数作为参数,该参数会在调用接口后的下一次显示器刷新之前被执行。

重复执行

当我们的动画效果较为复杂、或者包含了某些网络请求过程的时候,我们无法确定动画逻辑将会在什么时候执行,这时无论是以自定时间间隔还是以显示器刷新时间间隔执行动画时都有可能造成事件的重叠,即多个事件被交错执行,不仅浪费资源,还会造成动画混乱。这是我们应该使用标记的方式在执行动画重复逻辑时确保上一个动画过程已经被结束

并发动画

我们常常想要使得多个元素的不同的动画逻辑同时执行,但是js针对同一个页面是单线程的,也就是一颗dom树只能循序一个js线程来进行操作,因此真正的并发动画在现有技术条件下无法实现,我们应该尽量将动画逻辑放在一起执行,而不是执行多个setTimeout或者多个requestAnimationFrame

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,033评论 3 119
  • OnerWay 是当前得到上海市跨境电子商务示范园区扶持的跨境支付新兴企业之一,更是亚马逊官方推荐的收款方式之一。...
    SodaG阅读 2,637评论 0 3
  • 那一年,张贤亮去世了。 那是一个对我影响很大的作家。 我就到他的西部影城去看看,或许以后,这里的张贤亮元素会越来越...
    点石教育永生阅读 669评论 4 5
  • 这几天开始密集调整部门领导,听新任领导的工作规划,确定薪酬方案。人理不顺,事就不会顺。18年必须把中高管选好,用好!
    一世惊鸿阅读 158评论 0 0
  • 我有一个同事,只要张嘴说话我就特难受。倒不是他说话声音多难听,也不是跟他关系不好,就是因为他老是抱怨。 笑来老师说...
    冷冷无常阅读 494评论 6 1