不透明褪色动画不与反应-本机-恢复2

Question

我是使用react-native-reanimated(v2.2.0)动画的底部工作表，我还需要改变一个视图的不透明度在底部工作表与动画。

预期行为.

当底片出现时，视图的不透明度就会减弱。因此，当底片打开时，视图的不透明度应该是1，而不透明度应该是0。

问题

我使用interpolate来获得相对于底片顶部位置的0和1之间的不透明度值，并使用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来解决这个问题。

根据底片的顶部值计算不透明度，并给出0和1之间的范围以及返回不透明度的样式。

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

    return {
      opacity,
    };
  });

现在，不透明度在打开的底片和关闭的底片上发生变化，但不透明度值不像褪色效果。我想要的是消除不透明。

目前，不透明设置为1的底部页一开始。我所期望的是消失的不透明。