Diffusion 水波纹组件
代码演示
基础样式
import { Diffusion } from 'tuya-panel-kit';// import Diffusion from 'tuya-panel-animation-diffusion';<Diffusion />
自定义子组件
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
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| color | 波纹颜色 | string | '#00FF00' |
| radius | 最内圈波纹半径 | number | cx(50) |
| maxRadius | 最外圈波纹大小 | number | cx(100) |
| width | 波纹宽度大小 | number | cx(5) |
| number | 波纹循环一次条数 | number | 2 |
| mainDelay | 波纹循环间隔时间 | number | 1000 |
| intervalTime | 间隔多久进行循环，为 0 代表持续循环 | number | 0 |
| startAnimated | 开始动画标志 | boolean | true |
| style | 容器样式 | StyleProp | null |
| children | 渲染自定义内容 | ReactNode | null |
| animationConfig | 动画配置项 | { 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 } |