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

前言

这几天一下把 最近几个月写的活动中的抽象都块写完了，今天再写一个把，一个走马灯幸运抽奖活动，通过目标索引，改变偏移量，让奖池动起来，最后停在目标奖品上。

注：素材是找的网上的，但是逻辑和实现全是自己写的

效果

核心代码

js代码

• calcLeft() 用来计算目标需要偏移数值
  • +9234 则是因为让动画过渡的数值，这个根据自己业务需求改变
• 这里还是使用的定时器来进行等待动画运行结束
• transitionDuration.value * 1000 + 50 因为本次加入了一个跳过动画的按钮，这个变量的作用就是根据抽奖是否拥有动画来进行控制回调

const targetLeft = ref(0), transitionDuration = ref(8), isRun = ref(false)

const calcLeft = function (index: number) {
  // +4 是因为0的时候 是居中的，少了4个 这里少的4个加上
  return ((index + 4) * 114) + 9234
}

const start = (() => {
  if (isRun.value) return
  isRun.value = true
  // 请求接口 获得目标索引 ， 目标索引只能是 1 - 10
  let targetIndex = 1

  targetLeft.value = calcLeft(targetIndex)

  // 等待动画结束
  setTimeout(() => {
    isRun.value = false
    console.log("结束", isRun.value)
  }, transitionDuration.value * 1000 + 50)

}), reset = (() => {
  if (isRun.value) return

  transitionDuration.value = 0
  targetLeft.value = 0

  setTimeout(() => {
    transitionDuration.value = 8
  }, 500)

}), durationZero = (() => {
  if (isRun.value) return

  transitionDuration.value = 0
})

html代码

• <template v-for="i in 10"> 是为了创建更多数据，让偏移leftd的时候可以有一个过度效果，与上面的+9234关联
• 'transition-duration': transitionDuration + 's' 该段落又是为了控制 是否拥有动画

<div class="roll_con" :style="{left: -targetLeft+ 'px', 'transition-duration': transitionDuration + 's'}">
  <template v-for="i in 10">
    <div class="li" v-for="prize in prizeList">
      <div class="li_con">{{ prize.name }}</div>
      <div class="list_bor">
        <img :src="prize.icon">
      </div>
    </div>
  </template>
</div>

css代码

这是这个小demo中学习到的一个新属性方法

• transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
• 开始到结束变速的过渡效，动画中的速度变化。

transition: all 5s cubic-bezier(0.1, 0.59, 0.1, 1) 0s;

总结

这个小demo的话要进行一点小计算，最开始我也只想着用10个不使用<template v-for="i in 10">的，可最后过渡效果一直做不好，才改变了战略，大家可以在我的基础上继续实现，继续优化，实现之后留言让我来看看。