更新记录

1.0.1（2026-01-15） 下载此版本

优化打开红包动画

1.0.0（2026-01-14） 下载此版本

v1.0.0 - 2026-01-12 初始版本发布 核心功能：实现沉浸式红包遮罩层，支持红包显示 / 隐藏控制 开包动画：红包封面上下部分拆分移动 + 渐隐动画，开包按钮 3D 旋转加载效果 结果展示：结果卡片弹性缩放动画，昵称 / 祝福语 / 金额分步缩放展示 基础 API：支持自定义头像、昵称、金额，提供 close/opened 事件回调 多端适配：基于 uni-app 开发，兼容微信小程序 / APP/H5 等端运行

平台兼容性

uni-app

openRedPacket - 打开红包动画组件

基于 uni-app 开发的红包开包动画组件，包含沉浸式遮罩层、红包封面拆分动画、开包旋转加载、结果卡片分步缩放动画等交互效果，适配多端运行（微信小程序 / APP/H5）。
功能特性
🎭 沉浸式遮罩层：全屏半透明遮罩，阻止底层页面滚动，提升交互体验
✨ 红包封面动画：点击开包后封面上下部分分别向上 / 向下移动并渐隐
🔄 开包加载动画：“开” 字按钮 3D 旋转加载效果，模拟开包过程
🎉 结果分步动画：昵称、祝福语、金额区域从小到大依次缩放展示
🚪 灵活关闭逻辑：支持点击遮罩层 / 关闭按钮关闭红包，重置动画状态

快速使用

1. 组件引入

将红包组件文件（red-packet.vue）放置在项目 components/red-packet/ 目录下，在需要使用的页面引入：

<script>
import RedPacket from '@/components/red-packet/red-packet.vue';

export default {
  components: { RedPacket },
  // ...其他代码
}
</script>

2. 基础使用示例

<template>
  <view>
    <!-- 触发按钮 -->
    <button @click="showRedPacket = true">打开红包</button>

    <!-- 红包组件 -->
    <red-packet 
      :visible="showRedPacket" 
      avatar="/static/images/alipayCicle_1.png"
      username="钱品阁"
      amount="9999"
      @close="showRedPacket = false"
      @opened="onRedPacketOpened"
    />
  </view>
</template>

<script>
import RedPacket from '@/components/red-packet/red-packet.vue';

export default {
  components: { RedPacket },
  data() {
    return {
      showRedPacket: false // 控制红包显示/隐藏
    };
  },
  methods: {
    // 红包打开动画完成回调
    onRedPacketOpened() {
      console.log('红包领取成功！可在此处理金额到账、状态更新等逻辑');
    }
  }
}
</script>

API 说明

````javascript

Props（属性）参数名 类型 默认值 说明 visible Boolean false 是否显示红包组件 avatar String /static/images/alipayCicle_1.png 红包发送者头像地址 username String 钱品阁 红包发送者昵称 amount String / Number 9999 红包金额（展示用） Events（事件） 事件名 触发时机 说明 close 点击遮罩层 / 关闭按钮时触发 关闭红包，重置组件状态 opened 开包按钮点击后，动画完成（600ms）时触发 红包打开成功，可处理业务逻辑 样式自定义 组件样式使用 scoped 隔离，可根据业务需求调整以下核心样式： 红包尺寸：修改 .packet-cover/.result-card 的 width/height（默认 620rpx * 860rpx） 主色调：替换 #e64340/#d83d3a 调整红包背景色，#fbd6a5 调整文字 / 边框金色系 动画时长： 封面拆分动画：修改 .cover-top/.cover-bottom 的 transition 时长（默认 0.6s） 结果分步动画：调整 .nickname-res/.wish-res/.amount-box 的 transition 时长 / 延迟 开包旋转动画：修改 @keyframes btn-spin 的动画时长（默认 0.6s） 间距调整：修改 .amount-box 的 margin-top 调整金额区域位置，.footer-btn 调整底部按钮位置