我的React Native Reanimated color interpolation animation有什么问题

Question

我正在尝试做一些非常简单的事情-让我的按钮在不按下时透明，并在用户按下它时逐渐将其背景颜色更改为不同的颜色。为了实现这一点，我使用了React Native Reanimated。不幸的是，我的动画出了问题，我不确定是什么。问题是:

当按钮被按下时将isPressed更改为true，当用户将手指从按钮移开时将其更改为false。然后我使用那个isPressed布尔值来改变进度，最后使用那个进度来将颜色从透明插入到我的其他颜色。遗憾的是发生了这样的事情:

我按下按钮，而不是按钮几乎立即改变它的背景颜色，它需要大约5秒才能变成color.primary50。然后，如果我松开按钮，它又需要5秒左右的时间才能变回透明。我也没有看到颜色的渐变，它只是瞬间变化。

const TertiaryButton: FunctionComponent<Props> = ({ title, wide = false, style, ...rest }) => {
const [isPressed, setIsPressed] = useState(false);
const progress = useSharedValue(0);
useEffect(() => {
progress.value = withTiming(isPressed ? 1 : 0, { easing: Easing.out(Easing.cubic), duration: 1000 });
}, [isPressed, progress]);
const rStyle = useAnimatedStyle(() => {
const backgroundColor = interpolateColor(progress.value, [0, 1], ['transparent', colors.primary50]);
return { backgroundColor };
});
return (
<Pressable onPressIn={() => setIsPressed(true)} onPressOut={() => setIsPressed(false)} {...rest}>
<Button
wide={wide}
style={[
style,
{
...rStyle,
},
]}
>
<ButtonText variant="h4">{title}</ButtonText>
</Button>
</Pressable>
);
};

Answer 1

尝试立即更改onPressIn和onPressOut中的进度值

onPressOut={() => {
console.log("onPressOut")
isPressed.value = withTiming(0)
}}
onPressIn={() => {
console.log("onPressIn")
isPressed.value = withTiming(1)
}}

Answer 2

不工作的可能原因是Button组件可能不是一个动画组件。您需要确保Button是一个动画组件。如果它是一个自定义/库组件，你可以用Animated.createAnimatedComponent(...)包装它，使它成为一个动画组件:

const AnimatedButton = Animated.createAnimatedComponent(Button);