反应本地动画-调整方向

Question

我想创建一条在X轴（中间）处从0开始的线，并且可以向右增加大小（正值）或向左增加大小（负值），以较大者为准。线条颜色也会根据其是负值还是正值而改变。

我不确定如何使用React Native导航来做到这一点。我可以调整线条的大小，但它会在两侧均匀增加。我希望它从中间点向一个方向前进。

这是我开始的简单代码：

  const [animation, setAnimation] = useState(new Animated.Value(0));

  useEffect(()=> {
    animateTo(200);
  },[])

  const animationStyles = {
    width: animation
  };

  const animateTo = (value) => {
    Animated.spring(animation, {
      toValue: value,
      speed: 6
      }).start();
  }

  return (
     <Animated.View style={[getStyle('object', theme), animationStyles]}>
     </Animated.View>
  )