React Native动画 - 在缩放时translateX和translateY

Question

我Animated.View有以下风格:

    {
        transform: [
            {
                scale: this.animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [initialScale, 1]
            })},
            {
                translateX: this.animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [startX, endX]
            })},
            {
                translateY: this.animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [startY, endY]
            })},
        ]
    }

当initialScale为1并且动画开始时,我看到预期的行为:Animated.View从(startX,startY)开始并线性移动到(endX,endY).
但是,例如,当initialScale为0.5时,视图的起点不是(startX,startY),移动不是线性的(有点球形),终点仍然是预期的 - (endX,endY).

如何在保持线性运动和预期起始位置的同时缩放我的视图？

Answer 1

就像评论中指出的@ArneHugo用户一样,非线性运动可以通过定位全尺寸容器元素并在其中缩放另一个元素来解决.

元素的位置不符合预期,因为缩放变换的原点是元素的中心点.React Native不支持指定变换原点,但如果预先知道了缩放元素的宽度和高度,则可以很容易地计算偏移量,如下所示:

const width = 100;
const height = 20;
const scale = {
  transform: [
    {
      scale: this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [initialScale, 1]
      })
    }
  ]
};

const position= {
  transform: [
    {
      translateX: this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [startX - (width / 2) - (width * initialScale / 2), endX]
      })
    },
    {
      translateY: this.animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [startY - (height / 2) - (height * initialScale / 2), endY]
      })
    }
  ]
};

return (
  <Animated.View style={position}>
    <Animated.View style={[styles.thing, scale]} />
  </Animated.View>
);