Animated.ValueXY
用于驱动二维动画(例如平移手势)的二维值。API 与常规 Animated.Value
几乎相同,但经过了多路复用。底层包含两个常规的 Animated.Value
。
示例
参考
方法
setValue()
tsx
setValue(value: {x: number; y: number});
直接设置值。这将停止在该值上运行的任何动画并更新所有绑定的属性。
参数
姓名 | 类型 | 必需 | 描述 |
---|---|---|---|
值 | {x: 数字; y: 数字} | 是 | 值 |
setOffset()
tsx
setOffset(offset: {x: number; y: number});
设置一个偏移量,该偏移量将应用于通过 setValue
、动画或 Animated.event
设置的任何值之上。对于补偿平移手势的开始等情况很有用。
参数
姓名 | 类型 | 必需 | 描述 |
---|---|---|---|
偏移量 | {x: 数字; y: 数字} | 是 | 偏移值 |
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()
}}