不透明度褪色动画不适用于 react-native-reanimated 2

Question

我正在使用 react-native-reanimated(v2.2.0) 为 bottom-sheet 设置动画，我还需要使用动画更改 bottom-sheet 内一个视图的不透明度。

预期行为。

底部出现时，视图的不透明度会有所不同-sheet。所以视图的不透明度在 bottom-sheet 关闭时应该是 1，当 bottom-sheet 打开时不透明度应该是 0。

问题

我正在使用 interpolate 获取 0 和 1 之间相对于底部 - sheet 顶部位置的不透明度值，并使用 useAnimatedStyle 来为不透明度设置动画。

  const derived = useDerivedValue(() => {
    const opacity = interpolate(
      top.value,
      {
        inputRange: [top.value, 0],
        outputRange: [0, 1],
      },
      [top.value],
    );

    return opacity.value;
  });

  const style = useAnimatedStyle(() => {
    return {
      opacity: derived.value,
    };
  });

然后我在 Animated.View

上使用上述样式

<PanGestureHandler onGestureEvent={gestureHandler}>
  <Animated.View style={[BottomSheetStyles, bottomSheetAnimatedStyles]}>
    <Animated.View                       //view i need to change opacity
      style={[MinPlayerStyles, style]}
      onPress={() => (top.value = withSpring(0, SPRING_CONFIG))}>
      <Text>Card</Text>
    </Animated.View>
  </Animated.View>
</PanGestureHandler>

Answer 1

我只用useAnimatedStyle和interpolate就解决了这个问题。

根据 bottom-sheet top 值计算不透明度并赋予它 0 和 1 之间的范围并返回不透明度样式。

  const minPlayerAnimatedStyles = useAnimatedStyle(() => {
    const opacity = interpolate(
      top.value,
      [0, top.value],
      [0, 1],
    );

    return {
      opacity,
    };
  });

现在不透明度在打开底部-sheet 和关闭底部-sheet 时发生变化，但不透明度值不会像淡入淡出效果那样动画化。我想要的是淡化不透明度。

当前不透明度设置为 1 一旦 bottom-sheet 开始。我期望的是淡化不透明度。

不透明度褪色动画不适用于 react-native-reanimated 2

Opacity fading animation not working with react-native-reanimated 2

react-native

react-native-reanimated-v2