Skip to main content

Animated.Value

驾驶动画的标准值。一个 Animated.Value 可以以同步方式驱动多个属性，但一次只能由一种机制驱动。使用新机制（例如开始新动画或调用 setValue）将停止任何先前的动画。

¥Standard value for driving animations. One Animated.Value can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling setValue) will stop any previous ones.

通常在类组件中使用 useAnimatedValue(0); 或 new Animated.Value(0); 初始化。

¥Typically initialized with useAnimatedValue(0); or new Animated.Value(0); in class components.

参考

¥Reference

方法​

¥Methods

setValue()​

setValue(value: number);

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

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

参数：

¥Parameters:

名称类型必需的描述
valuenumber是的值

setOffset()​

setOffset(offset: 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:

名称类型必需的描述
offsetnumber是的偏移值

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: (state: {value: number}) => void): string;

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

¥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: 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: number) => void);

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

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

参数：

¥Parameters:

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

interpolate()​

interpolate(config: InterpolationConfigType);

在更新属性之前插入值，例如 将 0-1 映射到 0-10。

¥Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10.

见 AnimatedInterpolation.js

¥See AnimatedInterpolation.js

参数：

¥Parameters:

名称类型必需的描述
configobject是的见下文。

config 对象由以下键组成：

¥The config object is composed of the following keys:

  • inputRange：数字数组

    ¥inputRange: an array of numbers

  • outputRange：数字或字符串数组

    ¥outputRange: an array of numbers or strings

  • easing（可选）：给定输入数字后返回数字的函数

    ¥easing (optional): a function that returns a number, given an input number

  • extrapolate（可选）：字符串，例如 'extend'、'identity' 或 'clamp'

    ¥extrapolate (optional): a string such as 'extend', 'identity', or 'clamp'

  • extrapolateLeft（可选）：字符串，例如 'extend'、'identity' 或 'clamp'

    ¥extrapolateLeft (optional): a string such as 'extend', 'identity', or 'clamp'

  • extrapolateRight（可选）：字符串，例如 'extend'、'identity' 或 'clamp'

    ¥extrapolateRight (optional): a string such as 'extend', 'identity', or 'clamp'

animate()​

animate(animation, callback);

通常仅在内部使用，但可以由自定义动画类使用。

¥Typically only used internally, but could be used by a custom Animation class.

参数：

¥Parameters:

名称类型必需的描述
animationAnimation是的参见 Animation.js。
callbackfunction是的回调函数。