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

2022 年 5 月 19 日
笔记
CSS, CSS3, 前端

背景

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

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

<->手机扫码体验

【年报】

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

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

1.1 gif 实现

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

使用：

![file](//img2022.cnblogs.com/other/2332333/202205/2332333-20220519101607717-1405608413.png)

优点：
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 实现一个正方形从左到右的移动动画 —–

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()
})

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 还是网络动画，在实现视觉变化时，管道帧对指定帧的运行通常有三种方式:

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