红包雨开发攻略 3步解决不再虐-杭州APP开发为你呈现

红包雨示例

红包雨效果趣味性强、操作简单、交互体验好，但是开发者需要考虑多个逻辑，其中开发者需要重点关注的技术点包括：

• 实现红包雨下落效果

• 保证红包雨的渲染性能

• 实现点击红包的消失动画

现在一起来看看如何突破上述技术点，快速实现红包雨动画效果！

红包雨看似是不同的红包陆续降落，实际上这种效果是由一批批下落的红包组成。只要完成第一批红包雨效果，通过 setTimeout 继续实现批次重复，即可实现红包源源不断降落的效果。

那么如何开发第一批红包雨效果呢？

1. 设置单个红包元素，例如下落角度、下落时间等

2. 使用循环语句生成多个红包元素，添加到红包雨 list，调用 setData 执行渲染

3. 使用 wx.nextTick()，在回调函数中开启动画

4. 调用 wx.createAnimation({}) 生成动画实例对象 animation，调用 animation 设置红包雨的最终位置、旋转角度、动画持续时间

5. 通过 Animation.export() 导出动画信息，通过 setData 设置红包的 animation 属性，并绑定到红包模板的 animation 动画属性
   

通过上述方法，红包源源不断降落的效果即可实现。但是由于红包以弹层形式出现，容易出现下落密度不一致的渲染问题。

对于第二个包含多个元素的原因，开发者可以通过缓存判断，销毁已完成动画播放的节点，即可实现性能优化。

正如上文提到，红包雨动画通过完成第一批红包渲染并且不断重复多个批次，即可实现红包降落。同理，点击红包消失的动画同样应用于这个逻辑。

1. 绑定红包点击事件到第一批红包

2. 修改后续批次的红包点击事件位置

3. 绑定触碰事件到红包循环模版外的父元素，同时为红包可点击部分绑定数据项和点击标记

4. 当父元素收到触碰事件，通过 e.target.dataset 获取到标记值，统计红包点击数

随着产品优化及开发能力提升，用户能够在小程序体验更多丰富的交互能力。通过上述方法，开发者了解到红包雨开发的过程，同时能够最大限度优化性能，保证用户体验。

如有其他小程序相关的问题，可在 微信开放社区 发帖互动，技术专员将为大家解答及进行深度交流。

原创｜腾讯前端开发工程师 powellmao