Invariant Violation：Invariant Violation: Transform with key of "rotateY" must be a string: {"rotateY":6}

Question

我在 react-native expo 项目上使用了动画。

我打算在道具改变时旋转并改变我的组件（视图）的不透明度。

但是我无法重现这个动画。

即使我删除了旋转动画，它也不适用于不透明动画。

这是我的错误屏幕。

这是我的一些代码。


...
let rotateValue = new Animated.Value(0);
  let fadeValue = new Animated.Value(1);
const animationStart=()=>{
    return Animated.parallel([
      Animated.timing(rotateValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true
      }),
      Animated.timing(fadeValue, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: true
      })
    ]).start();
  };

  React.useEffect(()=> {
    animationStart();
  }, [spinInfoData]);

   .....

<Animated.View style={{
        transform: [
          {
            rotateY: rotateValue.interpolate({
              inputRange: [0, 1],
              outputRange: [6, 0]
            })
          }
        ],
        opacity: fadeValue,
        display: "flex",
        justifyContent: "center",
        height: hp(spinSize),
        flexDirection: "row",
        marginTop: hp(spinSize / -6)
      }}>

     .......

Answer 1

你可以这样修复红屏的bug

transform: [
   {
      rotateY: rotateValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['180deg', '0deg']
      })
    }
 ],

并且请更改您的代码，以便在像这样更改道具时重置动画。

const rotateValue = new useRef(new Animated.Value(0)).current;
const saveRotateValue = rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['180deg', '0deg']
  });

....
// change the props
React.useEffect(()=> {
    fadeValue.setValue(1); // reset the fade animation
    rotateValue.setValue(0); // reset the rotate animation
    Animated.parallel([
      Animated.timing(rotateValue, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true
      }),
      Animated.timing(fadeValue, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: true
      })
    ]).start();
  }, [spinInfoData]);

    .......

<Animated.View style={{
   transform: [
     {
        rotateY: saveRotateValue
     }
    ],
   opacity: saveOpacity,

   ......

Invariant Violation：Invariant Violation: Transform with key of "rotateY" must be a string: {"rotateY":6}

Invariant Violation: Invariant Violation: Transform with key of "rotateY" must be a string: {"rotateY":6}

hook

animation

react-native

expo