常见的动画实现手段

1、gif 实现

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

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

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

2、css3补帧动画

2.1 transition 过渡动画

场景：

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

2.2 animation 关键帧动画

css 复制代码

.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，就要采取一些必要的压缩手段，缩减文件大小。

2.3 js 逐帧动画

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

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

setTimeout 实现

ini 复制代码

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 实现

ini 复制代码

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

什么是动画

在需要变化的时间节点上指定一些关键帧，关键帧就是此刻所定义的样式。例如我在1s左移5m，3s左一15m，这时就有两个关键帧，因为这两个关键帧，画面就发生了位移，那么动画也就产生了。

下面这句话总结到位：动画使元素逐渐从一种样式变为另一种样式。

CSS3的动画主要依赖 @keyframes 和animation来实现。

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点：

能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。
动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。
让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

@keyframes 规则

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

css 复制代码

@keyframes myfirst
{
  from {background: red;}
  to {background: yellow;}
}

以上的就是一个简单的动画，关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。也就是从红色变成黄色。

建议： 为了得到最佳的浏览器支持，使用 0% 和 100% 选择器是最好的选择。

animation既然动画的关键帧都有了，那么就需要把这个关键帧落实并绑定到某个DOM上。

语法：

可以一起写，也可以分开写属性。

arduino 复制代码

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

动画属性

animation-name：设置需要绑定到元素的动画名称；
animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
animation-timing-function：设置动画的速度曲线，默认为 ease；
animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
animation-delay：设置动画开始之前的延迟时间，默认为 0；
animation-iteration-count：设置动画被播放的次数，默认为 1；
animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
animation-play-state：设置动画是正在运行还是暂停，默认是 running；
animation：所有动画属性的简写属性。

其中，对于一个动画：

必须项：animation-name、animation-duration 和 @keyframes规则
非必须项：animation-delay、animation-direction、animation-iteration-count、animation-play-state、animation-timing-function、animation-fill-mode，当然不是说它们不重要，只是不设置时，它们都有默认值

animation-timing-function属性

linear 动画从头到尾的速度是相同的（匀速）。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease 默认。动画以低速开始，然后加快，在结束前变慢(由快到慢，逐渐变慢)。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in 动画以低速开始（由慢到快，速度越来越快）。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out 动画以低速结束（由快到慢速度越来越慢）。
ease-in-out 动画以低速开始和结束（由慢到快再到慢）。
steps(int,start|end）指定了时间函数中的间隔数量（步长）可实现逐帧动画。

有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。

第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。

cubic-bezier(n ,n ,n ,n ) 贝塞尔曲线链接：cubic-bezier.com/#.17,.67,.8...

什么是 cubic-bezier(n,n,n,n) 贝塞尔曲线

网址：cubic-bezier.com/#.17,.67,.8...

cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是

cubic-bezier(, , , )。

从上图我们需要知道的是 cubic-bezier 的取值范围:

P0：默认值 (0, 0)
P1：动态取值 (x1, y1)
P2：动态取值 (x2, y2)
P3：默认值 (1, 1)

我们需要关注的是 P1 和 P2 两点的取值，而其中 X 轴 的取值范围是 0 到 1，当取值超出范围时 cubic-bezier 将失效；Y 轴的取值没有规定，当然也毋须过大。

最直接的理解是，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。

steps属性

参考：www.zhangxinxu.com/wordpress/2...

steps()功能符和CSS3 animation中的cubic-bezier()功能符的地位和作用是一样的，都可以作为animation-timing-function的属性值。

只不过steps()更像是楼梯坡道，cubic-bezier()更像是无障碍坡道。如下图示意：

然后steps()简化出了step-start和step-end这两个关键字；cubic-bezier()则有linear，ease，ease-in，ease-out以及ease-in-out。

cubic-bezier指三次贝塞尔曲线

steps()指逐步运动，下面进一步深入介绍。

搞清楚steps()中的start和end

steps()有一定的学习难度，总是搞不清楚，最主要就是start和end傻傻分不清楚。我这里自我挑战下，看看能不能说清楚。

常见steps()用法举例：

steps(5, end); steps(2, start);

用steps()语法表示就是：

steps(number, position)

其中：

number

数值。这个很好理解，表示把我们的动画分成了多少段。

假设有如下CSS3动画keyframes，定义了一段从0~100px的位移：

@keyframes move { 0% { left: 0; } 100% { left: 100px; } }

假设我们的number值是5，则相当于把这段移动距离分成了5段，如下示意图：

position

关键字。表示动画是从时间段的开头连续还是末尾连续。支持start和end两个关键字，含义分别如下：

start：表示直接开始。
end：表示戛然而止。是默认值。

为什么position非常难理解？

我认为两个原因：

steps()属于timing function，也就是时间函数，时间这个东西是虚的，看不见，摸不着，联想乏力，所以认知成本高。这也是为什么那么多人都不珍惜时间的原因------无法感知。
CSS规范中对于start和end的定义是基于数学函数来的，函数这东西，多少人的噩梦，因为过于抽象，与现实难以关联，所以，如果我们盯着定义去理解start和end，那就是死胡同，不归路，就算现在弄懂了，过段时间再遇到，得了，全忘光光了，函数图哪个是哪个，鬼才记得。下面这张图就出自规范文档：按照规范图再细化解释就是：

- start：表示直接开始。也就是时间才开始，就已经执行了一个距离段。于是，动画执行的5个分段点是下面这5个，起始点被忽略，因为时间一开始直接就到了第二个点：
- end：表示戛然而止。也就是时间一结束，当前距离位移就停止。于是，动画执行的5个分段点是下面这5个，结束点被忽略，因为等要执行结束点的时候已经没时间了：

基于现实感知重新理解position！

万物具有相对性。例如，苍蝇眼中的人类动作都是慢动作，但是人类眼中的苍蝇却非常敏捷。

同样的，start和end这里的开始和结束是相对于时间而言的，但是，如果站在人类可感知的具体事物而言，start和end却是相反的含义。

所以，我们可以这么理解：

start：表示结束。分段结束的时候，时间才开始走。于是，动画执行的5个分段点是后5个点：
end：表示开始。分段开始的时候，时间跟着一起走。于是，动画执行的5个分段点是前5个点：

记住position参数的含义

牢记这么一句话：一切都是反的！start不是开始，而是结束；end不是结束，而是开始。

step-start和step-end

step-start和step-end是steps()功能符简化关键字，注意，是step-*，step，后面没有s。

其中，step-start等同于steps(1, start)，step-end等同于steps(1, end)或者steps(1)。

step-start和step-end用中文短句解读就是：一步到位和延迟到位，在实际项目中有什么作用呢？

对于只有0%,100%或from, to两个关键时间帧的动画，step-start和step-end是没有任何需要使用的理由的。

如果是非等分，无法过渡的阶梯动画，则有使用价值，例如下面这个基于box-shadow实现的打点动画效果：

animation-fill-mode属性

动画分为 初始状态 、等待期 、动画执行 和完成期四个阶段，当清楚这四个阶段便能较好的理解了

animation-fill-mode有四个可选值

none 默认值。这是默认值。在动画播放前和播放结束后，不会应用任何样式。这意味着动画效果将不会影响元素的最终样式，元素将立即回到其初始状态。
forwards 在动画播放结束后，元素将保持在最后一个关键帧的状态。换句话说，元素将保持在动画结束时的状态，而不会返回到初始状态。
backwards 在动画播放前 ，元素将应用第一个关键帧的状态。这意味着动画效果将在动画开始之前应用，元素将从第一个关键帧状态开始，然后播放动画。
both 元素将同时应用 forwards 和 backwards 的效果。在动画播放前 ，元素将应用第一个关键帧 的状态，在动画播放结束后，它将保持在最后一个关键帧的状态。
initial 将属性设置为其默认值
inherit 从父元素继承该属性

animation-delay属性

用法：animation-delay: time;

其中参数 time 就是动画播放前的延迟时间，参数 time 既可以为正值也可以为负值。参数值为正时，表示延迟指定时间开始播放；参数为负时，表示跳过指定时间，并立即播放动画。

animation-iteration-count属性

animation-iteration-count 属性用来定义动画播放的次数，属性的可选值如下

animation-play-state属性

animation-play-state 属性用来设置动画是播放还是暂停，属性的可选值如下：

nimation-direction属性

animation-direction 属性用来设置是否轮流反向播放动画，属性的可选值如下：

animation简写

animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式，通过 animation 属性可以同时定义上述的多个属性，语法格式如下：