Animated.ValueXY

用于驱动 2D 动画的二维值，例如平移手势。其 API 与普通的 Animated.Value 几乎完全相同，但支持多路复用。底层包含两个常规的 Animated.Value。

示例

---

参考

方法

setValue()

React TSX

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

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

参数：

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

---

setOffset()

React TSX

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

设置一个偏移量，它会叠加在已设置的任意值之上，无论该值是通过 setValue、动画还是 Animated.event 设置的。适用于补偿诸如平移手势开始位置之类的情况。

参数：

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

---

flattenOffset()

React TSX

flattenOffset();

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

---

extractOffset()

React TSX

extractOffset();

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

---

addListener()

React TSX

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

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

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

参数：

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

---

removeListener()

React TSX

removeListener(id: string);

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

参数：

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

---

removeAllListeners()

React TSX

removeAllListeners();

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

---

stopAnimation()

React TSX

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

停止任何正在运行的动画或跟踪。callback 会在动画停止后接收最终值，这对于更新状态以使其与布局中的动画位置保持一致很有用。

参数：

名称	类型	必需	描述
callback	function	否	一个会接收最终值的函数。

---

resetAnimation()

React TSX

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

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

参数：

名称	类型	必需	描述
callback	function	否	一个会接收初始值的函数。

---

getLayout()

React TSX

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

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

React TSX

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

---

getTranslateTransform()

React TSX

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

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

React TSX

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