1

我正在使用底片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>
4

1 回答 1

2

我只使用useAnimatedStyleand来解决这个问题interpolate。

根据底页顶部值计算不透明度，并为其提供介于0和之间的范围1并返回不透明度样式。

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

    return {
      opacity,
    };
  });

Now opacity changing on open bottom-sheet and close bottom-sheet but the opacity value not animating like a fading effect. What i want is to fade the opacity.

Currently opacity sets to 1 as soon as the bottom-sheet starts. What i expected is to fade opacity.

于 2021-07-30T04:40:25.840 回答