定义

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

    概念

  • 帧：每个静止的画面都叫做帧

  • 播放速度：每秒 24 帧（影视）或者每秒 30 帧（游戏）

CSS怎么优化？

left 变成 transform

JS 怎么优化？

使用 requestAnimationFrame 代替 setTimeout 或 setInterval

使用 transform 进行图形变换

概述

transform 可以实现以下几种变换：

  • 位移（translate）
  • 缩放（scale）
  • 旋转（rotate）

  • 倾斜（skew）

    经验

  • 一般都需要配合 transform 过渡

  • inline 元素不支持 transform ，需要先变成 block

位移（translate）

  1. .element {
  2.   /* 分开写 */
  3.   transform: translateX(20px);
  4.     transform: translateY(10px);
  5.   /* 合起来写 */
  6.   transform: translate(20px, 10px);
  7. }

绝对居中的完美答案

  1. left: 50%;
  2. top: 50%;
  3. transform: translate(-50%,-50%);

缩放（scale）

  • 用的较少，因为容易出现模糊
    1. .element {
    2. /* 分开写 */
    3. transform: scaleX(2);
    4.   transform: scaleY(.5);
    5. /* 合起来写 */
    6. transform: scale(2, .5);
    7. }

旋转（rotate）

  • 一般用于 360 度旋转制作 loading
  • 用到时再搜索 rotate MDN 看文档
    1. .element {
    2. transform: rotate(25deg);
    3. }
    4. .rotateXItem{
    5. transform: rotateX(50deg);
    6. }
    7. .rotateYItem{
    8. transform: rotateY(70deg);
    9. }
    10. .rotateZItem{
    11. transform: rotateZ(100deg);
    12. }

倾斜（skew）

  • 用得较少
  • 用到时再搜 skew MDN) 文档
    1. .element {
    2. transform: skewX(20deg);
    3. }

transform 多重效果

组合使用

  1. transform: scale(0.5) translate(-100%,-100%);
  2. transfrom: none; 取消所有

使用 transform 进行动画过渡 MDN

作用

  • 补充中间帧

    语法

  • transform：属性名 时长 过渡方式 延迟

    • transform：left 200ms linear
  • 可以用逗号分隔两个不同属性
    • transform：left 200ms，top 400ms

  • 可以用 all 代表所有属性

    • transform：all 200ms

      过渡方式

  • linear

  • ease / ease-in / ease-out / ease-in-out
  • cubic-bezier
  • step-start / step-end / steps

并不是所有属性都能过渡

  • display: none --> display: block 不能过渡
  • 一般改成 visibility: hidden --> visibility: visible 可以过渡
    • 可以搜索 display 和 visibility 的区别
  • background 颜色可以过渡吗 ？
    • 可以，因为可以找到过渡规律
  • opacity 透明度可以过渡吗 ？

过渡必须要有起始

  • 一般只有一次动画，或者两次
  • 比如， hover 和非 hover 状态的过渡

使用 animation 进行动画过渡

  • 声明关键帧
    • @keyframes （key 关键 frames 帧）
  • 添加动画

    @keyframes 完整语法

  1. 标准写法
  • 搜索 keyframes MDN
  • 一种写法是 from to
  • 另一种写法是百分数

3.jpg
2. 缩写语法
animation ：时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名；

  • 时长：1s 或者 1000ms
  • 过渡方式：跟 transform 取值一样，如 linear
  • 次数：3 或者 2.4 或者 infinite
  • 方向：reverse | alternate | alternate-reverse
  • 填充模式：none | forwards | backwards | both
  • 是否暂停：paused 暂停 | running 恢复
  • 以上所有属性都有对应的单独属性
  1. /* keyframes语法1：使用from和to */
  2. @keyframes animation-name-1{
  3.   from {
  4.     transform: translateX(0%);
  5.   }
  6.   to {
  7.     transform: translateY(100%);
  8.   }
  9. }
  11. /* keyframes语法2：使用百分数 */
  12. @keyframes animation-name-2{
  13.   0% {
  14.     transform: translateX(10px);
  15.   }
  16.   50% {
  17.     transform: translateX(50px);
  18.   }
  19.   100% {
  20.     transform: translateY(100px);
  21.   }
  22. }
  24. /* animation语法 */
  25. .someElement {
  26.     /* 不相关代码 */
  27.   animation: [动画名] [时长] [过渡方式] [延迟] [次数] [方向] [填充模式] [是否暂停]; 
  28.   /* 不相关代码 */
  29. }
  31. /* 举个例子 */
  32. .someElement {
  33.     /* 不相关代码 */
  34.   animation: animation-name-1 5s infinite; 
  35.   /* 不相关代码 */
  36. }

浏览器渲染原理

参考文章

浏览器渲染过程

步骤

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

2.jpg

部分资料来源：饥人谷 - 方方老师