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

NameDescriptionTypeDefault
colorCorrugated colorstring'#00FF00'
radiusInnermost circle circle radiusnumbercx(50)
maxRadiusOutermost circle ripple sizenumbercx(100)
widthRipple widthnumbercx(5)
numberNumber of ripple cycles at a timenumber2
mainDelayTime between ripple cyclesnumber1000
intervalTimeHow often do you cycle? A value of 0 is continuousnumber0
startAnimatedStart animation flagbooleantrue
childrenThe container styleReactNodenull
animationConfigAnimation 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 }
tuya02:55