css的动画

时间:2021-1-9 作者:admin

动画的原理

其实我们能够看到动画,就是脑子的一个bug。当我们观看一个物体运动时候,如果在一秒内他的像能不间断的改变很多次时,此时我们肉眼就会因视觉残象产生错觉,误以为这是活动的画面。此时引入概念如下:

  • 帧:每个静止的画面就叫做帧
  • 播放速度:每秒24帧(视频)或者每秒30帧(游戏)以上播放,肉眼就觉得它在动了

对此,我们用js也能实现一个简单的动画,请看代码链接:运动的盒子
这段代码的原理就是之前说的,没过1000/60毫秒,就进行一次运动(移动1px),于是就看着像在运动一样了。
看一下此时的性能,这边插播一个如何查看chrome性能的方法:F12调出调试器,然后在任意界面按Ese,此时就能找到这么一个框

浏览器渲染原理

对于上面不同的方法会有不同的性能,对此,我们来看看浏览器的相关渲染原理吧。

  • 浏览器的渲染过程分以下几个步骤
    • 根据HTML构建HTML树(DOM)
    • 根据CSS构建CSS树(CSSOM)
    • 将两棵树合并成一颗渲染树(render tree)
    • Layout布局(文档流,盒模型,计算大小和位置)
    • Paint绘制(把边框颜色,文字颜色,阴影等画出来)
    • Compose合成

  • 三种更新方式:
    • 第一种,全走

    div.remove()此时会触发当前消失,其他元素relayout

    • 第二种,跳过layout

    改变背景颜色的时候,就会直接跳过repaint+composite

    • 第三种,跳过layout和paint

    比如transform,只需要composit
    对于每个属性,到底加了那个会触发什么,有一个网站就很好的解答了这些问题,到时候用了自己查就好了。网站

CSS动画优化

所以,针对上面讲的浏览器渲染的过程,面试的时候会问CSS的动画优化,这边把答案写一下:

  • JS优化

使用requestAnimationFtame代替setTimeout或setInterval

  • CSS优化

使用will-change或者translate
至此,今日的难点结束了,最后,做两个用transition和animate做的会转的太极图作为结束语吧。
transition
animate

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。