跳至主内容

Animated.ValueXY

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

用于驱动二维动画（如拖动手势）的二维值。其API与常规Animated.Value几乎完全相同，但采用复用设计。内部包含两个常规的Animated.Value实例。

示例​

参考

方法​

setValue()​

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

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

参数:

NameTypeRequiredDescription
value{x: number; y: number}YesValue

setOffset()​

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

设置叠加在基础值上的偏移量（无论通过 setValue、动画还是 Animated.event 设置）。适用于补偿平移手势起点等场景。

参数:

NameTypeRequiredDescription
offset{x: number; y: number}YesOffset value

flattenOffset()​

tsx
flattenOffset();

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

extractOffset()​

tsx
extractOffset();

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

addListener()​

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

为该值添加异步监听器以观察动画更新。由于该值可能由原生驱动而无法同步读取，此方法非常实用。

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

参数:

NameTypeRequiredDescription
callbackfunctionYesThe callback function which will receive an object with a value key set to the new value.

removeListener()​

tsx
removeListener(id: string);

注销监听器。id 参数必须与 addListener() 先前返回的标识符匹配。

参数:

NameTypeRequiredDescription
idstringYesId for the listener being removed.

removeAllListeners()​

tsx
removeAllListeners();

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

stopAnimation()​

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

停止所有正在运行的动画或跟踪。动画停止后会调用 callback 并传入最终值，适用于更新状态以匹配动画在布局中的位置。

参数:

NameTypeRequiredDescription
callbackfunctionNoA function that will receive the final value.

resetAnimation()​

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

停止所有动画并将值重置至初始状态。

参数:

NameTypeRequiredDescription
callbackfunctionNoA function that will receive the original value.

getLayout()​

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

将{x, y}转换为可用于样式的{left, top}，例如：

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

getTranslateTransform()​

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

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

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