vue实现抽奖名单滚动

实现抽奖名单滚动效果

在Vue中实现抽奖名单滚动效果可以通过CSS动画或JavaScript定时器控制。以下是两种常见方法：

使用CSS动画实现平滑滚动

通过transition和transform实现平滑的滚动效果：

<template>
  <div class="lottery-container">
    <div class="lottery-list" :style="{ transform: `translateY(${translateY}px)` }">
      <div v-for="(item, index) in prizeList" :key="index" class="prize-item">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prizeList: [
        { name: '一等奖' },
        { name: '二等奖' },
        { name: '三等奖' },
        // 更多奖项...
      ],
      translateY: 0,
      scrollInterval: null
    }
  },
  methods: {
    startScroll() {
      this.scrollInterval = setInterval(() => {
        this.translateY -= 1
        if (Math.abs(this.translateY) >= this.prizeList.length * 50) {
          this.translateY = 0
        }
      }, 50)
    },
    stopScroll() {
      clearInterval(this.scrollInterval)
    }
  },
  mounted() {
    this.startScroll()
  },
  beforeDestroy() {
    this.stopScroll()
  }
}
</script>

<style>
.lottery-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.lottery-list {
  transition: transform 0.1s ease;
}

.prize-item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
}
</style>

使用requestAnimationFrame实现高性能动画

对于更流畅的动画效果，可以使用requestAnimationFrame：

methods: {
  startScroll() {
    let lastTime = 0
    const scrollStep = () => {
      const now = Date.now()
      const delta = now - lastTime
      if (delta >= 50) {
        this.translateY -= 2
        if (Math.abs(this.translateY) >= this.prizeList.length * 50) {
          this.translateY = 0
        }
        lastTime = now
      }
      this.animationId = requestAnimationFrame(scrollStep)
    }
    this.animationId = requestAnimationFrame(scrollStep)
  },
  stopScroll() {
    cancelAnimationFrame(this.animationId)
  }
}

添加减速停止效果

实现抽奖结束时自然减速停止的效果：

methods: {
  startLottery() {
    this.scrollSpeed = 20
    const slowDown = () => {
      this.scrollSpeed *= 0.98
      this.translateY -= this.scrollSpeed

      if (this.scrollSpeed < 0.5) {
        this.stopScroll()
        // 对齐到某个奖项位置
        this.alignToWinner()
      } else {
        requestAnimationFrame(slowDown)
      }
    }

    // 先快速滚动
    this.startScroll()

    // 3秒后开始减速
    setTimeout(() => {
      this.stopScroll()
      slowDown()
    }, 3000)
  }
}

注意事项

1. 列表需要足够长以保证循环滚动效果，可以重复列表数据
2. 移动端注意性能优化，避免过度重绘
3. 停止时可能需要计算对齐到特定奖项位置
4. 使用will-change: transform可以提高动画性能

以上方法可以根据实际需求调整滚动速度、方向和停止逻辑，实现各种抽奖滚动效果。