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