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

Answer 2

我已经通过使用比例因子进行定位解决了这个问题：

imageScale = new Animated.Value(1);
imageX = new Animated.Value(0);
imageX = new Animated.Value(0);
...
<Animated.Image source={item} style={[styles.image, {
    transform:[
        {scale: this.imageScale},
        {translateX: Animated.divide(this.imageX,this.imageScale)},
        {translateY: Animated.divide(this.imageY,this.imageScale)},
    ]
}]}/>

如果使用插值，这看起来有点复杂，但是想法仍然相同：

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

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

2 个答案: