Javascript 如何制作动画线性渐变按钮？

我使用的是React Native，我们需要的组件之一是带有渐变背景的按钮。按下按钮时，颜色应从其基本值平滑地设置为活动值，完成后，颜色应平滑地返回其基本值。我使用一个TouchableHighlight组件来访问onShowUnderlay和onHideUnderlay函数来触发渐变变化

我成功地让它在状态改变时突然改变，但我很难让它顺利地设置动画。当我使用以下代码时，仿真器给了我以下错误：

NSNull类型的JSON值“”无法转换为UI颜色。您忘记在JS端调用processColor（）了吗？

，我认为这与LinearGradient无法将插值读取为RGBA值有关

我是否未正确使用动画API或LinearGradient？还是不可能这样做

import React, { PureComponent } from 'react';
import { Animated, View, TouchableHighlight, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import styles from './styles/FooterButton.styles';

const AnimatedGradient = Animated.createAnimatedComponent(LinearGradient);

export default class FooterGradientButton extends PureComponent {
    midColor = new Animated.Value(0);
    lastColor = new Animated.Value(0);

  showUnderlay = () => {
    this.midColor.setValue(0);
    this.lastColor.setValue(0);
    Animated.parallel([
      Animated.timing(this.midColor, {
        duration: 500,
        toValue: 1,
      }),
      Animated.timing(this.lastColor, {
        duration: 500,
        toValue: 1,
      }),
    ]).start();
  };

  hideUnderlay = () => {
    this.midColor.setValue(1);
    this.lastColor.setValue(1);
    Animated.parallel([
      Animated.timing(this.midColor, {
        duration: 500,
        toValue: 0,
      }),
      Animated.timing(this.lastColor, {
        duration: 500,
        toValue: 0,
      }),
    ]).start();
  };

  render() {
    const firstColor = 'rgba(52, 85, 219, 1)';
    const midColor = this.midColor.interpolate({
      inputRange: [0, 1],
      outputRange: ['rgba(19, 144, 255, 1)', 'rgba(52,85,219, 1)'],
    });
    const lastColor = this.lastColor.interpolate({
      inputRange: [0, 1],
      outputRange: ['rgba(2,194,211, 1)', 'rgba(30,144,255, 1)'],
    });

    return (
      <View style={[styles.margin, styles.shadow]}>
        <AnimatedGradient start={{ x: 0.0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }} colors={[firstColor, midColor, lastColor]}>
          <TouchableHighlight
            activeOpacity={1}
            underlayColor="#ffffff00"
            onShowUnderlay={() => this.showUnderlay()}
            onHideUnderlay={() => this.hideUnderlay()}
            style={[styles.gradientButton, styles.androidButton]}
            onPress={() => (!this.props.inactive ? this.props.onPress() : null)}
          >
            <Text style={[styles.buttonText, { color: 'white' }]}>NEXT</Text>
          </TouchableHighlight>
        </AnimatedGradient>
      </View>
    );
  }
}

import React，{PureComponent}来自'React'；
从“react native”导入{动画、视图、TouchableHighlight、文本}；
从“反应本机线性渐变”导入LinearGradient；
从“./styles/FooterButton.styles”导入样式；
const animatedgradent=Animated.createAnimatedComponent（LinearGradient）；
导出默认类FooterGradientButton扩展PureComponent{
midColor=新的动画值（0）；
lastColor=新动画。值（0）；
显示参考底图=（）=>{
此.midColor.setValue（0）；
this.lastColor.setValue（0）；
平行动画([
动画。计时（此为中间色{
持续时间：500，
toValue:1，
}),
动画。计时（this.lastColor{
持续时间：500，
toValue:1，
}),
]).start（）；
};
hideUnderlay=（）=>{
此.midColor.setValue（1）；
this.lastColor.setValue（1）；
平行动画([
动画。计时（此为中间色{
持续时间：500，
toValue:0，
}),
动画。计时（this.lastColor{
持续时间：500，
toValue:0，
}),
]).start（）；
};
render（）{
const firstColor='rgba（52,85,219,1）'；
const midColor=this.midColor.interpolate({
输入范围：[0，1]，
输出范围：['rgba（19144255,1）''rgba（52,85219,1）'，
});
const lastColor=this.lastColor.interpolate({
输入范围：[0，1]，
输出范围：['rgba（2194211，1）''rgba（30144255，1）'，
});
返回(
this.showUnderlay（）}
onHideUnderlay={（）=>this.hideUnderlay（）}
style={[styles.gradientButton，styles.androidButton]}
onPress={（）=>（！this.props.inactive？this.props.onPress（）：null）}
>
下一个
);
}
}

看一看。您应该能够通过线性渐变并设置其动画