CODEWITHSUNDEEP
react-nativeanimationexporeact-animated
Gugel
Gugel

Reputation: 21

How Do You Create Multiple, Simultaneous and Identical Animations in React Native?

What Currently Happens

What I Want to Happen

Is this possible with React Native? Can you point me in the right direction?

Here's the snippet of the animation code if it helps...

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

Upvotes: 0

Views: 497

Answers (1)

Nathanael
Nathanael

Reputation: 1002

You need to instantiate, render, and trigger a new HappyAnimation component each time the gun fires. Consider using some type of delay to delete the component after the animation finishes.

Upvotes: 1

Related Questions