如何在 React Native 中创建多个、同时且相同的动画？

Question

目前正在发生的事情

• 有一张枪的图像。你点击枪，动画会用一颗子弹发射。
• 你再次点击枪。原来的子弹动画消失了，新的子弹从枪里出来了。

我想要发生的事情

• 您多次点击枪，看到多发子弹动画。在动画完成之前，原始子弹不会消失。

React Native 可以做到这一点吗？你能指出我正确的方向吗？

如果有帮助，这里是动画代码的 sn-p...

import React from 'react';
import { View, Animated, Easing, Dimensions, Image } from 'react-native'

let animatedValue = new Animated.Value(0)    

export let animateHappy = () => {
    console.log('animate happy run')
    animatedValue.setValue(0)
    Animated.timing(
        animatedValue,
        {
        toValue: 1,
        duration: 800,
        useNativeDriver: true,
        easing: Easing.linear
        }
    )
    .start()
}

export function HappyAnimation() {

    let windowWidth = Dimensions.get('window').width
    let windowHeight = (Dimensions.get('window').height)

    const movingMargin = animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0, (windowHeight/2.4)]
    })

    const movingXHappy = animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [0, -90]
    })

return (
    <Animated.Image
    source={require('./assets/happy.png')} 
        style={{
        transform: [
        {translateY: (movingMargin)},
        {translateX: (movingXHappy)}
        ],
        zIndex: 0,
        marginLeft: 144,
        marginTop: (windowHeight*.35),
        height: 14,
        width: 14,}} 
    />
)
}

export default HappyAnimation

Answer 1

每次开枪时，您都需要实例化、渲染和触发一个新的 HappyAnimation 组件。考虑在动画结束后使用某种延迟来删除组件。