animation - react 原生动画原生驱动程序是否支持颜色/背景颜色？

Question

我正在尝试为文本的颜色设置动画，如下所示:

const animateTest = scrollY.interpolate({
                                    inputRange: [0, 100],
                                    outputRange: ['rgba(255,0,0,1)', 'rgba(0,255,0,1)']                                    
                                });



      return (<View>      
    <Animated.Text style={{ position:'absolute',                                          
                              color: animateTest
                          }} >blah blah blah</Animated.Text>
    <Animated.ScrollView
              scrollEventThrottle={16}                
              onScroll={Animated.event(
                [
                    {
                        nativeEvent: {contentOffset: {y: scrollY}},
                    },
                ],
                {
                    useNativeDriver: true,
                }
            )}      
          >       

但我收到此错误:
Style property 'color' is not supported by native animated module
使用 ReactNative 0.44.0

根据 this blog post
它应该有效，因为他们说:

Not everything you can do with Animated is currently supported in Native Animated. The main limitation is that you can only animate non-layout properties, things like transform, opacity and backgroundColor will work but flexbox and position properties won't.

但我看到支持的代码中的样式有一个白名单: link to relevant code
有一个非常有限的白名单:

const STYLES_WHITELIST = {
  opacity: true,
  transform: true,
  /* legacy android transform properties */
  scaleX: true,
  scaleY: true,
  translateX: true,
  translateY: true,
};

不包括颜色/背景颜色

任何人都可以在这里帮助我-是否应该支持它？

Answer 1

错误来自尝试更改 color使用 native 驱动程序时(即 useNativeDriver: true )。
color和 backgroundColor native 驱动程序目前不支持 ( https://github.com/facebook/react-native/issues/14178 )。

如果您想继续使用 native 驱动程序，您可以尝试使用不透明度作为一种解决方法来更改文本的颜色，例如通过将具有不同颜色和不同起始不透明度的两个文本元素相互叠加。然后使用 onScroll事件更改每个元素的不透明度，以便在开始时可见的元素在结束时不可见(反之亦然):

    const redTextOpacity = scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    });
    const greenTextOpacity = scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    });

    return (
      <View>
          <Animated.Text style={{
            position: 'absolute',
            opacity: redTextOpacity,
            color: 'rgba(255,0,0,1)',
          }} >blah blah blah</Animated.Text>
          <Animated.Text style={{
            position: 'absolute',
            opacity: greenTextOpacity,
            color: 'rgba(0,255,0,1)',
          }} >blah blah blah</Animated.Text>

  ...

我今天遇到了同样的问题，不想设置 useNativeDriver: false出于性能原因。但是使用不透明度对我来说是一个不错的解决方法。希望这可以帮助!