My 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]
            })},
        ]
    }

When initialScale is 1 and the animation starts, I see the expected behavior: Animated.View starts at (startX, startY) and linearly moves to (endX, endY).
However, when initialScale is 0.5 for example, the starting point of the view is not (startX, startY), the movement is not linear (a bit spheric) and the end point is still as expected - (endX, endY).

如何在保持直线运动和预期起始位置的同时zoom 视图?

推荐答案

正如用户@ArneHugo在 comments 中指出的,非线性移动可以通过定位全尺寸容器元素并zoom 其中的另一个元素来解决.

元素的位置与预期不同,因为zoom 变换的原点是元素的中心点.React Native(目前)不支持指定变换原点,但如果事先知道zoom 元素的宽度和高度,则可以按如下方式轻松计算偏移:

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

React-native相关问答推荐

添加REACT-Native-SVG时出现错误-失败:构建失败并出现异常

ios 中节列表中的scrollToLocation 不起作用.在 Android 上,列表滚动回索引 0,但在 ios 上不会发生同样的情况

如何防止 VS Code 从react-native-web自动导入?

如何获取 React Native 应用程序的崩溃日志(log)?

Visual Studio 代码错误:-Failed to start flow Error: Wrong version of Flow. The config specifies version ^0.92.0 but this is version 0.95.1

在 CircleCI 上 ReactNative 0.59.x build fails on CircleCI with exit value 137

在 react-native 元素中更改 android 和 ios 的入口文件路径

React Navigation - 标题的渐变 colored颜色

在本react-native中具有异步和等待的箭头函数

你如何从 React Native 的 EventEmitter 实例中移除一个监听器?

react native如何访问文件系统?

React native expection java.lang.UnsatisfiedLinkError: dlopen failed: "/data/data/{package}/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit

有react-native复选框的例子吗?

运行时尚未准备好进行调试

React Navigation 中的选项卡导航器图标

我们可以在 react webapp 和 react native 应用程序之间共享代码吗,并且可以在 react-native 生产环境中使用

如何在 React Native 中等待 Alert 对话框的响应?

使用 React Native 运行多个 iOS 模拟器?

使用expo react-native链接?

React-Native 获取 XML 数据