微信小程序特效1/200：微信红包动画特效实现

027西瓜皮

于 2025-02-06 20:41:48 发布

阅读量640

点赞数 7

文章标签：微信小程序微信小程序

本文链接：https://blog.csdn.net/creen027/article/details/145481562

版权

背景

朋友们好！我是西瓜皮，一个立志写出 200 个小程序特效的创作者。新岁已至，2025
年开工之际，我特意为大家制作了一个微信红包动画特效，希望借这个小小的特效，给大家送上新春的祝福，愿大家在新的一年里万事顺遂，喜乐安康！

效果

在这里插入图片描述

1. 视觉设计

红包页面主要包含以下视觉元素:

<!-- /pages/redpacket/redpacket.wxml -->
<view class="container">
  <view class="redpacket {{isOpening ? 'opening' : ''}} {{isOpened ? 'opened' : ''}}">
    <!-- 关闭按钮 -->
    <view class="close-btn" bindtap="closeRedPacket">
      <text class="close-icon">×</text>
    </view>

    <!-- 红包头部 -->
    <view class="packet-header">
      <image class="packet-icon" src="/assets/redpacket-icon.png" mode="aspectFit"></image>
      <text class="packet-title">微信红包</text>
      <text class="packet-subtitle">给你发了一个红包</text>
    </view>

    <!-- 红包祝福语 -->
    <view class="blessing-text">恭喜发财，大吉大利!</view>

    <!-- 开红包按钮 -->
    <view class="packet-button" bindtap="openRedPacket">
      <text class="open-text">開</text>
    </view>

    <!-- 打开后的红包内容 -->
    <view class="packet-opened" wx:if="{{isOpened}}">
      <view class="money">
        <text class="symbol">¥</text>
        <text class="amount">{{amount}}</text>
      </view>
      <view class="detail-button" bindtap="goToDetail">查看详情</view>
    </view>
  </view>
</view>

半透明遮罩背景
红包主体
关闭按钮
头部图标和标题
祝福语文本
开红包按钮
打开后的金额展示

2. 动画效果

2.1 摇晃动画

当用户点击开红包按钮时,红包会有轻微的摇晃效果:

/** /pages/redpacket/redpacket.wxss **/
.opening {
  animation: shake 0.2s ease-in-out infinite;
}

.opened .packet-opened {
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-out;
}

@keyframes shake {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-1deg);
  }
  75% {
    transform: rotate(1deg);
  }
}

使用 CSS @keyframes 实现左右摇摆,通过 transform: rotate() 控制摆动角度。

2.2 打开动画

红包打开时的过渡效果:

/** /pages/redpacket/redpacket.wxss **/
.packet-opened {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FA5151;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.8);
}

使用 CSS transform 和 opacity 实现缩放淡入效果。

2.3 按钮阴影

开红包按钮的视觉层次:

/** /pages/redpacket/redpacket.wxss **/

.packet-button {
  width: 140rpx;
  height: 140rpx;
  background: #FFE2B1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 120rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  position: relative;
}

.packet-button::after {
  content: '';
  position: absolute;
  top: -100rpx;
  left: 50%;
  width: 600rpx;
  height: 100rpx;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 70%);
  transform: translateX(-50%);
}