# 动效开发 3：补间动画

我们已经知道如何利用 CSS3 让网页元素动起来，也知道怎么样让它变得立体，接下来为大家讲解在实际工作过程中最为常见的两种基础动画形式 ——「补间动画」和「逐帧动画」，先从「补间动画」说起。

「补间动画」（Tween Animation）指的是：人为设定动画的关键状态（也就是关键帧），而关键帧之间的过渡过程则由计算机处理渲染的动画处理形式。

回想一下前面两个小节中的各种案例，不难发现 transition 属性实现的动画都属于补间动画，而对于 animation 属性来说，使用了除 steps 和 frames 以外的时间函数（如 ease、linear 或 cubic-bezier 等）的动画都属于补间动画。

可以说补间动画是 CSS3 动画中最常见的一种形式，常见到平时工作中几乎所有的动效需求案例都能找到它的影子。

# 案例实战 1 - 京东 2017 海外招聘 H5

我们以京东 2017 海外招聘 H5 的第三屏动画为例，为大家讲解如何利用 CSS3 实现补间动画。

# 步骤 1 - 动效审查与分解

动效审查与分解是动效开发的首要步骤，不管我们开发的是「补间动画」还是「逐帧动画」。根据提供的设计稿，和设计师一起围绕动效进行沟通审查（事实上有经验的设计师会在开始视觉设计之前提前和开发同学沟通动效，设计稿定稿之后再一起回顾沟通），了解设计师对动画时序的想法，并根据自己的开发经验评估预期动效设计的合理性，必要的时候给予设计稿调优建议。

动效审查完毕后，可以输出一张动画属性分解表，以便于后续开发的时候进行追溯调优，如下图所示。

# 步骤 2 - 根据需求进行切图

根据动画属性分解表，先进行切图（可回顾小册的第 2 小节），将需要添加动效的元素单独切出，如下图所示。

# 步骤 3 - 页面编码开发

切图完成后，我们根据设计稿进行构建还原，编写对应的页面 HTML 结构和样式。

具体的 HTML 代码和 SCSS 样式如下所示。

<!-- S 宣讲行程时间轴 -->
<div class="timeline">
  <div class="timeline_tit">
    宣讲行程
    <span>Campus Talk Schedule</span>
  </div>
  <div class="timeline_icon">
    <svg viewBox="0 0 102 102">
    <circle cx="51" cy="51" r="50" transform="rotate(90 51 51)"></circle>
  </svg>
  </div>
  <ul class="timeline_list">
    <li class="timeline_item timeline_item_sp">
      <span class="timeline_item_cnt flag"><i class="flag_sin"></i></span>
      <span class="timeline_item_cnt country"></span>
      <b></b>
    </li>
    <li class="timeline_item">
      <span class="timeline_item_cnt time">09 / 20</span>
      <span class="timeline_item_cnt city">INSEAD</span>
      <b></b>
    </li>
    <li class="timeline_item">
      <span class="timeline_item_cnt time">09 / 21</span>
      <span class="timeline_item_cnt city">NTU</span>
      <b></b>
    </li>
    <li class="timeline_item timeline_item_sp">
      <span class="timeline_item_cnt flag"><i class="flag_us"></i></span>
      <span class="timeline_item_cnt country">U.S</span>
      <b></b>
    </li>
    <li class="timeline_item">
      <span class="timeline_item_cnt time">09 / 26</span>
      <span class="timeline_item_cnt city">UCLA</span>
      <b></b>
    </li>
    <li class="timeline_item">
      <span class="timeline_item_cnt time">09 / 28</span>
      <span class="timeline_item_cnt city">UC Berkely</span>
      <b></b>
    </li>
    <li class="timeline_item">
      <span class="timeline_item_cnt time">10 / 05</span>
      <span class="timeline_item_cnt city">Wharton</span>
      <b></b>
    </li>
    <li class="timeline_item timeline_item_sp">
      <span class="timeline_item_cnt flag"><i class="flag_uk"></i></span>
      <span class="timeline_item_cnt country">U.K</span>
      <b></b>
    </li>
    <li class="timeline_item">
      <span class="timeline_item_cnt time">10 / 29</span>
      <span class="timeline_item_cnt city">LBS</span>
      <b></b>
    </li>
    <li class="timeline_line"></li>
  </ul>
</div>
<!-- E 宣讲行程时间轴 -->

@前端进阶之旅: 代码已经复制到剪贴板

.timeline {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  &_tit {
    position: relative;
    padding: rem(70px) 0 rem(30px);
    font-size: rem(60px);
    line-height: rem(90px);
    color: #fff;
    text-align: center;
    span{
      display: block;
      font-size: rem(36px);
      line-height: rem(50px);
    }
    &:after{
      content: "";
      position: absolute;
      width: rem(92px);
      height: 1px;
      background: #ff0000;
      bottom: 0;
      left: 50%;
      margin-left: rem(-46px);
    };
  }
  &_icon {
    position: relative;
    width: rem(102px);
    height: rem(102px);
    margin: rem(36px) auto 0;
    background: url("images/p3_01.png?__inline") no-repeat center;
    background-size: rem(57px) rem(50px);
    svg {
      width: rem(102px);
      height: rem(102px);
      stroke: #0084ff;
      stroke-width: 2px;
      fill: none;
      stroke-dasharray: 400;
    }
  }
  &_list {
    position: relative;
    bottom: 0;
    width: rem(900px);
    height: rem(1224px);
    margin: 0 auto;
    padding: rem(68px) 0;
    display: flex;
    flex-direction: column;
    color: #fff;
  }
  &_line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: #0084ff;
    top: 0;
    left: 50%;
  }
  &_item {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    z-index: 9;
    b {
      position: absolute;
      width: rem(16px);
      height: rem(16px);
      border-radius: 50%;
      left: 50%;
      top: 50%;
      margin: rem(-7px) 0 0 rem(-7px);
      z-index: 1;
      background: #fff;
      box-shadow: 0 0 0 rem(13px) #0084ff;
    }
    &_sp {
      b{
        background: #0084ff;
        box-shadow: none;
      }
    }
    &_cnt {
      flex: 1;
      padding: 0 rem(100px);
      &:nth-child(1){
        text-align:right;
      };
      &:nth-child(2){
        text-align:left;
      };
      &.flag{
        width: rem(111px);
        height: rem(65px);
        i{
          display: inline-block;
          width: rem(111px);
          height: rem(65px);
          background-size: 100%;
        }
      }
      &.country{
        font-size: rem(36px);
        color: #66b5ff;
      }
      &.time{
        font-size: rem(36px);
      }
      &.city{
        font-size: rem(48px);
      }
      .flag_sin{
        background: url("images/p3_02.png?__inline") no-repeat;
      }
      .flag_us{
        background: url("images/p3_03.png?__inline") no-repeat;
      }
      .flag_uk{
        background: url("images/p3_04.png?__inline") no-repeat;
      }
    }
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

# 步骤 4 - 结合动画属性分解表实现动画

我们从步骤 1 获得了动画属性分解表，下面根据它来一一实现动画。

# 1. 图标圆形边框的路径描边动画

这样的描边动画效果无法用 CSS3 的方案实现，但可以通过 SVG 的方案来实现。

# 1.1 确保 SVG 图形设置 `stroke` 属性实现描边效果

svg {
  // 设置描边 
  stroke: #0084ff;
  stroke-width: 2px;
  fill: none;
}

@前端进阶之旅: 代码已经复制到剪贴板

# 1.2 对 SVG 图形设置 `stroke-dasharray` 属性

stroke-dasharray 属性是用来设置描边的虚线的图案范式，也就是设置实线段和虚线段的宽度。

我们对 stroke-dasharray 属性作如下设置，其含义就是，实线段的长度为 320，而虚线段的长度为 0，所以我们看到的仍是一条实线的描边。

stroke-dasharray: 320; // stroke-dasharray: 320 0; 的等价写法

@前端进阶之旅: 代码已经复制到剪贴板