css 动画详谈

最近突然想到了一个问题,js的单线程与浏览器的多进程在页面上执行css动画与js脚本的时候究竟是怎么配合的。写一篇文章来详细的讲下这个之前被忽视的点。

js动画

其实动画实际上就是一连串的动作的组合,在基础的动作上加上 变形 、 渐变 等配合构成了页面上丰富多样的动画。用js实现动画的本质上是控制 dom 来完成。

requestAnimationFrame

requestAnimationFrame 的方法告诉浏览器重绘之前应该调用此函数来执行动画,更像是专门告诉浏览器js需要执行动画了 在下一次重绘前请先调用哦。

由于浏览器帧数的限制每秒为60帧,很多情况下动画渲染往往达不到满帧的效果而显得卡顿(如使用sertimout的情况下),但是 requestAnimationFrame 的传入的回调通常都是每秒60次的执行。所以 在动画流畅程度上还是有很大的优势的。

settimeout && setinteral

通常老旧的动画实现,不过受制于js线程的执行,往往在时间上不能完全符合预期而造成的动画卡顿的情况出现。

css动画

css动画通常指的是使用 animate 创建的css动画,因为之前写过一篇文章 在此就不再详细的介绍了。
使用css动画与transition结合可以指定动画执行的时间与执行的方式,当然 animate 关键字中包含了这个,不过可以额外的单独列出来。

reflow & repaint

浏览器执行动画会引起重绘与回流。而重绘的代价是巨大的,浏览器为了在固定的时间内能完成任务。有的时候就会省略一些中间的动作,这在页面上表现出来的就是掉帧

hi you can see me