Wave

Code demo

Basic wave pattern

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

Custom wave styles

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

NameDescriptionTypeDefault
HWater wave height (percentage)number50
waveParamsWave array: [{ A: height of crest, T: length of single group of crest + trough, fill: fill color }]{ A: number; T: number; fill: string; }[][]
styleContainer style @types StylePropStyleProp{ justifyContent: 'center', alignItems: 'center' }
animatedWhether to exercise immediately after mountingbooleantrue
animationConfigAnimation configuration items{ 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