CSS3动画-逐帧动画

[Myoursky]

逐帧动画:定格动画，又名逐帧动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。维基百科

CSS3 Animation

CSS3 实际上是使用 animation-timing-function 的阶梯函数 steps(number_of_steps, direction) 来实现逐帧动画的连续播放的。

在移动端，CSS3 Animation 兼容性良好，相对于 JS，CSS3 逐帧动画使用简单，且效率更高，因为许多优化都在浏览器底层完成。

因此在触屏页面中 CSS3 逐帧动画使用广泛，下文将对其进行详细介绍。

CSS3 逐帧动画的实现

将动画帧合并为雪碧图

在触屏页面中，动画往往承担页面样式实现的角色（即不需要替换），因此我们会将图片放到元素的背景中（background-image）。

逐帧动画有不同的动画帧，我们可以通过更改 background-image 的值实现帧的切换，但多张图片会带来多个 HTTP 请求，且不利于文件的管理。

比较合适的做法，是将所有的动画帧合并成一张雪碧图（sprite），通过改变 background-position 的值来实现动画帧切换。因此，逐帧动画也被称为“精灵动画（sprite animation）”。

以京东到家的触屏页面《年货送到家》为例：

这个动画一个有三帧，将3个动画帧合并，并放到 .p8 .page_key 的背景中：

.p8 .page_key {
    position: absolute;
    width: 572px;
    height: 586px;
    background-image: url("../img/p8.png");
}

使用 steps 实现动画播放

steps 指定了一个阶梯函数，包含两个参数：

• 第一个参数指定了函数中的间隔数量（必须是正整数）；
• 第二个参数可选，指定在每个间隔的起点或是终点发生阶跃变化，接受 start 和 end 两个值，默认为 end。

通过W3C中的这张图片来理解 steps 的工作机制：

第一个参数将动画等分为指定份数。
第二个参数中，设置为start,则动画从第一帧结束点开始播放。设置为end,则动画从第一帧开始位置播放。

回到上述的例子，我们在 keyframes 中定义好每个动画帧：

@-webkit-keyframes p8{
    0%{background-position: 0 0;}
    33.33%{background-position: 0 -586px;}
    66.66%{background-position: 0 -1172px;}
    100%{background-position: 0 -1758px;}
}

然后，给他加上 animation：

.p8 .page_key{
    -webkit-animation: p8 steps(1,end) 1.5s infinite;
}

为什么第一个参数是1？

前文中提到，steps 是 animation-timing-function 的一个属性值，在 W3C 中有如下说明：

For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation.

也就是说，animation-timing-function 应该于两个 keyframes 之间，而非整个动画。在上面的 keyframes 中，我们已经把每个帧都写出来了，所以两个 keyframes 之间的间隔是1。

更加简便的写法？

既然说 steps 第一个参数是指函数的间隔数量，那么我们就可以把 keyframes 的计算直接交给 steps 来完成。

.p8 .page_key{
    -webkit-animation: p8 steps(3,end) 1.5s infinite;
}
@-webkit-keyframes p8 {
    100% {background-position: 0 -1758px;}
}

以上两种写法效果是等同的。

CSS3 逐帧动画使用技巧

step-start 与 step-end

除了 steps 函数，animation-timing-function 还有两个与逐帧动画相关的属性值 step-start 与 step-end：

• step-start 等同于 steps(1,start)：动画执行时以开始端点为开始；
• step-end 等同于 steps(1,end)：动画执行时以结尾端点为开始。

动画帧的计算：

$spriteWidth: 140px; // 精灵宽度 
@keyframes ani {
  100% {
    background-position: -($spriteWidth * 12) 0; // 12帧
  }
}

适配方案：rem+scale

我们知道，rem 的计算会存在误差，因此使用雪碧图时我们并不推荐用 rem。如果是逐帧动画的话，由于计算的误差，会出现抖动的情况。

那么在触屏页中，如何实现页面的适配？

这里小编提供一个思路：

• 非逐帧动画部分，使用 rem 做单位；
• 逐帧动画部分，使用 px 做单位，再结合 js 对动画部分使用 scale 进行缩放。

参照文章：
https://aotu.io/notes/2016/05/17/css3-animation-frame/