Wave 波浪组件

代码演示

波浪基本样式

import { Wave } from 'tuya-panel-kit';
// import Wave from 'tuya-panel-animation-wave';
<Wave />

自定义波浪样式

import { Wave } from 'tuya-panel-kit';
// import Wave from 'tuya-panel-animation-wave';
<Wave
style={{ width: 120, height: 120, borderRadius: 60 }}
H={60}
waveParams={[
{ A: 30, T: 120, fill: '#333' },
{ A: 20, T: 100, fill: '#666' },
]}
animated={true}
/>

API

Wave

属性名描述类型默认值
H水波高度(百分比)number50
waveParams水波数组: [{ A: 波峰高度, T: 单组波峰+波谷长度, fill: 填充色 }]{ A: number; T: number; fill: string; }[][]
style内容样式 @types StylePropStyleProp{ justifyContent: 'center', alignItems: 'center' }
animated是否挂载后立刻运动booleantrue
animationConfig动画配置项{ easing?: (...args: any[]) => any; duration?: number; delay?: number; isInteraction?: boolean; useNativeDriver?: boolean; }{ easing: Easing.linear, duration: 5000, delay: 2000, isInteraction: true, useNativeDriver: true }
tuya02:55