使用png图片制作逐帧动画

背景

在为全景图添加点赞功能的过程中，需要给点赞按钮增加动画效果。考虑到动画本身较复杂，直接通过代码来实现难度较大，而使用 gif 又会遇到播放状态难以控制的问题。

解决方案

参考 Facebook 点赞动画的实现，将动画的每一帧按顺序拼接成如下的水平长条，最左边是初始默认状态，最右边是最终状态，然后改变 background-position 来播放。

实现的重点是 timing-function 的使用，需要注意一下几点：

• background-size 需要为 100%*(Sprites内包含图片数)
• steps () 内填入动画帧数，初始状态不算，即为 (Sprites内包含图片数 - 1)。step 的使用可以去除关键帧之间的补间动画

具体实现有两种：

使用 transition

对于那些不需要中途暂停的动画，我们可以用 transition 来简单实现一次性播放。

.heart {
  display: block;
  width: 100px;
  height: 100px;
  background: url(https://abs.twimg.com/a/1511233232/img/animations/web_heart_animation_edge.png)
    0 0 no-repeat;
  background-size: 2900%;
  background-position: left;
  transition: all steps(28);
}
.clicked {
  background-position: right;
  transition-duration: 0.8s; /* 写在.heart中会使得取消的时候有反向的动画 */
}

效果如下：

See the Pen heart-transition by 0xLLLLH (@0xLLLLH) on CodePen.

使用 animation 进行播放控制

相比 transition，使用 animation 的好处是可以通过 animation-play-state: paused; 来使动画播放暂停。

.heart {
  display: block;
  width: 100px;
  height: 100px;
  background: url(https://abs.twimg.com/a/1511233232/img/animations/web_heart_animation_edge.png)
    0 0 no-repeat;
  background-size: 2900%;
  animation: heart-burst steps(28) 0.8s infinite both;
}
.stop {
  animation-play-state: paused;
}
@keyframes heart-burst {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

效果如下：

See the Pen Heart-animation by 0xLLLLH (@0xLLLLH) on CodePen.

经验总结

在处理一些难以通过代码直接实现的动画时，可以通过这种方式实现，无论开发过程还后续维护都比较方便。