跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽，抢先掌握 React Native 新架构精髓 立即查看 >Version: Next

Animated.ValueXY

2D 值用于驱动 2D 动画，例如平移手势。与普通的Animated.Value几乎相同的 API，但是可以多路复用。在内部包含两个常规的Animated.Value。

示例​

文档

方法​

setValue()​

setValue(value: {x: number; y: number});

直接设置值。这将停止任何正在运行的动画，并更新所有绑定的属性。

参数:

名称类型必需描述
value{x: number; y: number}是值

setOffset()​

setOffset(offset: {x: number; y: number});

设置一个偏移量，该偏移量会在已经设置的任何值（无论是通过setValue、动画还是Animated.event）之上应用。对于补偿诸如平移手势的起始位置等情况非常有用。

参数:

名称类型必填描述
offset{x: number; y: number}是偏移值

flattenOffset()​

flattenOffset();

将偏移值合并到基础值中，并将偏移重置为零。最终输出的数值保持不变。

extractOffset()​

extractOffset();

将偏移值设置为基准值，并将基准值重置为零。最终输出的数值保持不变。

addListener()​

addListener(callback: (value: {x: number; y: number}) => void);

向值添加一个异步监听器，以便您可以观察动画的更新。这很有用，因为没有办法同步读取该值，因为它可能是由原生驱动的。

返回一个字符串作为监听器的标识符。

参数:

名称类型必需描述
callback函数是回调函数将

removeListener()​

removeListener(id: string);

取消注册监听器。id 参数应与先前由 addListener() 返回的标识符匹配。

参数:

名称类型必需描述
idstring是要移除的监听器的标识符。

removeAllListeners()​

removeAllListeners();

移除所有已注册的监听器。

stopAnimation()​

stopAnimation(callback?: (value: {x: number; y: number}) => void);

停止任何正在运行的动画或跟踪。在停止动画后，将使用callback调用最终值，这对于更新状态以匹配布局中的动画位置非常有用。

参数:

名称类型是否必需描述
callback函数否将接收到最终值的函数。

resetAnimation()​

resetAnimation(callback?: (value: {x: number; y: number}) => void);

停止任何动画并将值重置为其原始状态。

参数:

名称类型是否必需描述
callbackfunction否一个接收原始值的函数。

getLayout()​

getLayout(): {left: Animated.Value, top: Animated.Value};

将{x, y}转换为{left, top}以在样式中使用，例如：

style={this.state.anim.getLayout()}

getTranslateTransform()​

getTranslateTransform(): [
  {translateX: Animated.Value},
  {translateY: Animated.Value},
];

将{x, y}转换为可用的平移变换，例如：

style={{
  transform: this.state.anim.getTranslateTransform()
}}