vue实现九宫格抽奖动画效果

html布局九宫格代码：

 <div class="draw_box">
        <div
          class="item sprite-bg"
          v-for="(draw, index) in drawPrizes"
          :class="['item' + index, { active: draw.sort == current }]"
          :key="index"
        >
          <img
            class="gift-img"
            :src="draw.giftImg"
            @error.once="errorImage($event)"
          />
          <div class="name C5-draw">{{ draw.giftName }}</div>
        </div>
        <div class="start sprite-bg" @click="start"></div>
      </div>

css样式代码

.draw_box {
    position: absolute;
    top: pxrem(375);
    left: pxrem(90);
     pxrem(577);
    height: pxrem(528);

    .start {
      position: absolute;
       pxrem(185);
      height: pxrem(172);
      background-size: pxrem(750);
      background-position: pxrem(-189) pxrem(-462);
      margin-top: pxrem(2);
    }
    .item {
      position: absolute;
       pxrem(185);
      height: pxrem(172);
      @extend .flex, .flex-align-center, .flex-v, .flex-pack-center;
      background-size: pxrem(750);
      background-position: pxrem(0) pxrem(-462);

      .gift-img {
        display: block;
         pxrem(110);
        height: pxrem(110);
      }

      .name {
        font-size: pxrem(26);
        margin-top: pxrem(5);
      }
    }
    .item0,
    .item1,
    .item2 {
      top: pxrem(0);
    }
    .item4,
    .item5,
    .item6 {
      bottom: pxrem(0);
    }
    .item3,
    .item7,
    .start {
      top: pxrem(178);
    }
    .item0,
    .item7,
    .item6 {
      left: pxrem(0);
    }
    .item2,
    .item3,
    .item4 {
      right: pxrem(5);
    }
    .item1,
    .item5,
    .start {
      left: pxrem(193);
    }
    .active {
      background-size: pxrem(750);
      background-position: pxrem(0) pxrem(-636);
    }
  }

js逻辑执行代码

//接口获取完成抽中哪个奖励之后执行startRoll方法
		//切换九宫格的动画相关参数
           latexBox: {
                index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
                times: 0, // 转动跑格子次数,
                cycle: 40, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
                speed: 150, // 初始转动速度
                timer: null,
                timerPop: null, //抽奖之后停一下在弹出弹窗
                prizeIndex: 0, //抽中的奖励所在位置
            },

		// 九宫格开始转动
        startRoll() {
            this.isShowAnimation = true;
            this.latexBox.times += 1; // 转动次数
            this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
            this.showLatexBox();
        },
        // 九宫格每一次转动
        oneRoll() {
            let index = this.latexBox.index; // 当前转动到哪个位置
            const count = 8; // 总共有多少个位置
            index += 1;
            if (index > count) {
                index = 0;
            }
            this.latexBox.index = index;
        },
        //九宫格动画
        showLatexBox() {
            // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
            if (
                this.latexBox.times > this.latexBox.cycle &&
                this.latexBox.prizeIndex === this.latexBox.index
            ) {
                clearTimeout(this.latexBox.timer); // 清除转动定时器
                this.latexBox.timerPop = setTimeout(() => {
                    this.transformEndEvent();
                }, 500);
                this.latexBox.speed = 150;
                this.latexBox.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
            } else {
                if (this.latexBox.times < this.latexBox.cycle - 20) {
                    this.latexBox.speed -= 5; // 加快转动速度
                } else {
                    this.latexBox.speed += 15; // 抽奖即将结束，放慢转动速度
                }
                this.latexBox.timer = setTimeout(
                    this.startRoll,
                    this.latexBox.speed
                ); //开始转动
            }
        },

总体逻辑就是，每隔多少秒转动一次格子，然后根距初始设定的转动次数，中途加快和放慢转速，最后符合次数之后，转到中奖位置，停顿一下弹出奖品。