第8章 React Native 中的 Animated.ValueXY 详解

版本：0.77 Animated.ValueXY 用于驱动二维动画（如平移手势）的二维数值。其 API 与普通 Animated.Value 几乎完全相同，但实现了多路复用。内部包含两个普通的 Animated.Value。 示例 参考 方法 setValue() React TSXsetValue(value: {x: number; y: number}); 直接设置数值。这会停止该数值上正在运行的任何动画，并更新所有绑定的属性。 参数： 名称 类型 必填 描述 value {x: number; y: number} 是 数值 setOffset() React TSXsetOffset(offset: {x: number; y: number}); 设置一个偏移量，该偏移量叠加在通过 setValue、动画或 Animated.event 设置的当前值之上。常用于补偿平移手势的起点等事项。 参数： 名称 类型 必填 描述 offset {x: number; y: number} 是 偏移量 flattenOffset() React TSXflattenOffset(); 将偏移量合并到基础值中，并将偏移量重置为零。该数值的最终输出保持不变。 extractOffset() React TSXextractOffset(); 将偏移量设置为新的基础值，并将原基础值重置为零。该数值的最终输出保持不变。 addListener() React TSXaddListener(callback: (value: {x: number; y: number}) => void); 为该数值添加一个异步监听器，以便观察动画带来的更新。这很有用，因为原生可能正在驱动该数值，因此无法同步读取它。 返回一个字符串，作为该监听器的标识符。 参数： 名称 类型 必填 描述 callback function 是 接收一个新对象作为参数（其中 value 键设为新数值）的回调函数。 removeListener() React TSXremoveListener(id: string); 注销一个监听器。id 参数必须与之前由 addListener() 返回的标识符匹配。 参数： 名称 类型 必填 描述 id string 是 待移除监听器的 ID。 removeAllListeners() React TSXremoveAllListeners(); 移除所有已注册的监听器。 stopAnimation() React TSXstopAnimation(callback?: (value: {x: number; y: number}) => void); 停止正在运行的动画或追踪。在停止动画后，回调函数 callback 会以最终数值被调用，这对于使状态与动画位置及布局保持同步非常有用。 参数： 名称 类型 必填 描述 callback function 否 接收最终数值的函数。 resetAnimation() React TSXresetAnimation(callback?: (value: {x: number; y: number}) => void); 停止所有动画，并将值重置为初始值。 参数： 名称类型是否必填描述callbackfunction否接收原始值的回调函数。 getLayout()​ React TSXgetLayout(): {left: Animated.Value, top: Animated.Value};
将 {x, y} 转换为 {left, top}，方便直接用在样式中，例如： React TSXstyle={this.state.anim.getLayout()}
getTranslateTransform()​ React TSXgetTranslateTransform(): [
{translateX: Animated.Value},
{translateY: Animated.Value},
];
将 {x, y} 转换为可用的位移 transform，例如： React TSXstyle={{
transform: this.state.anim.getTranslateTransform()
}}