位置为绝对时，AnimatedView会旋转变换

Question

我在react本机组件中有两个动画视图。我想用旋转变换旋转第二个。旋转有效，但我不希望我的视图在中间相互交叉。 我希望他们从左边的同一个起点开始......就像一个时钟。

知道如何以一种优雅的方式做到这一点（每次都没有硬编码）？

我使用绝对定位因为我希望它们从同一个地方开始。如果您有任何其他创意替代品，请告诉我。 即使我为宽度设置动画，也需要保持原点...

由于

<Animated.View style={{
    backgroundColor: 'red',
    width: 120,
    height: 26,
    borderRadius: 13,
    position: 'absolute'
}} />
<Animated.View style={{
    backgroundColor: 'blue',
    width: 120 // an increasing animated value for the width here in the real app
    height: 26,
    borderRadius: 13,
    position: 'absolute',
    transform: [{
    rotate: '160deg'
    }]
}} />

到目前为止看起来像这样：