持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

前言

最近的工作有了一点改变，不再是一尘不变的切片与CURD了，担任了一下活动开发，活动开发中就缺少不了一些抽奖，和一些动画特效，最近就又重新学习了定时器的操作，动画属性的操作使用，这里又以一个Demo记录一下我在活动中写的一个抽奖效果。

效果

界面的话主要是使用了绝对定位来确定每个奖项的位置
再使用rotate使转盘旋转

核心代码

本次的核心代码就只是每个奖项不同的角度

@keyframes rotate2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate((3600-60) + deg);
  }
}

@keyframes rotate3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate((3600-120) + deg);
  }
}

@keyframes rotate4 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate((3600-180) + deg);
  }
}

@keyframes rotate5 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate((3600-240) + deg);
  }
}

@keyframes rotate6 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate((3600-300) + deg);
  }
}

@keyframes rotate1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate((3600-360) + deg);
  }
}

通过js来进行控制，控制当前停下目标位置

注：使用的vue,这里如果直接通过js改变的话会导致动画特效失效，原因是因为 scoped 的原因，只需要把style 的 scoped 去掉即可，如果不想去掉scoped 那么只需要把动画放到一个新的css文件中，然后在当前的 vue 文件里面引用进来使用

:style="{animation: 'rotate' + targetIndex +' 5s ease-in-out'}"

接下来就是通过js开始与结束

这里很简单的，就是动画需要花5秒完成，那么就使用定时器再动画开始之后的5秒左右弹出一个中奖框，再把目标复原。

import {ref} from 'vue'

const targetIndex = ref(0),
    isRun = ref(false)

const run = function () {
      if (isRun.value) {
        return;
      }
      start()
    },
    start = function () {
      isRun.value = true;
      targetIndex.value = 2;
      setTimeout(() => {
        isRun.value = false;
        close()

        // 弹一个窗口出来，并且初始为目标0
        targetIndex.value = 0
      }, 5500);
    }, close = function () {
      console.log("结束")
    }

总结

通过这个小demo可以轻松的学习到一个转盘特效，只需要三五分钟即可，css3的动画我才刚接触到皮毛，之后还会继续学习，继续深入了解，希望不正确的地方和可以优化的继续请大家帮我指出，提升自我，相互学习，共同进步。

大转盘抽奖

前言

效果

核心代码

总结