❗ 目前仅支持React

🌈 开箱即用

import Particle from "particle-text";

function App() {
  return (
    <div className="App">
      <Particle content="测试值" height={400} width={400} clickPlay />
    </div>
  );
}

🌻 支持配置项

interface PropsType {
  content: any; // 渲染内容
  physicsColor?: any; // 粒子颜色（目前仅支持rgba字符串格式，其它值会导致报错）
  physicsSize?: number; // 粒子尺寸
  height?: number; // 画布高度
  width?: number; // 画布宽度
  fontStyle?: Object; // 内容字体样式 (目前支持设置fontWeight，fontSize，fontFamily), 示例值 {fontSize: "4rem", fontWeight: 'bold',  fontFamily: 'Arial'}
  animationTime?: number; // 动画持续时间(毫秒)
  animationDelay?: number; // 动画延迟时间(毫秒)
  x?: number; // 内容展示在画布上的x坐标
  y?: number; // 内容展示在画布上的y坐标
  loop?: boolean; // 是否开启动画循环
  loopTime?: number; //动画循环间隔时间
  showContent?: boolean; // 动画结束是否显示原内容
  clickPlay?: boolean; // 通过点击播放动画
  defaultPlay?: boolean; // 默认播放动画，默认为true
  hoverPlay?: boolean; // 鼠标滑过播放动画
  animationDoneCallBack?: Function; // 动画完成后回调
  animationStartCallBack?: Function; // 动画开始回调
}

❓FAQ

问：为什么首次渲染和后续通过事件触发的渲染效果不一样？

答：react在生成环境中如果有使用strict标签包裹子元素，那么这些子元素的useEffect会触发两次，若在其中某个子元素中引用了该组件，也会导致初始化进行两次。部署到生产环境就正常了，不用过多关心。