什么是动画
动画:许多静止的画面(称为帧),以一定的速度连续播放时,肉眼因视觉的残像产生错觉,而误以为是活动的画面。
帧:每一个静止的画面都称为帧。
播放速度: 以每秒播放多少帧表示,比如 每秒 24 帧(影视)或者每秒 30 帧(游戏)。
下面是使用 JavaScript 完全操作的一个简单动画,就是通过不断改变元素的 left
值,从而实现动画效果,但频繁通过 JS 去改变 dom
会导致性能不佳,为什么会这样呢? 这是 JS 线程和渲染线程之间需要跨线程通信。
如果我们通过 CSS 直接去产生动画,那么性能就能大大提升, CSS给我们提供了两个动画属性,一个是 transition
, 另一个是 animation
。transition
意为过渡 , 一般来说只有两个状态,从初始态到最终态,其中的过渡态由浏览器自动进行补全。animation
意为动画,比 transition
更为高级,它可以设置多个关键帧,制作出更加复杂的动画效果。
浏览器的渲染过程
- 根据 HTML 构建 HTML 树 (DOM)
- 根据 CSS 构建 CSS 树 (CSSOM)
- 然后 HTML 树 和 CSS 树 结合,生成 渲染树 (render tree)
- 进行布局 (Layout),包括 文档流、盒模型、计算大小和位置等。
- 进行绘制 (Paint),把边框颜色、文字颜色、阴影效果等画出来
- 最后合成 (Compose),根据层叠关系展示出画面。
当 CSS 属性发生改变的时候,浏览器就会重新进行渲染,这里就会引发出新的概念,叫做重绘和回流。
上图第一种情况称为回流, 它是指元素的大小和位置等发生改变,有可能导致重新布局,并且会发生重绘。
上图第二种情况称为重绘,它是指元素的颜色,背景等发生改变,不会导致重新布局。
上图第三种情况,既不会触发回流,又不会触发重绘,情况比较特殊。
如果想要查看哪些元素会触发回流,哪些元素会触发重绘,哪些元素既不会触发回流,也不会触发重绘,可以访问这个网站: csstriggers