React Native 产生多个 Animated.View 有时间延迟

Question

I have a Wave component that unmounts as soon as it goes out of bounds.

This is my result so far: https://streamable.com/hmjo6k

I would like to have multiple Waves spawn every 300ms, I've tried implementing this using setInterval inside useEffect , but nothing behaves like expected and app crashes

const Wave = ({ initialDiameter, onOutOfBounds }) => {
    const scaleFactor = useRef(new Animated.Value(1)).current,
          opacity = useRef(new Animated.Value(1)).current
    
    useEffect(() => {
        Animated.parallel(
            [
                Animated.timing(scaleFactor, {
                    toValue: 8,
                    duration: DURATION,
                    useNativeDriver: true
                }),
                Animated.timing(opacity, {
                    toValue: 0.3,
                    duration: DURATION,
                    useNativeDriver: true
                })
            ]
        ).start(onOutOfBounds)
    })

    return (
        <Animated.View
            style={
                {
                    opacity,
                    backgroundColor: 'white',
                    width: initialDiameter,
                    height: initialDiameter,
                    borderRadius: initialDiameter/2,
                    transform: [{scale: scaleFactor}]
                }
            }
        />
    )
}

export default Wave

const INITIAL_WAVES_STATE = [
    { active: true },
]

const Waves = () => {
    const [waves, setWaves] = useState(INITIAL_WAVES_STATE),
          /* When out of bounds, a Wave will set itself to inactive 
             and a new one is registered in the state. 

           Instead, I'd like to spawn a new Wave every 500ms */

          onWaveOutOfBounds = index => () => {
              let newState = waves.slice()
              newState[index].active = false
              newState.push({ active: true })
              setWaves(newState)
          }

    return (
        <View style={style}>
            {
                waves.map(({ active }, index) => {
                    if (active) return (
                        <Wave 
                            key={index} 
                            initialDiameter={BUTTON_DIAMETER} 
                            onOutOfBounds={onWaveOutOfBounds(index)}
                        />
                    )
                    else return null
                })
            }
        </View>
    )
}

export default Waves

Answer 1

I think the useEffect cause the app crashed. Try to add dependencies for the useEffect

useEffect(() => {
        Animated.parallel(
            [
                Animated.timing(scaleFactor, {
                    toValue: 8,
                    duration: DURATION,
                    useNativeDriver: true
                }),
                Animated.timing(opacity, {
                    toValue: 0.3,
                    duration: DURATION,
                    useNativeDriver: true
                })
            ]
        ).start(onOutOfBounds)
    }, [])