Set reanimated values back to original after click

Question

I have made a bit of re-usable animation code. It works great but I an unsure if it is possible to get the animations back to their original values after a button is pressed easily.

The only way I can think of it to use useShared Values to store all the before and after values and set them as required but this would involve alot of values but because the animations have already ran, there must be a way to just take them back to their original start?

The code I am using for the animations is : -

EntryAnimation.js

import React, { useEffect } from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  useDerivedValue,
  interpolate,
  withDelay,
  withTiming,
  withSpring,  
  Easing,
} from 'react-native-reanimated';

export const EntryAnimation = ({
  children,
  index,  
  rotateV, 
  scaleV,
  offsetXV, 
  offsetYX,
}) => { 
  const play = useSharedValue(play);
  const progress = useDerivedValue(() => {
    return play.value 
      ? withDelay(50 * (index ?? 0), withSpring(1, { duration: 350 }))  
      : 0; 
  });
  
  useEffect(() => { 
    play.value = play;
  }, []);

  const animatedStyle = useAnimatedStyle(() => {
    // const opacity = interpolate(progress.value, [0, 1], [0, 1]);
    const translateY = interpolate(progress.value, [0, 1], [0, offsetYX]);
    const translateX = interpolate(progress.value, [0, 1], [0, offsetXV]);
    const rotate = interpolate(progress.value, [0, 1], [0, rotateV]);
    const scale = interpolate(progress.value, [0, 1], [1, scaleV]);

    return {
      transform: [{ translateY }, { translateX }, { rotate }, { scale }],
    };
  });

  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
};

And to use on an element in my main code, I use :-

 <EntryAnimation
                  index={1}
                  rotateV={0}
                  scaleV={0.8}
                  offsetXV={0}
                  offsetYX={-270}>
                  <Animated.Image
                    source={{ uri: item.poster }}
                    style={[styles.posterImage, { zIndex: 6 }]}
                  />
                </EntryAnimation>

I have tried using the code below but because its in a ternary statement I am getting errors?

{animStarted ? (
      <EntryAnimation
                      index={1}
                      rotateV={0}
                      scaleV={0.8}
                      offsetXV={0}
                      offsetYX={-270}
                      >
      ) : (
        <EntryAnimation
                      index={1}
                      rotateV={0}
                      scaleV={1}
                      offsetXV={0}
                      offsetYX={0}
                      >
      )}

Any ideas?

score 0 · Answer 1 · answered Jul 20 '23 at 21:21

You can simply handle this behavior using withSequence, in this way you can be able to reset the styles.

Considering your code it could be something like this:

    const translateX = useDerivedValue(() =>  {
      return withSequence(
       withTiming(-offsetXV, { duration: 350 }), // here the animation will start translating the view negatively
       withRepeat(withTiming(offsetXV, { duration: 350 }), 4, true), // here translateX will be reset to offsetXV and then it will be back to -offsetXV 4 times
       withTiming(0 ,{duration: 0 }) // and this is the function that will reset translateX to 0
     );
    });

Basically, this function will work as following: considering offsetXV value is 50

first sequence withTiming(-offsetXV, { duration: 350 }) translateX will be -50 after 350ms

second sequence withRepeat(withTiming(offsetXV, { duration: 350 }), 4, true) translateX will increment from -50 to 50 and then it will decrement to -50 four times

last sequence withTiming(0 ,{duration: 0 }) this reset translateX to 0

And this can be applied to any other style

Set reanimated values back to original after click

1 Answers1