不透明度消退动画与react-native-reanimated不工作

Question

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

预期行为。

当bottom-sheet出现时，视图的不透明度会改变。因此，当bottom-sheet关闭时，视图的不透明度应为1，当bottom-sheet打开时，视图的不透明度应为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，只要底部表单开始。我所期望的是淡化不透明度。