跳到主要内容

Animated.ValueXY

用于驱动2D动画（例如平移手势）的2D值。API与普通的 Animated.Value 几乎相同，但它是复用的。底层包含两个普通的 Animated.Value 实例。

示例​

参考

方法​

setValue()​

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

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

参数

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

setOffset()​

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

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

参数

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

flattenOffset()​

tsx
flattenOffset();

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

extractOffset()​

tsx
extractOffset();

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

addListener()​

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

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

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

参数

名称类型是否必需描述
callbackfunction是回调函数，它将接收一个对象，其中包含一个设置为新值的 value 键。

removeListener()​

tsx
removeListener(id: string);

注销一个监听器。`id` 参数应与之前由 `addListener()` 返回的标识符匹配。

参数

名称类型是否必需描述
idstring是要移除的监听器的 Id。

removeAllListeners()​

tsx
removeAllListeners();

移除所有注册的监听器。

stopAnimation()​

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

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

参数

名称类型是否必需描述
callbackfunction否一个函数，将接收最终值。

resetAnimation()​

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

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

参数

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

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