Diffusion
Code demo
Basic style
import { Diffusion } from 'tuya-panel-kit';// import Diffusion from 'tuya-panel-animation-diffusion';<Diffusion />
Customize child components
import { View } from 'react-native'import { Diffusion } from 'tuya-panel-kit';// import Diffusion from 'tuya-panel-animation-diffusion';<Diffusion color="#0ff" number={3}><View style={{ width: 80, height: 80, borderRadius: 40, backgroundColor: '#0ff' }} /></Diffusion>
API
Diffusion
| Name | Description | Type | Default |
|---|---|---|---|
| color | Corrugated color | string | '#00FF00' |
| radius | Innermost circle circle radius | number | cx(50) |
| maxRadius | Outermost circle ripple size | number | cx(100) |
| width | Ripple width | number | cx(5) |
| number | Number of ripple cycles at a time | number | 2 |
| mainDelay | Time between ripple cycles | number | 1000 |
| intervalTime | How often do you cycle? A value of 0 is continuous | number | 0 |
| startAnimated | Start animation flag | boolean | true |
| children | The container style | ReactNode | null |
| animationConfig | Animation configuration | { easing?: (...args: any[]) => any; duration?: number; delay?: number; isInteraction?: boolean; useNativeDriver?: boolean; } | { easing: Easing.bezier(0, 0, 0.25, 1), duration: 2000, delay: 0, isInteraction: true, useNativeDriver: false } |