跳至主要内容

Animated.ValueXY

用于驱动二维动画（例如平移手势）的二维值。与普通 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);

向该值添加异步侦听器，以便您可以观察来自动画的更新。这很有用，因为无法同步读取该值，因为它可能由原生驱动。

返回一个用作侦听器标识符的字符串。

参数

名称类型必填描述
callbackfunction是将接收一个对象的回调函数，该对象具有一个 value 键，该键设置为新值。

removeListener()​

removeListener(id: string);

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

参数

名称类型必填描述
idstring是要移除的侦听器的 ID。

removeAllListeners()​

removeAllListeners();

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

stopAnimation()​

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

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

参数

名称类型必填描述
callbackfunction否将接收最终值的函数。

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()
}}