vue实现红包跳动

vue实现红包跳动效果

在Vue中实现红包跳动效果，可以通过CSS动画和Vue的动态绑定结合实现。以下是具体实现方法：

使用CSS关键帧动画

通过@keyframes定义跳动动画，结合Vue的v-bind:class或v-bind:style动态控制动画状态。

<template>
  <div class="red-packet" :class="{ 'jump': isJumping }" @click="startJump">
    <!-- 红包内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isJumping: false
    }
  },
  methods: {
    startJump() {
      this.isJumping = true
      setTimeout(() => {
        this.isJumping = false
      }, 1000)
    }
  }
}
</script>

<style>
.red-packet {
  width: 100px;
  height: 120px;
  background-color: red;
  position: relative;
  transition: transform 0.3s;
}

.jump {
  animation: jump 0.5s ease;
}

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

使用GSAP动画库

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

<template>
  <div class="red-packet" ref="packet">
    <!-- 红包内容 -->
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  mounted() {
    this.$refs.packet.addEventListener('click', this.jump)
  },
  methods: {
    jump() {
      gsap.to(this.$refs.packet, {
        y: -30,
        duration: 0.3,
        yoyo: true,
        repeat: 1
      })
    }
  }
}
</script>

实现连续跳动效果

通过递归或循环实现红包连续跳动效果。

methods: {
  continuousJump(times = 3) {
    if(times <= 0) return
    gsap.to(this.$refs.packet, {
      y: -30,
      duration: 0.3,
      yoyo: true,
      repeat: 1,
      onComplete: () => this.continuousJump(times - 1)
    })
  }
}

添加物理效果

为跳动添加更真实的物理效果，可以使用ease函数调整动画曲线。

gsap.to(this.$refs.packet, {
  y: -50,
  duration: 0.4,
  ease: "bounce.out",
  yoyo: true,
  repeat: 1
})

随机跳动位置

让红包在跳动时随机改变水平位置，增加动态感。

jump() {
  const randomX = (Math.random() - 0.5) * 50
  gsap.to(this.$refs.packet, {
    x: randomX,
    y: -30,
    duration: 0.3,
    yoyo: true,
    repeat: 1
  })
}

以上方法可以根据实际需求组合使用，创造出各种不同的红包跳动效果。通过调整动画参数如持续时间、幅度和缓动函数，可以获得不同的视觉体验。