vue实现红包跳动

Vue 实现红包跳动效果

要实现红包跳动效果，可以使用 CSS 动画结合 Vue 的动态绑定功能。以下是一个完整的实现方案：

创建红包组件

<template>
  <div class="red-packet" :style="animationStyle" @click="handleClick">
    <div class="envelope"></div>
    <div class="money">¥</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isJumping: false,
      jumpHeight: 0
    }
  },
  computed: {
    animationStyle() {
      return {
        transform: this.isJumping ? `translateY(-${this.jumpHeight}px)` : '',
        transition: this.isJumping ? 'transform 0.3s ease-in-out' : ''
      }
    }
  },
  methods: {
    startJumping() {
      this.jumpHeight = Math.random() * 20 + 10
      this.isJumping = true
      setTimeout(() => {
        this.isJumping = false
      }, 300)
    },
    handleClick() {
      this.startJumping()
      // 可以在这里添加点击后的逻辑，如打开红包等
    }
  },
  mounted() {
    setInterval(() => {
      this.startJumping()
    }, 2000)
  }
}
</script>

<style scoped>
.red-packet {
  position: relative;
  width: 100px;
  height: 120px;
  cursor: pointer;
}

.envelope {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e74c3c;
  border-radius: 5px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 85%,
    50% 100%,
    0 85%
  );
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.money {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #f1c40f;
}
</style>

增强跳动效果

如果需要更复杂的跳动效果，可以使用 CSS 关键帧动画：

@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.red-packet {
  animation: jump 1s infinite alternate;
}

多个红包随机跳动

对于多个红包随机跳动的场景：

<template>
  <div class="red-packets-container">
    <red-packet 
      v-for="(packet, index) in packets" 
      :key="index"
      :style="{
        left: `${packet.left}%`,
        top: `${packet.top}%`,
        animationDelay: `${packet.delay}s`
      }"
    />
  </div>
</template>

<script>
import RedPacket from './RedPacket.vue'

export default {
  components: { RedPacket },
  data() {
    return {
      packets: Array(5).fill().map(() => ({
        left: Math.random() * 80 + 10,
        top: Math.random() * 60 + 20,
        delay: Math.random() * 2
      }))
    }
  }
}
</script>

<style>
.red-packets-container {
  position: relative;
  width: 100%;
  height: 500px;
}

.red-packet {
  position: absolute;
  animation: jump 1s infinite alternate;
}
</style>

点击特效

添加点击红包时的爆炸效果：

<template>
  <div>
    <div 
      class="red-packet" 
      @click="explode"
      v-if="!exploded"
    >
      <!-- 红包内容 -->
    </div>
    <div class="explosion" v-if="exploded">
      <div 
        v-for="(particle, index) in particles" 
        :key="index"
        class="particle"
        :style="particle.style"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      exploded: false,
      particles: Array(20).fill().map(() => ({
        style: {
          left: '50%',
          top: '50%',
          backgroundColor: this.getRandomColor(),
          transform: `rotate(${Math.random() * 360}deg)`,
          animation: `fly ${Math.random() * 1 + 0.5}s forwards`
        }
      }))
    }
  },
  methods: {
    explode() {
      this.exploded = true
      setTimeout(() => {
        this.exploded = false
      }, 1000)
    },
    getRandomColor() {
      const colors = ['#f1c40f', '#e74c3c', '#e67e22', '#2ecc71']
      return colors[Math.floor(Math.random() * colors.length)]
    }
  }
}
</script>

<style>
.explosion {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

@keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(var(--x) * 100px), 
      calc(var(--y) * 100px)
    );
    opacity: 0;
  }
}

.particle:nth-child(odd) {
  --x: 0.5;
  --y: -0.7;
}
.particle:nth-child(even) {
  --x: -0.4;
  --y: -0.5;
}
/* 更多粒子方向变化 */
</style>

这些方案可以根据实际需求进行调整和组合，实现不同风格的红包跳动效果。