前端菜鸟打怪路：CSS动画（七）

月石子君
555 阅读4分钟

动画

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

CSS渲染

步骤

  1. 根据HTML构建HTML树(DOM)

  1. 根据CSS构建CSS树(CSSOM)

3. 将两棵树合并成一颗渲染树(render tree)
4. Layout布局(文档流、盒模型、计算大小和位置)
5. aint绘制(把边框颜色、文字颜色、阴影等画出来) Compose合成(根据层叠关系展示画面)

使用JS更新样式

  • div.style.background ='red'
  • div.style.display = 'none'
  • div.classList.add('red')
  • div.remove()直接删掉节点
  • 记住加样式style，不如加class类

三种不同的渲染方式

  • 第一种，全走
    • div.remove会触发当前消失，其他元素relayout
  • 第二种，跳过layout
    • 改变背景元素，直接 repaint + composite
  • 第三种，跳过layout和paint
    • 改变transform,只需composite *注意：不同CSS元素，会导致不同的渲染顺序。CSS渲染顺序查询

CSS动画优化（一定要记住）

优化 JavaScript 执行

  • 对于动画效果的实现，避免使用setTimeout或setInterval，请使用requestAnimationFrame。
  • 将长时间运行的 JavaScript 从主线程移到 Web Worker。
  • 使用微任务来执行对多个帧的 DOM 更改。
  • 使用Chrome DevTools的 Timeline和 JavaScript分析器来评估JavaScript的影响。

缩小样式计算的范围并降低其复杂性

  • 降低选择器的复杂性；使用以类为中心的方法，例如 BEM。
  • 减少必须计算其样式的元素数量。

避免大型、复杂的布局和布局抖动

  • 布局的作用范围一般为整个文档。
  • DOM元素的数量将影响性能；应尽可能避免触发布局。
  • 评估布局模型的性能；新版Flexbox 一般比旧版Flexbox或基于浮动的布局模型更快。
  • 避免强制同步布局和布局抖动；先读取样式值，然后进行样式更改。

简化绘制的复杂度、减小绘制区域

  • 除transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。
  • 绘制通常是像素管道中开销最大的部分；应尽可能避免绘制。
  • 通过层的提升和动画的编排来减少绘制区域。
  • 使用Chrome DevTools绘制分析器来评估绘制的复杂性和开销;应尽可能降低复杂性并减少开销。

坚持仅合成器的属性和管理层计数

  • 坚持使用transform和opacity属性更改来实现动画。
  • 使用 will-change 或translateZ提升移动的元素。
  • 避免过度使用提升规则；各层都需要内存和管理开销。

使输入处理程序去除抖动

  • 避免长时间运行输入处理程序；它们可能阻止滚动。
  • 不要在输入处理程序中进行样式更改。
  • 使处理程序去除抖动；存储事件值并在下一个requestAnimationFrame回调中处理样式更改。

transform

  • transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
  • 注意：inline行级元素不支持transform需要先变成block块级元素

位移 translate

transform: translateX()  X轴横轴
transform: translateY()  Y轴纵轴
transform: translate (X,Y)  简写推荐使用
transform: translateZ()   z轴三维垂直方向
  • 特点：transform: translateZ()， z轴是三维垂直方向，必须配合perspective: 1000px;必须有视口才能显示.

缩放 scale

transform: scaleX();    X轴缩放
transform: scaleY();    Y轴缩放
transform: scale(XY)；  简写推荐使用
  • translate(-50%,-50%)可做绝对定位元素的居中

旋转 rotate

transform: rotateX( );  X轴旋转
transform: rotateY( );  Y轴旋转
transform: rotate(X,Y); 简写推荐使用
transform: rotateZ( );  z轴是三维垂直旋转，太难了，不懂？
  • 一般用于360度旋转制作loading

倾斜skew

transform: skewX( deg);     X轴倾斜 
transform: skewY( deg);     Y轴倾斜

多重效果：

  • transform: scale(0.5) translate(-100%, -100%);
  • 一定要写在一行，不然第二行transform会覆盖他.
  • transform: none;取消所有

transition 过度

  • 过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。
  • 作用补充中间帧

语法

  • animation
    • 时长| 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
  • 时长
    • Is或者1000ms
  • 过渡方式
    • 跟transition取值一样，如linear
  • 次数
    • 3或者2.4或者infinite
  • 方向
    • reverse | alternate | alternate-reverse
  • 填充模式
    • none | forwards | backwards | both
  • 是否暂停：
    • paused | running

必须配合@keyframes使用实现动画效果

@keyframes heart {
  0% {
    transform: scale(1.0);
  }
  20% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.3);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(2);
  }
}

资料引用：
饥人谷方方老师
本文参考了饥人谷内部课程

avatar
文章
阅读
粉丝