CSS动画剖析

动画的原理

静止的画面以一定的速率连续改变，导致眼球出现视觉残影的错觉，就形成了动画。

前端如何做动画

1. 使用js控制元素的Left定位，用计时器快速移动元素
2. 用transfrom

总结就是：用transfrom的性能好

理解transform

转换的意思，在浏览器渲染是会自动补充动画过程

浏览器的渲染过程

步骤

• 根据HTML构建HTML数（DOM）
• 根据CSS构建CSS树（CSSOM）
• 将上面的两个数合并成一个渲染树（render tree）
• Layout布局（文档流、盒模型、计算大小和位置）
• Paint绘制（把边框颜色、字体大小、阴影等画出来）
• Compose合成（根据层叠关系展示画面）

如何更新样式

一般我们使用JS来更新样式

• 如：div.style.background = ‘red’
• 如：div.style.display = ‘none’
• 如：div.classList.add(‘red’)
• 如：div.remove() 直接删掉节点

3种更新方式

第一种：全走

对应：div.remove()，当前元素消失，其他元素relayout

第二种：跳过layout

对应：改变背景颜色，直接replaint + composite

第三种：跳过layout和paint

对应：改变transform，只需composite

注意查看时需要开启chrome的paint flashing

如果不想自己一个一个属性触发那个更新方式，可以参考csstrigger.com

CSS动画优化

具体参考 google 的文章

JS优化

使用requestAnimationFrame代替setTimeout或setInterval

CSS优化

使用 will-change 和 transform的translate

chrome调试-paint flashing

打开开发者工具后，点击三个点更多找到moreTools里的rendering，开启paint flashing。

效果是： 页面上所有被重绘的块会被高亮的显示（绿色）