浅析如何利用逐帧动画配合补间动画实现一个无限循环的文字及图片轮播效果

　　今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果.

　　有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从表面上看，确实好像只有元素的 transfrom: translate() 在位移，但是注意，这里有2个需要注意的点：

（1）这是个无限轮播的效果，我们的动画需要支持任意多个元素的无限轮播切换

（2）因为是轮播，所以，运行到最后一个的时候，需要动画切到第一个元素（注意我们追求的是无缝切换，看到过很多网站这种切换是很突兀的切换）

　　所以到这里，你可以暂停思考一下，如果有 20 个元素，需要进行类似的无限轮播播报，使用 CSS 实现，你会怎么去做呢？

一、逐帧动画控制整体切换

　　首先，我需要利用到逐帧动画效果，也被称为步骤缓动函数，利用的是 animation-timing-function 中，的 steps，语法如下：

{
    /* Keyword values */
    animation-timing-function: step-start;
    animation-timing-function: step-end;
    /* Function values */
    animation-timing-function: steps(6, start)
    animation-timing-function: steps(4, end);
}

// 假设我们存在这样 HTML 结构：首先，我们实现这样一个简单的布局
<div class="g-container">
  <ul>
    <li>Lorem ipsum 1111111</li>
    <li>Lorem ipsum 2222222</li>
    <li>Lorem ipsum 3333333</li>
    <li>Lorem ipsum 4444444</li>
    <li>Lorem ipsum 5555555</li>
    <li>Lorem ipsum 6666666</li>
  </ul>
</div>// 在这里，要实现轮播效果，并且是任意个数，我们可以借助 animation-timing-function: steps()：
:root {
  // 轮播的个数
  --s: 6;
  // 单个 li 容器的高度
  --h: 36;
  // 单次动画的时长
  --speed: 1.5s;
}
.g-container {
  width: 300px;
  height: calc(var(--h) * 1px);
}
ul {
  display: flex;
  flex-direction: column;
  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
  width: 100%;
}
@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--s) * var(--h) * -1px));
  }
}

　　别看到上述有几个 CSS 变量就慌了，其实很好理解：

calc(var(--speed) * var(--s))：单次动画的耗时 * 轮播的个数，也就是总动画时长
steps(var(--s)) 就是逐帧动画的帧数，这里也就是 steps(6)，很好理解
calc(var(--s) * var(--h) * -1px)) 单个 li 容器的高度 * 轮播的个数，其实就是 ul 的总体高度，用于设置逐帧动画的终点值

　　上述的效果，实际如下：

　　如果给容器添加上 overflow: hidden，就是这样的效果：

　　这样，我们就得到了整体的结构，至少，整个效果是循环的。

　　但是由于只是逐帧动画，所以只能看到切换，但是每一帧之间，没有过渡动画效果。所以，接下来，我们还得引入补间动画。

二、利用补间动画实现两组数据间的切换

　　我们需要利用补间动画，实现动态的切换效果。这一步，其实也非常简单，我们要做的，就是将一组数据，利用 transform，从状态 A 位移到状态 B。

:root {
  --h: 36;
  --speed: 1.2s;
}
ul li {
  height: 36px;
  animation: liMove calc(var(--speed)) infinite;
}
@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100%  {
    transform: translate(0, -36px);
  }
}