前端动画实现以及原理浅析

背景

如今的前端是一个涉猎领域很广的职业。作为一名前端，我们不仅要开发管理系统、数据中台、还要应对年报开发、节日活动等场景。不仅要会增删改查，编写表单，还要具备开发动画、H5 游戏等能力。能做出很 Cool 的动画效果，也是一种前端特有的成就感。所以，我们从动画的实现方法入手，了解浏览器的渲染，以及如何提升动画的性能。

我们先来看 2 个 H5 案例 ：
【一镜到底】

<->手机扫码体验

【年报】

【其他 H5 优秀案例】
https://www.h5anli.com

第一部分 常见的动画实现手段

1.1 gif 实现

定义：
GIF 文件的数据是一种基于 LZW 算法的连续色调的无损压缩格式，gif 格式的特点是一个 gif 文件可以存多幅彩色图像，当数据逐幅读出并展示都在屏幕上，就可以构成一个简单的动画。
最高支持 256 种颜色。由于这种特性，GIF 比较适用于色彩较少的图片，比如页面卡通 icon、标志等等。

使用：

![file](/img/bVcZPme)

优点：
1.制作的成本很低；
2.兼容性好；
3.方便开发使用。

缺点：
1.画质上：色彩支持少，图像毛边严重；
2.交互上：不能控制动画的播放暂停，没有灵活性；
3.大小上：由于是无损压缩，每帧被完整的保存下来，导致文件很大。

1.2 css3 补帧动画

1.2.1 transition 过渡动画

使用：

.box {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: #0000ff;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #ffcccc;
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
}

场景：

常与 :hover, :active 等伪类使用,实现相应等动画效果。

1.2.2 animation 关键帧动画

使用：

.bounce1 {
    left: -40px;
    animation: bouncy1 1.5s infinite;
}
.bounce2 {
    left: 0;
    animation: bouncy2 1.5s infinite;
}
.bounce3 {
    left: 40px;
    animation: bouncy3 1.5s infinite;
}
@keyframes bouncy1 {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    50% {
        transform: translate(0px, 0px) rotate(180deg);
    }
    100% {
        transform: translate(40px, 0px) rotate(-180deg);
    }
}

场景：
比如：loading 展示，代码如上。

优点：
1、无需每一帧都被记录，通过关键帧设置，方便开发；
2.实现简单，通常 UI 可以直接给到 css 文件，前端只需要导入即可【移动端注意屏幕适配】。

缺点：
1.css 没法动画交互，无法得知当前动画执行阶段；
2.transition: 需要触发，无法自动播放；
3.animation 兼容性需要加前缀，导致代码量成倍增长；
4.对于复杂动画的实现，导入的 css 文件过大，影响页面的渲染树生成，从而阻塞渲染。比如实现一个摇钱树的效果，css 文件达到百 kb，就要采取一些必要的压缩手段，缩减文件大小。

1.3 js 逐帧动画

JS 动画的原理是通过 setTimeout 或 requestAnimationFrame 方法绘制动画帧，从而动态地改变
网页中图形的显示属性(如 DOM 样式，canvas 位图数据，SVG 对象属性等)，进而达到动画的目的。

demo1:
------- js 实现一个正方形从左到右的移动动画 -----

1. setTimeout 实现

   const element2 = document.getElementById('raf2');
   const btn2 = document.getElementById('btn2');
   let i = 0;
   let timerId;
   function move () {   
    element2.style.marginLeft = i + 'px'
    timerId = setTimeout(move, 0)
    i++;
    if (i > 200) {
        clearTimeout(timerId)
    }
   }
   btn2.addEventListener('click',function () {
    move()
   })

2. requestAnimationFrame 实现

   const element = document.getElementById('raf');
   const btn1 = document.getElementById('btn1');
   let r = 0;
   let rafId;
   function step () {
    element1.style.marginLeft = r+ 'px';
    rafId = window.requestAnimationFrame(step);
    r++;
    if (r > 200) { // 在两秒后停止动画
        cancelAnimationFrame(rafId);
    }
   }
   btn1.addEventListener('click', function () {
    step();
   })

可以看出，实现的方式都是控制 dom 的 margin-left 样式，执行动画。

问题 1.1:demo1 中看出 setTimeout 的执行很快。这是为什么呢？请接着往后看～

第二部分 浏览器如何渲染与动画的渲染

2.1 浏览器的帧原理

问题 2：当 url 输入到一个页面展示出来经过了哪些过程？

这里我们忽略 http 请求静态文件之前的步骤，着重看浏览器渲染帧是怎么做的，从而找到浏览器是如何渲染动画的。

借助 chrome-performance【执行 raf.html】 同样可以看出上图不同阶段在 performance 里面的标注。⚠️注意：不是每帧都总是会经过管道每个部分的处理。实际上，不管是使用 JavaScript、CSS 还是网络动画，在实现视觉变化时，管道帧对指定帧的运行通常有三种方式:

【以下截图是以时间线为主轴，进行绘制】

-当修改一些会触发 layout 的属性，则会导致后面的同样被更新。

• 当修改只改变 paint 的属性， 则不会重新 layout。

  

• 如果改一些不涉及布局也不涉及重绘的数据，则可以直接进行合成渲染。

像 CSS 属性具体可以查询这个网站 ,去查阅哪些属性会引起怎样的帧管道：https://csstriggers.com/

例如：transform 变换，它是一个不会触发布局与绘制的变化的，所以使用它的时候，直接进入第三种状态，在合成之后，直接进入 Composite 阶段，是一个很好的优化手段。

问题 3: 控制台上显示出 requestAnimationFrame（rAF）的执行，那么这个 rAF 执行与浏览器帧有什么关系呢？我们接着往下看。

2.2 requestAnimationFrame 执行

我们还是运行 demo1 的代码：

可以看到 rAF 执行在 layout 与 paint 之前，在每帧只执行了一次 rAF，调用回调函数执行动画。

从 rAF 的执行时机，可以看出 setTimeout 的执行时机与 rAF 的不同。

我们通过对不同方式实现方块移动动画的 performance 抓取，可以看到：

• setTimeout 单位帧截图：
• 
• rAF 单位帧截图：

对比两者可以看出，在 16.7ms 的时间里，seTimeout 执行了 4 次，导致此时设置的 marginLeft 和上一次渲染前 marginLeft 的差值要大于 1px 的。

而 raf 可以看出 marginLeft 和上一次渲染前 marginLeft 的差值要等于 1px 的。

从 rAf 的性能，可以看出 setTimeout 的性能会较差一点

那么如果 JS 执行的时间过长，导致在本该绘制一帧的时候，没有绘制，延迟到下一帧的执行绘制的时候，就会造成动画的卡顿。【这里可以跳到第三部分性能问题，就知道直观的看到卡顿】

从而可以总结出：

1.setTimeout 时间不准确，因为他的执行取决于主线程执行的时间。

2.如果计时器频率高于浏览器刷新的频率，即使代码执行了，浏览器没有刷新，也是没有显示的，出现掉帧情况，不流畅。

而 raf 解决了 setTimeout 动画带来的问题：

1.浏览器刷新屏幕时自动执行，无需设置时间间隔
和 setTimeout 一样是 n 毫秒之后再执行，但这个 n 毫秒，自动设置成浏览器刷新频率，浏览器刷新一次，执行一次，不需要手动设置；
浏览器不刷新，就不执行，没有排队掉帧的情况。

2.高频函数节流
对于 resize、scroll 高频触发事件来说，使用 requestAnimationFrame 可以保证在每个绘制区间内，函数只被执行一次，节省函数执行的开销。
如果使用 setTimeout、setInterval 可能会在浏览器刷新间隔中有无用的回调函数调用，浪费资源。

第三部分 性能分析以及高效能的动画

3.1 性能分析

通过 chrome-performance 可以看整体的 fps、GPU 的情况，也可以逐帧去分析影响 scripting\rendering\painting 时间的因素，从而有针对性的提高动画的性能。

demo3:
----- 小方块的上下运动 -----

demo 的在线地址：https://googlechrome.github.io/devtools-samples/jank/

源码截图：

未优化【每个方块都需要强制 layout 去计算 position】：

点击 Optimize 按钮优化后【只读一次，并存在 pos 变量中】：

再次优化【添加 transform:translateZ(0)，提高层级】：

以上就是一个动画逐步优化的小案例：具体操作可以查看原文：
https://developer.chrome.com/docs/devtools/evaluate-performance/

3.2 如何优化动画性能

根据上文的渲染机制的讨论，我们可以看出，影响动画渲染的因素就是帧管道所经历的各个阶段，从中我们可以总结一些用来优化动画性能的手段：

1. 提升每一帧的性能
2. 避免频繁的重排
3. 避免大面积的重绘
4. 优化 JS 的性能
5. fps 稳定，避免掉帧，跳帧的情况
6. 不在连续动画中，添加高耗能的操作
7. 如果无法避免，看可以在动画的开头或者结尾进行操作
8. 开启 GUP 加速

第四部分 常用的动画库

综上的实现方式可以支持部分的动画开发，比如点击交互，轮播器、以及纯动画的展示，比如摇钱树、烟花等。

如果需要强交互，或者是需要一个重力世界的时候，原生 JS 的实现相对于困难。可以利用一些动画库，来进行开发，这些动画基于 canvas 与 webGL 实现的。

1. Pixi.js
2. 添加场景
3. 添加玩家
4. 添加自身动作
5. 添加交互
6. phaser.js
   物理系统、重力系统
   可以模仿下落状态
7. 其他：
   create.js、three.js 3d 渲染、layaAir、Egret 3d 游戏引擎等，可以根据不同的场景需要，选择不同的框架使用。

总结

1. 动画的实现手段

2. 浏览器渲染的简单流程

3. 开发动画分析性能参考 performance 的使用

鸣谢

非常感谢木杪、千寻对本文的校正与建议，同时感谢琉易、霜序等伙伴在业务产品技术上帮助与支持。