red-envelope-rain

基于 canvas、requestAnimationFrame 的高性能红包雨效果

如何使用

npm i red-envelope-rain -S

import RedEnvelopeWar from 'red-envelope-rain'

this.rains = [
  {
    image: require('./img/shixin.png'),
    width: 80,
    height: 80,
    ratio: 7,
    score: 2,

    clicked: {
      image: require('./img/xiaosan.png'),
      width: 80,
      height: 80,
      translate: [-2, -2],
    },
  },
  {
    id: 2,
    image: require('./img/kong.png'),
    width: 80,
    height: 80,
    ratio: 3,
    score: 3,

    clicked: {
      image: require('./img/kong.png'),
      width: 80,
      height: 80,
      translate: [-2, -2],
    },
  }
]

this.redEnvelopeRain = new RedEnvelopeRain({
  el: '#canvas',
  preload: true,
  interval: 300,
  speed: 6,
  horizontalMovement: false,
  // boundary: 20,
  rains: this.rains,
})

// 红包气泡传出来的点击事件
this.redEnvelopeRain.$on('strike', (rain) => {
  this.score += rain.score
  console.log(rain)
})

参数

参数	说明	类型	默认值
el	挂载的canvas元素	string|HTMLCanvasElement	-
proload	是否预加载rains中的image图片	boolean	true
interval	生成红包的间隔时间	number	500
speed	红包每帧移动的距离（px）	number	2
horizontalMovement	是否支持横向移动	boolean	false
boundary	点击红包边界距离，为number时表示四边的距离，为array时表示上右下左的距离	number|array	-
rains	红包数组信息	array	-

rains参数说明

参数	说明	类型	默认值
image	红包图片地址	string	-
width	宽度	number	-
height	高度	number	-
ratio	出现的权重	number	1
speed	红包每帧移动的距离（px），优先级更高	number	-
clicked	击中效果	object	-

clicked参数说明

参数	说明	类型	默认值
image	击中红包图片地址	string	-
width	宽度	number	-
height	高度	number	-
translate	相对于红包的x、y轴位移	array	-
speed	红包每帧移动的距离（px），优先级更高	number	-
duration	被点击红包停留时长	number	200

ratio说明

以下面例子，图片1生成的概率为1/3，图片2生成的概率为2/3。

[
  {
    image: require('./img/1.png'),
    width: 140,
    height: 120,
    ratio: 1,
  },
  {
    image: require('./img/2.png'),
    width: 140,
    height: 120,
    ratio: 2,
  }
]

事件

// 红包被击中，被回传红包信息
redEnvelopeRain.$on('strike', (rain) => {
  console.log(rain)
})

方法

方法名	说明	参数
play	游戏开始	-
pause	游戏暂停	-
clear	游戏停止	-
add	动态添加红包	rain信息
remove	若需移除红包，则传入的rain信息需包含id字段	id