animation - 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 时， View 的起点不是 (startX, startY)，运动不是线性的(有点球形)，终点仍然是预期的 - (endX, endY)。

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

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>
);