微信小程序使用图片实现红包雨功能

微信小程序红包雨功能实现:从组件封装到页面调用的完整实践

先看示例截图:

一、背景与技术选型

在微信小程序营销活动中,红包雨是一种极具吸引力的互动形式。实现红包雨效果主要有 Canvas 和图片两种方案:

(1)Canvas 方案:性能优异,资源占用小,但视觉表现依赖绘图 API

(2)图片方案:视觉效果真实,可灵活设计红包样式,但资源加载与内存占用较高

本文将采用图片方案实现红包雨组件,通过组件化设计提升代码复用性,并分享性能优化经验,帮助开发者在真实感与性能间找到平衡点。
二、组件设计与实现
2.1 组件结构设计

首先创建组件文件夹components/img-rain,目录结构如下:

bash 复制代码
components/
└─ img-rain/
   ├── index.js         // 逻辑层
   ├── index.wxml       // 视图层
   ├── index.wxss       // 样式层
   ├── index.json       // 配置文件
   └── images/             // 红包图片资源
       ├── img1.png
       ├── img2.png
       └── img3.png

2.2 组件核心代码实现

以下是图片红包雨组件的完整实现:

javascript 复制代码
Component({
  properties: {
    petalCount: {
      type: Number,
      value: 60
    },
    speed: {
      type: Number,
      value: 2
    },
    wind: {
      type: Number,
      value: 0.3
    },
    images: {
      type: Array,
      value: [
        '/images/5.png',
        '/images/100.png',
        '/images/500.png',
        '/images/1000.png'
      ]
    }
  },

  data: {
    petals: []
  },

  lifetimes: {
    attached() {
      this.createPetals();
      this.startAnimation();
    },
    detached() {
      this.stopAnimation();
    }
  },

  methods: {
    createPetals() {
      const {
        petalCount,
        images
      } = this.properties;
      const {
        windowWidth,
        windowHeight
      } = wx.getWindowInfo();
      const petals = [];

      for (let i = 0; i < petalCount; i++) {
        const size = 40 + Math.random() * 20;
        const left = Math.random() * (windowWidth - size);
        const top = -size - Math.random() * windowHeight;
        petals.push({
          id: `petal-${i}`,
          image: images[Math.floor(Math.random() * images.length)],
          x: left,
          y: top,
          size,
          speed: 5 + Math.random() * this.properties.speed,
          windEffect: (Math.random() - 0.5) * this.properties.wind
        });
      }
      this.setData({
        petals
      });
    },
    // 开始动画
    startAnimation() {
      const {
        windowHeight
      } = wx.getWindowInfo();
      this.animationInterval = setInterval(() => {
        this.setData({
          petals: this.data.petals.map(petal => {
            // 更新位置和旋转
            petal.y += petal.speed;
            petal.x += petal.windEffect;
            // 如果花瓣超出屏幕,重置到顶部
            if (petal.y > windowHeight + petal.size || petal.x < -petal.size || petal.x > wx.getWindowInfo().windowWidth + petal.size) {
              petal.y = -petal.size - Math.random() * windowHeight;
              petal.x = Math.random() * (wx.getWindowInfo().windowWidth - petal.size);
            }
            return petal;
          })
        });
      }, 30); // 约30ms一帧
    },

    // 停止动画
    stopAnimation() {
      if (this.animationInterval) {
        clearInterval(this.animationInterval);
      }
    },
  }
});

2.3 视图层实现

xml 复制代码
<view class="rain-container">
  <image wx:for="{{petals}}" wx:key="id" src="{{item.image}}" style="position: fixed;left: {{item.x}}px;top: {{item.y}}px;width: {{item.size}}px;height: {{item.size+20}}px;pointer-events: none;z-index: -1;"></image>
</view>

2.4 样式层实现

css 复制代码
.rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  overflow: hidden;
}

三、页面调用与集成
3.1 页面配置

在需要调用的界面的json文件处引入组件

javascript 复制代码
{
  "usingComponents": {
    "img-rain": "/components/img-rain/index"
  },
  "navigationStyle": "custom"
}

3.2 页面布局

xml 复制代码
<img-rain petalCount="10" speed="0" wind="0."></img-rain>

四、总结与拓展

本文通过组件化设计实现了微信小程序中基于图片的红包雨效果,兼顾了视觉真实感与代码复用性。实际项目中,可根据活动预算和性能要求选择合适的实现方案:

(1)对性能要求高、视觉要求低的场景推荐使用 Canvas 方案

(2)对视觉效果要求高、预算充足的场景推荐使用图片方案

编写不易,谢谢点赞+收藏+关注,后续更新更多示例呦~

相关推荐
_Kayo_1 小时前
VUE2 学习笔记14 nextTick、过渡与动画
javascript·笔记·学习
咔咔一顿操作3 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
漂流瓶jz4 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°4 小时前
css 不错的按钮动画
前端·css·微信小程序
qq_427506085 小时前
JavaScript和小程序写水印的方法示例
前端·算法·微信小程序
落雪小轩韩6 小时前
Vue常见题目
javascript·vue.js
烛阴6 小时前
告别重复劳动:Gulp.js 新手入门教程
前端·javascript
JSON_L7 小时前
Vue 正在热映模块
前端·javascript·vue.js