跳到主要内容

Animated.ValueXY

用于驱动二维动画(如平移手势)的二维值。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()
}}