React Native Reanimated颜色插值动画延迟无渐变问题

两个核心问题导致动画异常：

• interpolateColor 不支持直接使用transparent关键字做颜色插值。transparent在React Native里实际会被解析为rgba(0,0,0,0)，和目标色colors.primary50做插值时，会同时过渡RGB三个通道+alpha通道，相当于从纯黑透明过渡到目标色，不仅会出现中间色发灰的问题，还会因为颜色空间不匹配导致插值计算异常，出现跳变、无过渡效果。
• 动画驱动链路冗余+样式传递错误：用useState存储按压状态，每次手势触发都会先触发组件重渲染，再通过useEffect同步状态到共享值启动动画，整个链路跑在JS线程，很容易被其他JS任务阻塞出现延迟；另外把useAnimatedStyle返回的动画样式对象展开（...rStyle）后再合并到style数组，会破坏Reanimated对动画样式的响应式代理，导致UI线程无法同步更新动画帧，最终动画时长严重超出设置的1000ms，出现观察到的5秒才完成动画的现象。

1. 移除冗余的isPressed状态和对应的useEffect，直接在onPressIn、onPressOut回调里操作共享值启动动画，整个动画逻辑完全跑在UI线程，避免JS线程阻塞和不必要的重渲染。
2. 替换transparent为和目标色同色相的0透明度颜色，推荐直接用Reanimated内置的withAlpha工具方法生成，不需要手动转换色值。
3. 不要展开useAnimatedStyle生成的样式对象，直接放入style数组，保证Reanimated可以正常追踪样式更新。

修复后的完整代码：

import { withAlpha } from 'react-native-reanimated';

const TertiaryButton: FunctionComponent<Props> = ({ title, wide = false, style, ...rest }) => {
    const progress = useSharedValue(0);

    const rStyle = useAnimatedStyle(() => {
        const backgroundColor = interpolateColor(
            progress.value,
            [0, 1],
            // 起始色为primary50的0透明度版本，和目标色同色相，不会出现中间色异常
            [withAlpha(colors.primary50, 0), colors.primary50]
        );
        return { backgroundColor };
    });

    return (
        <Pressable
            onPressIn={() => {
                // 直接在回调里启动动画，无额外重渲染开销
                progress.value = withTiming(1, {
                    easing: Easing.out(Easing.cubic),
                    duration: 150, // 按钮按压反馈推荐100-200ms，响应更跟手，需要慢动画可自行调整
                });
            }}
            onPressOut={() => {
                progress.value = withTiming(0, {
                    easing: Easing.out(Easing.cubic),
                    duration: 150,
                });
            }}
            {...rest}
        >
            <Button
                wide={wide}
                // 直接传入动画样式，不要展开
                style={[style, rStyle]}
            >
                <ButtonText variant="h4">{title}</ButtonText>
            </Button>
        </Pressable>
    );
};

补充：如果colors.primary50是8位HEX格式（比如#RRGGBBAA），也可以直接把起始色写为对应6位HEX加00后缀的格式，效果和withAlpha一致。

内容的提问来源于stack exchange，提问作者Onyx