deepkolos / pc-pcm-wave

preact pcm wave effect component support real time state change

pc-pcm-wave

一个简单的pcm波纹效果, 适用于preact项目, hooks编写, 有如下特性

1. 可自定义状态数量
2. 可自定义线的数量、粗细、颜色、波速、振幅、延迟等参数

Live Demo

Link

Props

参数	类型	默认值	描述
stateMap	StateMap		默认参数
className	string		根元素className
transitionDuration	number	500	状态变换时长

Props Type: StateMap

键名	键值	描述
[string]	State	状态配置

Props Type: State

键名	键值	描述
a	number	振幅
ws	number	波速
p	number	频率
width	number	线宽度
color	string	线颜色
delay	number	延迟单位秒

VM Public Methods

方法	参数	描述
setState	stateName(string)	切换到stateMap的键值所对应的配置

Demo Code

const line1Def = {
  p: 0.7,
  width: 1.3,
  color: 'rgba(255,255,255,1)',
  delay: 0,
}

const line2Def = {
  p: 0.7,
  width: 1,
  color: 'rgba(255,255,255,0.5)',
  delay: 0.45,
}

const stateMap = {
  idle: [
    { a: 0, ws: 0, ...line1Def },
    { a: 0, ws: 0, ...line2Def },
  ],
  noise: [
    { a: 4, ws: 9, ...line1Def },
    { a: 3, ws: 9, ...line2Def },
  ],
  voice: [
    { a: 9, ws: 11, ...line1Def },
    { a: 7, ws: 11, ...line2Def },
  ],
}

function Page() {
  const waveRef = useRef()

  const onClick = () => {
    // 建议参考Demo的代码
    waveRef.current && waveRef.current.setState(Math.random() > 0.5 ? 'noise' : 'voice')
  }

  return <div onClick={onClick}>
    <PCMWave ref={waveRef} stateMap={stateMap} />
  </div>
}

TODO

1. 增加更多效果

License

MIT 造轮子锻炼抽象能力