vue实现投币动画效果

实现投币动画效果的方法

在Vue中实现投币动画效果，可以通过CSS动画和Vue的过渡系统结合完成。以下是几种常见的实现方式：

使用CSS动画和Vue过渡

定义一个硬币组件，通过CSS动画控制硬币的旋转和下落的视觉效果。

<template>
  <div class="coin-container">
    <transition name="coin-drop" @before-enter="beforeEnter" @enter="enter">
      <div v-if="showCoin" class="coin" :style="coinStyle"></div>
    </transition>
    <button @click="throwCoin">投币</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCoin: false,
      coinStyle: {}
    }
  },
  methods: {
    throwCoin() {
      this.showCoin = true
      setTimeout(() => {
        this.showCoin = false
      }, 2000)
    },
    beforeEnter(el) {
      el.style.transform = 'translateY(-100px) rotate(0deg)'
      el.style.opacity = '0'
    },
    enter(el, done) {
      let rotate = 0
      const rotateInterval = setInterval(() => {
        rotate += 30
        el.style.transform = `translateY(${Math.min(100, rotate/3)}px) rotate(${rotate}deg)`
        el.style.opacity = '1'
        if (rotate >= 360) {
          clearInterval(rotateInterval)
          done()
        }
      }, 20)
    }
  }
}
</script>

<style>
.coin-container {
  position: relative;
  height: 200px;
}

.coin {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: gold;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -20px;
  box-shadow: 0 0 10px gold;
}

.coin-drop-enter-active {
  transition: all 1s ease;
}
</style>

使用GSAP动画库

对于更复杂的动画效果，可以使用GSAP动画库来实现更流畅的投币动画。

<template>
  <div class="coin-game">
    <div ref="coin" class="coin" v-show="isCoinVisible"></div>
    <button @click="tossCoin">投币</button>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      isCoinVisible: false
    }
  },
  methods: {
    tossCoin() {
      this.isCoinVisible = true
      const coin = this.$refs.coin

      gsap.fromTo(coin, 
        { y: -100, rotation: 0, opacity: 0 },
        { 
          y: 100, 
          rotation: 720,
          opacity: 1,
          duration: 1.5,
          ease: "bounce.out",
          onComplete: () => {
            this.isCoinVisible = false
          }
        }
      )
    }
  }
}
</script>

<style>
.coin-game {
  position: relative;
  height: 200px;
}

.coin {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 30% 30%, #FFD700, #D4AF37);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -20px;
  box-shadow: 0 0 10px gold;
}
</style>

多个硬币同时投掷的效果

如果需要实现多个硬币同时投掷的效果，可以使用Vue的动态组件和列表渲染。

<template>
  <div class="coin-machine">
    <transition-group name="coins" tag="div" class="coin-area">
      <div 
        v-for="(coin, index) in coins" 
        :key="index"
        class="coin"
        :style="coin.style"
      ></div>
    </transition-group>
    <button @click="addCoins(3)">投3个币</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coins: []
    }
  },
  methods: {
    addCoins(count) {
      for (let i = 0; i < count; i++) {
        const coin = {
          id: Date.now() + i,
          style: {
            left: `${30 + i * 20}%`,
            animation: `coin-drop ${0.5 + i * 0.2}s ease-out forwards`
          }
        }
        this.coins.push(coin)

        setTimeout(() => {
          this.coins = this.coins.filter(c => c.id !== coin.id)
        }, 2000)
      }
    }
  }
}
</script>

<style>
.coin-machine {
  position: relative;
  height: 300px;
}

.coin-area {
  position: relative;
  height: 100%;
}

.coin {
  width: 30px;
  height: 30px;
  background: gold;
  border-radius: 50%;
  position: absolute;
  top: 0;
  box-shadow: 0 0 8px gold;
}

@keyframes coin-drop {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(200px) rotate(360deg);
    opacity: 0;
  }
}
</style>

这些方法提供了从简单到复杂的投币动画实现方案，可以根据项目需求选择合适的实现方式。CSS动画适合简单效果，GSAP适合需要精细控制的复杂动画，而transition-group则适合处理多个硬币同时动画的场景。