基于Vue的红包雨效果实现

最近遇到了一个红包雨的需求，就大概这个样子：

image.png

具体效果可以进入拼多多查看。

在实现这个效果之前，我先安利一个我们老大之前写的基于requestAnimationFrame实现的小动画框架 《chito》。https://redmed.github.io/chito/

本文所述的需求均依赖此框架完成。

它可以根据你传入的相关动画参数来为你创建流畅的补间动画。

---

OK 回归正题。

首先思考几个问题。

1、红包要如何插入进来并展示掉落动画？
思考结果：平常的方式就是创建一个以单个红包为纬度的组件，我需要创建多少个红包，进页面就用v-for来创建多少个dom。但是我觉得以我司运营的套路，这个红包以后肯定会各种复用，我总不能谁复用这个功能都copy一遍我的代码过去吧 那简直太灾难了。
所以我准备将红包的插入方式改为函数调用的方式，就像在日常的后台管理系统中调用Element-UI中的 this.$message.success()一样，调用一次函数，红包就从上往下掉落一次，再根据不同的参数来单独控制每个红包的掉落速度、点击红包后对应的得分，甚至红包的颜色等等各项自定义属性。

2、红包的掉落需要哪些参数？
思考结果：以最最简单的交互来讲，可能只需要掉落速度，从何处掉落（红包掉落动画起始点的X轴），红包数量，红包雨持续的时间，点击红包后的反馈动画。
现在我有两个组件，1、父组件来负责红包的展示，以及红包的掉落的属性（上述那些）。2、子组件就是红包组件。

3、通过函数调用的组件如何编写和调用？
这个貌似官方没有什么对应的文档，我也是从Element-UI的源码中抄过来的。

4、未经允许直接复制本文的同学，我谢谢你。

---

OK进入开发，首先就是红包组件

首先我要定义一个红包容器，代码十分简单, 再给它一个简简单单的样式

这样，屏幕上就会出现一个红包，图是我随便找的一个。

image.png

红包应该是竖着的，我随便截了个图而已。

红包组件的详细代码，每一行都有注释，我不相信你看不懂

因为要通过函数调用的方式调用组件，所以还需要写一个插件。

源码如下：

// 引入Vue
import Vue from 'vue'
// 引入红包组件
import bonusItem from './bonusItem.vue';

// 红包实例
let packet;

// 组件挂载
function createItem(args) {

  // 用vue渲染红包组件并挂载
  const vnode = new Vue({
    render: h => h(bonusItem)
  }).$mount()

  // 将组件添加到body上
  document.body.appendChild(vnode.$el)

  // 返回当前组件的实例
  return vnode.$children[0]
}

export function showPacket(args) {
  // 创建组件
  packet = createItem(args)

  // 将组件实例暴露出去
  return packet
}
export default showPacket

这样，我们就可以通过调用函数的方式动态插入组件了

OK，接下来就是父组件的调用，完整代码如下：

最终的效果如下：

image.png

因为没有工具录制gif 所以截了个示例图，快去自己试试吧。

搬运本文，请注明原文地址，谢谢。