vue红包抖动特效

.vue

<div class="shake">
  <div class="shake-box">
    <img 
     class="shake-box-img" 
     :class="[{'shake-box-img-left': shrinkPacket}, {'shake-box-img-right': !shrinkPacket}]" 
     src="/assets/box.png"/>
   </div>
</div>

<script>
  export default {
    data() {
      return {
        shrinkPacket: true,
      }
    },
    created() {
      this.startRotate();
    },
    methods: {
      startRotate() {
        clearInterval(this.timer);
        var timesAdd = 0;  // 晃动次数
        var timesSub = 0;  // 停止次数
        this.timer = setInterval(()=>{
          timesAdd += 1;
          // 每晃动10次，停3*150毫秒
          if(timesAdd <= 10) {
            timesSub = 0;
            this.shrinkPacket = !this.shrinkPacket;
          } else {
            timesSub += 1;
           // 停3次后，将晃动次数置为0
            timesAdd = timesSub >= 3 ? 0 : 10;
          }
        },150);
      }
    }
  };
</script>

.less

.shake {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
        
  &-box {
    width: 100%;
    .fx();
    align-items:center;

    &-img {
      width: 3.749rem;
      display: block;
    
      &-left {
       transform:rotate(-5deg);
      }

      &-right {
        transform:rotate(3deg);
      }
    }
  }
}