Skip to main content

Animated.ValueXY

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

¥2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal Animated.Value, but multiplexed. Contains two regular Animated.Values under the hood.

示例​

¥Example

参考

¥Reference

方法​

¥Methods

setValue()​

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

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

¥Directly set the value. This will stop any animations running on the value and update all the bound properties.

参数：

¥Parameters:

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

setOffset()​

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

设置一个偏移量，该偏移量应用于所设置的任何值之上，无论是通过 setValue、动画还是 Animated.event。对于补偿诸如平移手势的开始之类的事情很有用。

¥Sets an offset that is applied on top of whatever value is set, whether via setValue, an animation, or Animated.event. Useful for compensating things like the start of a pan gesture.

参数：

¥Parameters:

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

flattenOffset()​

flattenOffset();

将偏移值合并到基值并将偏移重置为零。最终输出的值没有变化。

¥Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged.

extractOffset()​

extractOffset();

将偏移值设置为基值，并将基值重置为零。最终输出的值没有变化。

¥Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged.

addListener()​

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

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

¥Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively.

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

¥Returns a string that serves as an identifier for the listener.

参数：

¥Parameters:

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

removeListener()​

removeListener(id: string);

取消注册监听器。id 参数应与 addListener() 先前返回的标识符匹配。

¥Unregister a listener. The id param shall match the identifier previously returned by addListener().

参数：

¥Parameters:

名称类型必需的描述
idstring是的正在删除的监听器的 ID。

removeAllListeners()​

removeAllListeners();

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

¥Remove all registered listeners.

stopAnimation()​

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

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

¥Stops any running animation or tracking. callback is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout.

参数：

¥Parameters:

名称类型必需的描述
callbackfunction不将接收最终值的函数。

resetAnimation()​

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

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

¥Stops any animation and resets the value to its original.

参数：

¥Parameters:

名称类型必需的描述
callbackfunction不将接收原始值的函数。

getLayout()​

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

将 {x, y} 转换为 {left, top} 以用于样式，例如

¥Converts {x, y} into {left, top} for use in style, e.g.

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

getTranslateTransform()​

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

将 {x, y} 转换为可用的翻译变换，例如

¥Converts {x, y} into a useable translation transform, e.g.

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