功能描述

最近在工作中接触到了一个红包雨的需求，涉及到的知识点主要是CSS3动画和响应事件的处理等，活不多说，下面我们来看具体的实现步骤吧。

如何动态生成红包

看上面图中代码，setRedEnvelopes()这个方法的作用是每隔500毫秒创建一个新的红包对象，让我分析下这个红包对象里的信息。

  setRedEnvelopes() {
    this.data.timer = setInterval(() => {
      const left = Math.random() * 80 + 5 // 随机设定红包距离屏幕左边的距离
      const duration = Math.random() * 3 + 1 // 随机设定红包下落持续的秒数
      const redEnvelope = {
        // 红包的未点击时的图片资源 注意：在手机端预览的话需要替换成网络地址
        url: '/images/red-envelope-split.png',
        left: left + '%', // 红包距离左边的距离
        duration: duration + 's' // 红包下落持续的秒数
      }
      this.setData({
        redEnvelopes: this.data.redEnvelopes.concat(redEnvelope)
      })
    }, 500) //每个500毫秒创建一个新的红包对象
  },

特别说明一下为什么这里需要设置每个红包下落持续的秒数，因为这样可以实现各红包下落的快慢，这样体验效果会更好。

接下来在wxml上实现红包元素的渲染

<view wx:for="{{redEnvelopes}}" wx:key="index" class="red-envelope" data-index="1" style="background-image: url('{{item.url}}');left: {{item.left}};animation-duration: {{item.duration}};" bind:tap="{{tools.changeBg}}"></view>

这一步中我们在红包的view标签上添加了很多属性，有样式属性，wsx响应事件（至于为什么会用wsx事件，这个后续会重点讲）

到这个时候红包其实还不能实现下落的过程，因为我们还没有编写CSS3动画相关样式，接下来就来实现吧。

上图代码实例中我们做了以下几件事：

1. 给红包的父级元素设置了position：relative;
2. 设置红包的样式position：absolute,并添加了animation动画属性；
3. 定义一个名称为 fall 的动画来实现红包的下落过程；

animation: fall 5s linear forwards；这个意思是指在5s内以匀速的方式完成这个名称为fall的动画，动画结束后停留在结束的位置，不用回到初始位置。

fall的这个动画应该很好懂了，就是让红包从屏幕上方移动到屏幕下面，translateY(-150rpx)是为了让红包在刚开始时藏在屏幕的上方。

如何实现交互事件

实现到这一步就可以初步实现一场红包雨了，很不是很简单，并没有多少代码，但是这个时候我们点击红包是没有事件响应的，改如何实现点击红包，然后红包裂开的效果呢？

实现这个红包裂开的效果，本质上其实就是点击后切换一张图片。或许你会想到在遍历红包的时候在view标签上加一个data-index属性，来给红包标上序号，然后添加点击事件，获取到当前点击到的那个红包的序号，在红包的数组中就可以通过序号找到这个元素，然后替换这个红包对象的url，这也是可行的，但是这个过程的链路是视图层->逻辑层->视图层。但是这真的是个好的方案吗？这种方案会不会有性能问题？

WXS响应事件

关于wxs的定义再回顾一下：WXS（WeiXin Script）是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。另外， WXS 还可以用来编写简单的 WXS 事件响应函数。

这里点击红包的时候触发的是一个wxs事件（tools.changeBg），请注意事件名需要用双花括号包裹着。

  module.exports = {
    changeBg: function(event, ownerInstance) {
      event.instance.setStyle({
        // 红包的破裂时的图片资源 注意：在手机端预览的话需要替换成网络地址
        'background-image': 'url("/images/red-envelope-split.png")'
      })
      // 对于已点击的红包不再计算数量
      // if (event.instance.hasClass('click-class')) {
      //   console.log('true')
      //  return false
      // }
      // event.instance.addClass('click-class')
      ownerInstance.callMethod('handleRedEnvelopeClick', { data: event.instance.getDataset() })
    }
  }

event.instance 来表示触发事件的组件的 ComponentDescriptor 实例。ownerInstance 表示的是触发事件的组件所在的组件的 ComponentDescriptor 实例，如果触发事件的组件是在页面内的，ownerInstance 表示的是页面实例。

在这个changeBg响应事件中，实现了切换红包的背景图片(这种方案的好处是这个点击事件是在视图层实现的，会更加高效)，以及点击后调用handleRedEnvelopeClick事件（计算点击的红包数量）。具体用法可以看文档WXS 事件响应函数。

完善交互逻辑

到目前为止已经实现红包雨的下落，点击红包后破裂的效果。后面我们可以继续完善逻辑，新加一个显示倒计时和已抢红包数量的数据面板，裂开的红包再次点击不计入总数量，这部分逻辑不是本文章的重点，下面是上传在掘金完整的代码，因为运行环境的不同，上面看不到效果。

结语

以上就是在微信小程序中实现红包雨的方法分享，如果你觉的帮助到了你，那就给个赞吧！。

参考文档：

1. developers.weixin.qq.com/miniprogram…
2. developer.mozilla.org/zh-CN/docs/…

原文链接：https://juejin.cn/post/7323436080312582180 作者：哈哈的小泥