Skip to content

Latest commit

 

History

History
147 lines (116 loc) · 5.45 KB

README.md

File metadata and controls

147 lines (116 loc) · 5.45 KB
Raw

烟火活动的红包雨

引入

$ npm i @tencent/firework-redpack-rain

样例

您可以访问http://firework-redpack-rain.pages.oa.com，查看样例。

使用

简要使用：

import RedpackRain from '@tencent/firework-redpack-rain';

const rain = new RedpackRain({
  selector: '.rain-container', // 要嵌入的容器
  onClick(isHited) {
    // 点击回调，只要点击就会回调，isHited为boolean类型，表示是否击中红包
    console.log(isHited);
  },
});
rain.start(); // 红包雨开始

setTimeout(function () {
  rain.stop(); // 红包雨结束
}, 6000);

在 react 中使用：

function App() {
  const rainRef = (useRef < null) | (RedpackRain > null);
  useEffect(() => {
    const rain = new RedpackRain({
      selector: '.rain-container',
    });
    rainRef.current = rain;
    rain.start();

    return () => rain.stop();
  }, []);

  const handleStopClick = () => {
    if (rainRef.current) {
      rainRef.current.stop();
    }
  };

  return (
    <div className="App">
      <button onClick={handleStopClick}>停止</button>
      <div className="rain-container"></div>
    </div>
  );
}

实例方法说明

实例有 3 个方法。

start

初始化实例后，并不会立刻启动红包雨，而是执行start()后，才开始下红包雨。

stop

调用stop()方法后，即停止下红包雨，并清空 canvas 面板。

setOptions

可以在下红包雨的过程中，修改配置，需要注意的是：

  1. 该方法需要在 start()之后和 stop()之前才能调用，即在下红包雨的过程中才有效；
  2. 新的配置只会对后续新产生的的红包有影响，之前已产生红包依然使用之前的配置；

输入的参数与初始化时的参数几乎一样（除了无法设置 selector 外，其他的参数均可以重新设置）；而且，二级配置中也可以只设置部分参数；如下面的配置中，redpack 配置中有多个参数，我们可以只设置 speedMin 和 speedMax 两个参数即可。

rain.setOptions({
  interval: 800, // 修改红包产生的时间间隔，单位毫秒
  redpack: {
    speedMin: 40, // 红包下降速度的下限
    speedMax: 40, // 红包下降速度的上限
  },
});

其他参数，可以参照下面的参数说明。

参数说明

RedpackRain是一个类，在构建实例时，除selector外，其他均为非必须参数。

参数 是否必填 类型 默认值 说明
selector 是 string | HTMLElement 要渲染红包雨的容器
可以是选择器也可以是 dom 元素
interval 否 number 1600 下红包雨的间隔，单位毫秒
onClick function(isHited: boolean){} 空 整个红包雨区域的点击，isHited 表示是否命中红包
onMonitor function({fps}){} 空 红包雨的 fps 监控
redpack 否 红包配置
redpack.speedMin 否 number 10 红包下降速度的最小值
redpack.speedMax 否 number 10 红包下降速度的最大值
redpack.imgUrl 否 string 红包的图片
redpack.width number 192 红包的宽度
redpack.height number 216 红包的高度
bubble 命中红包后的上升气泡的配置
bubble.imgUrl string 气泡的图片
bubble.width number 156 气泡的宽度
bubble.height number 111 气泡的高度
bubble.speed number 5 气泡每帧上升的高度
bubble.opacitySpeed number 0.04 气泡每帧减少的透明度

使用方式：

const rain = new RedpackRain({
  selector: document.body,
  interval: 1600,
  redpack: {
    speedMin: 10,
    speedMax: 10,
    imgUrl: 'https://sola.gtimg.cn/aoi/sola/20201226100322_I1ltnkzJVc.png',
    width: 126,
    height: 174,
  },
  bubble: {
    imgUrl: 'https://sola.gtimg.cn/aoi/sola/20201225103914_2QQ9bXg2rU.png',
    width: 156,
    height: 111,
    speed: 5,
    opacitySpeed: 0.04,
  },
  onClick: (isHited) => {
    console.log(isHited);
  },
  onMonitor(monitors) {
    console.log(monitors);
  },
});