装点节日氛围！轻松get小程序红包动画效果（Vue3+TS）

使用 Vue3 + TS 在 Uniapp 中实现红包动画效果

步骤一：准备工作

• 安装依赖： 通过运行 npm install animate.css --save 安装 animate.css 依赖。
• 引入样式表： 在 main.ts 文件中，通过 import 'animate.css' 引入 animate.css 样式表。

步骤二：创建红包组件

• 红包头部： 创建红包头部，包括标题和一个红包图标。
• 红包中部： 创建红包中部，放置红包正文。
• 红包底部： 创建红包底部，放置按钮（如领取红包和分享红包）。

步骤三：添加动画效果

• 头部动画效果： 使用 uni.createAnimation() 创建动画效果，实现头部旋转、缩放等动画。
• 中部动画效果： 创建中部动画效果，实现中部向上平移的动画。
• 底部动画效果： 创建底部动画效果，实现底部向右平移的动画。

步骤四：使用红包组件

在小程序页面中，将红包组件添加到页面中。

示例代码

//红包组件
<template>
  <div class="red-packet">
    <div class="header">
      <div class="title">红包</div>
      <div class="icon">🧧</div>
    </div>
    <div class="content">
      <p>恭喜发财，红包拿来！</p>
    </div>
    <div class="footer">
      <button @click="openRedPacket">领取红包</button>
      <button @click="shareRedPacket">分享红包</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { uni } from '@dcloudio/uni-app';

export default {
  setup() {
    const animation = ref(uni.createAnimation());

    // 头部动画效果
    animation.value
      .rotate(360)
      .scale(1.5)
      .duration(2000)
      .iterations(Infinity)
      .start();

    // 中部动画效果
    animation.value
      .translateY(-100)
      .duration(1000)
      .delay(1000)
      .start();

    // 底部动画效果
    animation.value
      .translateX(100)
      .duration(1000)
      .delay(2000)
      .start();

    return {
      animation,
    };
  },
};
</script>

<style>
.red-packet {
  width: 300px;
  height: 200px;
  background-color: #ff6600;
  border-radius: 10px;
  padding: 10px;
  animation: slideInUp 1s ease-in-out;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.icon {
  font-size: 36px;
  color: #ffcc00;
  margin-left: 10px;
}

.content {
  text-align: center;
  margin-top: 20px;
}

.p {
  font-size: 16px;
  color: #fff;
}

.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}

.button {
  width: 80px;
  height: 30px;
  background-color: #ffcc00;
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
}
</style>

常见问题解答

1. 如何实现头部无限旋转？
   • 使用 animation.value.iterations(Infinity)。
2. 如何延迟中部动画效果？
   • 使用 animation.value.delay(1000)。
3. 如何让底部动画效果从右侧进入？
   • 使用 animation.value.translateX(100)。
4. 如何改变红包组件的尺寸？
   • 修改 style 中 .red-packet 的 width 和 height 属性。
5. 动画效果不起作用，怎么办？
   • 确保已经正确安装了 animate.css 依赖，并且在组件中生成了动画。