vue实现抽奖名单滚动

实现抽奖名单滚动效果

在Vue中实现抽奖名单滚动效果可以通过多种方式完成，以下是一种常见的实现方法：

使用CSS动画和Vue数据绑定

创建滚动动画效果可以通过CSS的@keyframes和transform属性实现：

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

<script>
export default {
  data() {
    return {
      items: [
        { name: '张三' },
        { name: '李四' },
        { name: '王五' },
        // 更多名单...
      ],
      translateY: 0,
      animationInterval: null
    }
  },
  mounted() {
    this.startRolling()
  },
  beforeDestroy() {
    this.stopRolling()
  },
  methods: {
    startRolling() {
      this.animationInterval = setInterval(() => {
        this.translateY -= 1
        if (Math.abs(this.translateY) >= this.items.length * 50) {
          this.translateY = 0
        }
      }, 50)
    },
    stopRolling() {
      clearInterval(this.animationInterval)
    }
  }
}
</script>

<style scoped>
.lottery-container {
  height: 200px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}

.roll-list {
  transition: transform 0.1s linear;
}

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

使用Vue过渡效果

Vue提供了内置的过渡系统，可以用来创建更平滑的滚动效果：

<template>
  <div class="lottery-container">
    <transition-group name="roll" tag="div">
      <div v-for="(item, index) in visibleItems" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
        // 更多名单...
      ],
      currentIndex: 0,
      visibleCount: 5,
      animationInterval: null
    }
  },
  computed: {
    visibleItems() {
      const result = []
      for (let i = 0; i < this.visibleCount; i++) {
        const index = (this.currentIndex + i) % this.items.length
        result.push(this.items[index])
      }
      return result
    }
  },
  mounted() {
    this.startRolling()
  },
  beforeDestroy() {
    this.stopRolling()
  },
  methods: {
    startRolling() {
      this.animationInterval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.items.length
      }, 200)
    },
    stopRolling() {
      clearInterval(this.animationInterval)
    }
  }
}
</script>

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

.item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
}

.roll-enter-active, .roll-leave-active {
  transition: all 0.5s;
}
.roll-enter {
  transform: translateY(-50px);
  opacity: 0;
}
.roll-leave-to {
  transform: translateY(50px);
  opacity: 0;
}
</style>

使用第三方库实现

对于更复杂的效果，可以考虑使用第三方动画库如GSAP：

<template>
  <div ref="container" class="lottery-container">
    <div ref="list" class="roll-list">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      items: [
        { name: '张三' },
        { name: '李四' },
        { name: '王五' },
        // 更多名单...
      ],
      animation: null
    }
  },
  mounted() {
    this.startRolling()
  },
  beforeDestroy() {
    this.stopRolling()
  },
  methods: {
    startRolling() {
      const containerHeight = this.$refs.container.clientHeight
      const listHeight = this.$refs.list.clientHeight

      this.animation = gsap.to(this.$refs.list, {
        y: -(listHeight - containerHeight),
        duration: 10,
        ease: "none",
        repeat: -1
      })
    },
    stopRolling() {
      if (this.animation) {
        this.animation.kill()
      }
    }
  }
}
</script>

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

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

实现随机停止功能

添加随机停止功能可以让抽奖更加真实：

methods: {
  startRolling() {
    this.rolling = true
    this.animationInterval = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length
    }, 100)
  },
  stopRolling() {
    // 先减速
    clearInterval(this.animationInterval)
    const slowDownInterval = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length
    }, 200)

    // 随机停止
    setTimeout(() => {
      clearInterval(slowDownInterval)
      this.rolling = false
      this.$emit('stopped', this.items[this.currentIndex])
    }, 1000 + Math.random() * 2000)
  }
}

以上方法提供了不同复杂度的实现方案，可以根据项目需求选择合适的实现方式。CSS动画方案简单轻量，Vue过渡效果提供了更平滑的动画，而GSAP则适合需要复杂动画控制的场景。