https://github.com/zhangyu1818/motion-wave
Animate your waves with ease!
https://github.com/zhangyu1818/motion-wave
animated-wave wave waveform
Last synced: 3 months ago
JSON representation
Animate your waves with ease!
- Host: GitHub
- URL: https://github.com/zhangyu1818/motion-wave
- Owner: zhangyu1818
- License: mit
- Created: 2023-06-18T09:07:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-27T02:57:36.000Z (almost 2 years ago)
- Last Synced: 2025-03-02T19:02:44.807Z (4 months ago)
- Topics: animated-wave, wave, waveform
- Language: TypeScript
- Homepage: https://zhangyu1818.github.io/motion-wave/
- Size: 3.21 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh_CN.md
- License: LICENSE
Awesome Lists containing this project
README
# Motion Wave 🌊
---
[English](./README-zh_CN.md) | 简体中文
开箱即用，简单的方式让你的波浪动起来 🤩
[**demo**](https://zhangyu1818.github.io/motion-wave/)
## 功能 ✨
- 波浪组件直接使用！
- 流畅的动画，让你的波浪更有质感！
- 通过 Hook 创建波浪，更具自定义！
- 不用 React？原生也能用！
## 安装 📦
```shell
pnpm install motion-wave
```
## WaveConfig 配置参数
**frequency**
- 类型：`number`
- 波浪周期
**amplitude**
- 类型: `number`
- 波浪高度
**phase**
- 类型: `number`
- 波浪水平位置
**speed**
- 类型: `number`
- 波浪动画速度
**offset**
- 类型: `number`
- 波浪上下位置
**color**
- 类型: `string`
- 波浪颜色
## 组件使用
**``**
```jsx
function App() {
return (
)
}
```
**``**
[](https://codesandbox.io/s/dreamy-booth-tw5w5k?fontsize=14&hidenavigation=1&theme=dark)
```jsx
function App() {
return (
)
}
```
`MotionConfig`的详细配置，请参阅[framer-motion](https://www.framer.com/motion/transition/)。
## Hook
```
useWave(config:WaveConfig, ref?: unknown)
```
示例:
```jsx
const Wave = props => {
const [canvasRef, handler] = useWave(props)
return (
handler.current.stop()}>stop
)
}
```
## createWave 原生使用
```
createWave(canvas: HTMLCanvasElement, config: WaveConfig)
```
示例:
```js
const handler = createWave(document.querySelector('#canvas'), {
frequency: 1,
amplitude: 200,
})
```
## LICENSE
[MIT License](https://github.com/zhangyu1818/motion-wave/blob/main/LICENSE)