React Native Reanimated parallel

Viewed 2074

Is there anyway to simulate the react native Animated parallel? I want to run multiple animations for a specific component at the same time

3 Answers

Use the block instead of parallel:

    Animated.block([
        Animated.timing(keyboardHeight.current, {
            duration: event.duration + 100,
            toValue: event.endCoordinates.height + 10,
            easing: Easing.inOut(Easing.ease)
        }).start(),
        Animated.timing(buttonOpacity.current, {
            duration: event.duration + 100,
            toValue: 1,
            easing: Easing.inOut(Easing.ease)
        }).start()
    ])

You can run run animations in parallel using https://reactnative.dev/docs/animated#parallel and you can use interpolation https://reactnative.dev/docs/animations#interpolation.

With interpolation you can map values from one animation to another. It is useful if you want some animations to respond to the values of other animations. With interpolation you can create multiple animated views in you component (A and B):

Like when showing an element from the button of the screen, animationA, you want another element to move away, animationB.

To make this happen you create an animation from animationA, that becomes animationB

const animationB = animationA.interploate({
  inputRange: [ 0, 150],
  outputRange: [150, 0]
});

animationB, now does the opposite of animationA.

Yes, you can. First create your object using animated.timing or animated.spring. Create many of them. Animated.spring is good for bounce and real world effect. You also need to friction and tension property. Then call the objects using Animated.parallel.

 const rotateAnim=   Animated.timing(this.state.rotate,{
        toValue:1,
        duration:2000,
        useNativeDriver:true,
    })
    const borderAnim=   Animated.timing(this.state.border,{
        toValue:50,
        duration:2000,
        useNativeDriver:true,
    })
    Animated.parallel([
        fallAnim,
        rotateAnim,
        borderAnim,
    ]).start();
}

Go to the complete tutorial https://www.dbestech.com/tutorials/build-advanced-animations-in-react-native-with-the-native-animated-api-spring-and-timing

Related