1.0.0 • Published 4 years ago
pc-pcm-wave v1.0.0
pc-pcm-wave
一个简单的pcm波纹效果, 适用于preact项目, hooks编写, 有如下特性
- 可自定义状态数量
- 可自定义线的数量、粗细、颜色、波速、振幅、延迟等参数
Live Demo
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
- 增加更多效果
License
MIT 造轮子锻炼抽象能力
1.0.0
4 years ago