当前位置：首页 > VUE

vue实现红包上下

2026-01-22 23:26:49VUE

Vue 实现红包上下飘动动画

使用 CSS 动画结合 Vue 动态样式

在 Vue 中可以通过动态绑定样式和类名实现红包上下飘动的效果。定义一个 CSS 动画描述上下移动的关键帧，通过 Vue 控制动画的播放状态。

.red-envelope {
  position: absolute;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

在 Vue 组件中绑定样式类：

<template>
  <div class="red-envelope" :style="{ left: `${x}px`, top: `${y}px` }">
    <img src="red-envelope.png" alt="红包">
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: Math.random() * window.innerWidth,
      y: Math.random() * window.innerHeight
    }
  }
}
</script>

使用 GSAP 实现更流畅动画

GSAP 是一个专业的动画库，可以实现更复杂的红包飘动效果。

安装 GSAP：

npm install gsap

在组件中使用：

<template>
  <div ref="envelope" class="red-envelope">
    <img src="red-envelope.png" alt="红包">
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  mounted() {
    gsap.to(this.$refs.envelope, {
      y: -20,
      duration: 2,
      repeat: -1,
      yoyo: true,
      ease: "sine.inOut"
    })
  }
}
</script>

多个红包随机飘动效果

对于多个红包的场景，可以使用 v-for 循环生成，并为每个红包设置不同的动画参数。

<template>
  <div 
    v-for="(env, index) in envelopes" 
    :key="index" 
    class="red-envelope"
    :style="{
      left: `${env.x}px`,
      top: `${env.y}px`
    }"
    ref="envelopes"
  >
    <img src="red-envelope.png" alt="红包">
  </div>
</template>

<script>
export default {
  data() {
    return {
      envelopes: Array(10).fill().map(() => ({
        x: Math.random() * window.innerWidth,
        y: Math.random() * window.innerHeight
      }))
    }
  },
  mounted() {
    this.$refs.envelopes.forEach(el => {
      const duration = 2 + Math.random() * 3;
      const delay = Math.random() * 2;
      el.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
    });
  }
}
</script>

添加点击交互效果

可以为红包添加点击事件，点击时播放消失动画：

<template>
  <div 
    v-for="(env, index) in envelopes" 
    :key="index" 
    class="red-envelope"
    :style="{
      left: `${env.x}px`,
      top: `${env.y}px`,
      opacity: env.visible ? 1 : 0,
      transition: 'opacity 0.5s'
    }"
    @click="collectEnvelope(index)"
  >
    <img src="red-envelope.png" alt="红包">
  </div>
</template>

<script>
export default {
  methods: {
    collectEnvelope(index) {
      this.envelopes[index].visible = false;
      // 其他收集逻辑
    }
  }
}
</script>

这些方法提供了从简单到复杂的红包飘动动画实现方案，可以根据具体需求选择适合的方式。CSS 动画适合简单效果，GSAP 适合需要精细控制的复杂动画，v-for 适合批量生成多个动画元素。

vue实现红包上下