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最内圈波纹半径numbercx(50)
maxRadius最外圈波纹大小numbercx(100)
width波纹宽度大小numbercx(5)
number波纹循环一次条数number2
mainDelay波纹循环间隔时间number1000
intervalTime间隔多久进行循环,为 0 代表持续循环number0
startAnimated开始动画标志booleantrue
style容器样式StylePropnull
children渲染自定义内容ReactNodenull
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 }
tuya02:55