Animated.ValueXY

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

示例

---

参考

方法

setValue()

tsx

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

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

参数

姓名	类型	必需	描述
值	{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);

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

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

参数

姓名	类型	必需	描述
callback	函数	是	回调函数，该函数将接收一个包含 value 键的对象，该键设置为新值。

---

removeListener()

tsx

removeListener(id: string);

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

参数

姓名	类型	必需	描述
ID	字符串	是	要移除的监听器的 ID。

---

removeAllListeners()

tsx

removeAllListeners();

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

---

stopAnimation()

tsx

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

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

参数

姓名	类型	必需	描述
callback	函数	否	一个函数，该函数将接收最终值。

---

resetAnimation()

tsx

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

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

参数

姓名	类型	必需	描述
callback	函数	否	一个函数，该函数将接收原始值。

---

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