在reanimated中使用withSpring时设置持续时间和延迟

Question

我对重新动画非常陌生，并且它在一定程度上起作用，但我似乎无法添加动画的持续时间。我还想添加一个延迟，但这并不像持续时间那么重要。我正在尝试更改不透明度及其 Y 位置。我可以更改不透明度的持续时间，但不能更改 Y 位置。我尝试过调整阻尼、刚度等设置，但这不会改变实际的持续时间。

是我使用方法错误吗？

我目前正在尝试这个：

  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 }),
    };
  }); 

我正在这样改变偏移量：

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

   
  }
}, [show]);

我尝试过这样添加 withTiming 但基本上是一样的。任何建议将不胜感激。

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 }),
    };
  }); 

我想要制作动画的元素是这个，其中只有 3 个图像。

<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>

Answer 1

我已经成功实现了这一目标，但我不确定这是唯一也是最好的方法。我添加了一个添加到计时动画的配置，该配置添加了一个控制计时的功能。我还设法在动画开始之前添加延迟。我添加了这个，以防有人开始复活并遇到同样的问题。

代码：

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>

可通过设置移动动画对象

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

在动画之前添加延迟：

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