CSS动画

雉堞
169 阅读3分钟

CSS动画

动画

  • 定义

    • 由许多静止的画面（帧）
    • 以一定的速度（如每秒60张）连续播放时
    • 肉眼因视觉残像产生错觉
    • 而误以为是活动的画面

  • 概念

    • 每个静止的画面叫做帧

一个最简单的例子

  • 用transform（变形）

  • 原理

    • transform:translateX(0=>300px)
    • 直接修改会被合成，需要等一会修改
    • transition过渡属性可以自动脑补中间帧

  • 注意性能

    • 并没有repaint（重新绘制）
    • 会比left性能好

浏览器渲染原理

  • 步骤

    • 根据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()直接删掉节点

  • 那么这些方法有什么不同呢

    • 有三种不同的渲染方式

三种更新方式

image-20220727171011167.png

还好，程序员喜欢分享

记录了不同css样式浏览器渲染的更新方式

csstriggers.com/

CSS动画优化

  • 没什么技术含量

  • JS优化

    • 使用requsetAnimationFrame代替setTimeout或setinterval

  • CSS优化

    • 使用will-change或translate

  • 没错

    • 完全就是死记硬背

transform

  • 四个常用功能

    • 位移 translate
    • 缩放 scale
    • 旋转 rotate
    • 倾斜 skew

  • 经验

    • 一般都需要配合transition过渡
    • inline元素不支持transform，需要先变成block
transform 之 translate

  • 常用写法

    • translateX()
    • translateY()
    • translate(,)?
    • translateZ()且父容器perspective
    • translate3d(x,y,z)

  • 经验

    • 要学会看懂MDN的语法示例
    • translate（-50%，-50%）可做绝对定位元素的居中
transfrom 之 scale

  • 常用写法

    • scaleX()
    • scaleY()
    • scale(,?)

  • 经验

    • 用的较少，因为容易出现模糊
transform 之 rotate
  • 常用写法
  -   rotate([<angle>|<zero>])
  -   rotateZ([<angle>|<zero>])
  -   rotateX([<angle>|<zero>])
  -   rotateY([<angle>|<zero>])
  -   rotate3d太复杂，无法用语言描述

  • 经验

    • 一般用于360度旋转制作loading
    • 用到时再搜索retate MDN 文档
transform 之 skew
  • 常用写法
    -   skewX([<angle>|<zero>])
    -   skewY([<angle>|<zero>])
    -   skew([<angle>|<zero>],[<angle>|<zero>]?)

  • 经验

    • 用的较少
    • 用到的时候再搜skew MDN 文档

实践

  • 跳动的心

    jsbin.com/robepiwebo/…

  • 心得

    • CSS需要你有想象力，而不是逻辑
    • CSS给出的属性都很简单，但是可以组合得很复杂

transition

  • 作用：补充中间帧

  • 语法

    • transition:属性名 时长 过渡方式 延迟
    • transition: left 200ms linear
    • 可以用逗号分隔两个不同属性
    • transition：left 200ms ,top 400ms
    • 可以用all代表所有属性
    • transition: all 200,s
    • 过度方式有线性 linear | 非线性等
注意

  • 并不是所有属性都能过渡

    • display:none=>block没法过渡
    • 一般改成visibility:hidden=>visible
    • 过渡必须要有起始，一般只有一次动画，或者两次，比如hover和非hover状态的过渡

animation

  • 缩写语法

animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|

时长：1s或者1000ms

过渡方式：跟transition取值一项，如linear

次数：3或者2.4或者infinite

方向：reverse|alternate|alternate-reverse

填充模式：none|forwards|backwards|both

是否暂停：paused|running

参考文章

avatar
文章
阅读
粉丝