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	水波高度（百分比）	number	`50`
waveParams	水波数组: [{ A: 波峰高度, T: 单组波峰+波谷长度, fill: 填充色 }]	{ A: number; T: number; fill: string; }[]	`[]`
style	内容样式 @types StyleProp	StyleProp	`{ justifyContent: 'center', alignItems: 'center' }`
animated	是否挂载后立刻运动	boolean	`true`
animationConfig	动画配置项	{ easing?: (...args: any[]) => any; duration?: number; delay?: number; isInteraction?: boolean; useNativeDriver?: boolean; }	`{ easing: Easing.linear, duration: 5000, delay: 2000, isInteraction: true, useNativeDriver: true }`

Tuya Design

Wave 波浪组件

代码演示

波浪基本样式

自定义波浪样式

API

Wave