Как в React Native создавать множественные, одновременные и идентичные анимации? - PullRequest
Новая
       72

Как в React Native создавать множественные, одновременные и идентичные анимации?

0 голосов
/ 19 июня 2020

Что сейчас происходит

  • Есть изображение пистолета. Вы щелкаете пистолетом, запускается анимация одиночной пулей.
  • Вы щелкаете пистолетом еще раз. Исходная анимация пули исчезает, и из пистолета вылетает новая пуля. видно анимацию нескольких пуль. Исходная пуля go не улетает, пока не завершится анимация.

Возможно ли это с React Native? Можете ли вы указать мне правильное направление?

Вот фрагмент кода анимации, если это поможет ... 

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

1 Ответ

1 голос
/ 19 июня 2020

Вам необходимо создавать, визуализировать и запускать новый компонент HappyAnimation каждый раз, когда пушка стреляет. Рассмотрите возможность использования некоторой задержки для удаления компонента после завершения анимации.

...