sass 结合 keyframe 实现 css3的逐帧动画

现有如下雪碧图，实现逐帧动画

效果预览:

所以需要结合css3 animation的steps() 属性，我理解的steps的第一个参数的代表的是在一个动画间隔里分几步实现。

比如上图中的动画分为9帧，每一帧宽度为291px,如果我的 @keyframe 写法如下

@keyframes stepMonkey {
  0% {
    background-position: 0;
  }
  100% {
    background-position: -8*291px;
  }
}

那么此动画的animation的step 可以设置为steps(9) , 即表示在一个keyframe关键帧里，分成了9段实现的。

或者@keyframe也可以这么写

@keyframes setpmonkey {
   0% {
      background-position: 0;
    }
    12.5% {
      background-position: -1*291px;
    }
    25% {
      background-position: -2*291px;
    }
    27.5% {
      background-position: -3*291px;
    }
    50% {
      background-position: -4*291px;
    }
    62.5% {
      background-position: -5*291px;
    }
    75% {
      background-position: -6*291px;
    }
    87.5% {
      background-position: -7*291px;
    }
    100% {
      background-position: -8*291px;
    }
}

那么此动画的animation的step 可以设置为steps(1) , 即表示在9个keyframe关键帧里，每帧都是一步实现。

然后因为图片是固定宽高，设计稿动态图不一定会是固定宽度 291px，所以需要将keyfarme里的 291px换成可传参的形式。

结合 scss 实现关键代码如下：

@mixin keyframes($animationName) {
  @keyframes #{$animationName} {
      @content;
  }
}

然后上面的代码可分别简化为

@mixin stepMonkey($width: 291px) {
  background: url('../src/assets/monkey-step.png') 0 0 no-repeat;
  background-size: cover;
  animation: stepMonkey 0.5s steps(9) infinite;
  @include keyframes(stepMonkey) {
    0% {
     background-position: 0;
    }
    100% {
     background-position: -9*$width;
    }
  }
}

@mixin stepMonkey($width: 291px) {
  background: url('~@/assets/images/box/monkey-step.png') 0 0 no-repeat;
  background-size: cover;
  animation: stepMonkey 0.5s steps(1) infinite;
  @include keyframes(stepMonkey) {
    @for $i from 0 through 8 {
      #{$i*12.5}% {
        background-position: -$i*$width;
      }
    }
  }
}

点此查看demo