插补原因`节点不能转换为数字`

问题描述

重新动画（1.13）用于在React Native应用程序中切换手风琴。当手风琴打开或关闭时，向上或向下的箭头。 interpolate用于在上下箭头或虎钳诗句时进行动画处理。

import Animated,{ useValue,interpolate,Easing,useCode,State,greaterThan,lessthan } from "react-native-reanimated";
const animatedController = useValue(0); //<<==animated value between [0,1]
const arrowAngle = interpolate(animatedController,{  //<<==interpolate causes error of node cannot be cast to number
    inputRange: [0,0.5,1],outputRange: ['0rad',`${0.5*Math.PI}rad`,`${Math.PI}rad`],extrapolate: Extrapolate.CLAMP,});

return (
    <>
      <TouchableWithoutFeedback onPress={() => setopen(!open)}>
        <View style={styles.titleContainer}>
          <Text>{title}</Text>
          <Animated.View style={{ transform: [{ rotateZ: arrowAngle }] }}> //<<==arrowAngle call here
            <Icon name="chevron-down-outline" size={20}  />
          </Animated.View>
        </View>
      </TouchableWithoutFeedback>
    </>
)

但是，以上方法导致node cannot be cast to number的错误，如下所示。这个插值看起来很简单。怎么了？

解决方法

输出范围应该是这样的数字：

const arrowAngle = interpolate(animatedController,{
    inputRange: [0,0.5,1],outputRange: [0.01,1/2*Math.PI,Math.PI],//<<==shall be digital
    extrapolate: Extrapolate.CLAMP,});