跳到主要内容

Animated.Value

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

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


参考

方法

setValue()

tsx
setValue(value: number);

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

参数

姓名类型必需描述
数字

setOffset()

tsx
setOffset(offset: number);

设置一个偏移量,该偏移量会叠加到通过 setValue、动画或 Animated.event 设置的任何值之上。对于补偿拖动手势的起始点等情况很有用。

参数

姓名类型必需描述
offset数字偏移量

flattenOffset()

tsx
flattenOffset();

将偏移量合并到基值中,并将偏移量重置为零。值的最终输出保持不变。


extractOffset()

tsx
extractOffset();

将偏移量设置为基值,并将基值重置为零。值的最终输出保持不变。


addListener()

tsx
addListener(callback: (state: {value: number}) => void): string;

为值添加一个异步监听器,以便您可以观察动画的更新。这很有用,因为没有办法同步读取值,因为它可能由原生驱动。

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

参数

姓名类型必需描述
callback函数回调函数,它将接收一个包含 value 键的对象,该键的值设置为新值。

removeListener()

tsx
removeListener(id: string);

注销监听器。id 参数应与 addListener() 之前返回的标识符匹配。

参数

姓名类型必需描述
ID字符串要移除的监听器的 ID。

removeAllListeners()

tsx
removeAllListeners();

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


stopAnimation()

tsx
stopAnimation(callback?: (value: number) => void);

停止任何正在进行的动画或跟踪。callback 在停止动画后会以最终值调用,这对于将状态更新与布局匹配以匹配动画位置很有用。

参数

姓名类型必需描述
callback函数一个接收最终值的函数。

resetAnimation()

tsx
resetAnimation(callback?: (value: number) => void);

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

参数

姓名类型必需描述
callback函数一个接收原始值的函数。

interpolate()

tsx
interpolate(config: InterpolationConfigType);

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

请参阅 AnimatedInterpolation.js

参数

姓名类型必需描述
config对象请参阅下文。

config 对象由以下键组成

  • inputRange:一个数字数组
  • outputRange:数字或字符串数组
  • easing(可选):一个给定输入数字返回数字的函数
  • extrapolate(可选):一个字符串,例如 'extend'、'identity' 或 'clamp'
  • extrapolateLeft(可选):一个字符串,例如 'extend'、'identity' 或 'clamp'
  • extrapolateRight(可选):一个字符串,例如 'extend'、'identity' 或 'clamp'

animate()

tsx
animate(animation, callback);

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

参数

姓名类型必需描述
animation动画请参阅 Animation.js
callback函数回调函数。