Set duration and delay when using withSpring in reanimated

Question

I am very new to reanimated and have it working to a certain extent but I can not seem to add the duration of the animation. I would also like to add a delay but that is not as important as the duration. I am trying to change the opacity and its Y position. I can change the duration of the opacity but not the Y position. I have tried messing with the settings like damping, stiffness etc but that does not change the actual duration.

Am I using it in the wrong way?

I am currently trying this :

  const offset = useSharedValue(400);
  const imgOpacity= useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return { 
      transform: [
        {
          translateY: withSpring(offset.value, { mass: 0.1, damping: 100, stiffness: 100 }), 
        },   
      ],
      opacity: withTiming(imgOpacity.value, { duration: 1000 }),
    };
  });

I am changing the offset like this :

React.useEffect(() => {
  if (show) {
    offset.value = withSpring(10);
    imgOpacity.value =1; 
  } else {
    // alert("No Show")

   
  }
}, [show]);

I have tried this to add withTiming but it is basically the same. Any advice would be appreciated.

const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
        translateY : withTiming(offset.value, {
        duration: 1,
        easing: Easing.bezier(0.25, 0.1, 0.25, 1),
      }),
        }, 
      ],
      opacity: withTiming(imgOpacity.value, { duration: 1000 }),
    };
  });

The element I am trying to animate is this, is only has 3 images in it.

<Animated.View style={[animatedStyle]}>
        <Image style={styles.BImage} source={{ uri: imgb }} />

        <Image style={styles.AImage} source={{ uri: imga }} />

        <Image style={styles.CImage} source={{ uri: imgc }} />
</Animated.View>

JulesUK · Answer 1 · 2023-01-28T13:35:44.767

I have managed to achieve this but I am not sure this is the only and best way to do it. I added a config that is added to the Timing animation that adds a away to control the timing. I have also managed to add a delay before animation starts. I have added this in case anyone is starting out with reanimated and is having the same issue.

The code :

const offset = useSharedValue(90);  // The offset is the Y value

 const config = {  // To control the lengh of the animation
    duration: 500,
    easing: Easing.bounce,
  };


  const animatedImg = useAnimatedStyle(() => {  // The actual animation
    return {
      transform: [{ translateY: withTiming(offset.value, config) }],
    };
  });

<Animated.View style={[animatedImg2]}>  // Object to animate
        <Image 
          style={[styles.BImage]}
          source={{
            uri: 'https://image.tmdb.org/t/p/w440_and_h660_face/t6HIqrRAclMCA60NsSmeqe9RmNV.jpg',
          }}
        />
      </Animated.View>

The animated object can be moved by settting

offset.value = 200  // Method to change the Y value

Too add a delay before animation :

transform: [{ translateY: withDelay(1000, withTiming(offset.value, config)) }],

Set duration and delay when using withSpring in reanimated

1 Answers1