跳到主内容

Animated.Value

驱动动画的标准值。一个 Animated.Value 可以同步驱动多个属性，但一次只能由一个机制驱动。使用新机制（例如，启动新动画或调用 setValue）将停止所有先前的机制。

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

参考

方法​

setValue()​

tsx
setValue(value: number);

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

参数

名称类型必填描述
valuenumber是值

setOffset()​

tsx
setOffset(offset: number);

设置一个偏移量，该偏移量应用于通过 setValue、动画或 Animated.event 设置的任何值之上。这对于补偿平移手势的起点等情况很有用。

参数

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

flattenOffset()​

tsx
flattenOffset();

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

extractOffset()​

tsx
extractOffset();

将偏移值设置为基本值，并将基本值重置为零。值的最终输出不变。

addListener()​

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

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

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

参数

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

removeListener()​

tsx
removeListener(id: string);

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

参数

名称类型必填描述
idstring是要移除的监听器的ID。

removeAllListeners()​

tsx
removeAllListeners();

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

stopAnimation()​

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

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

参数

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

resetAnimation()​

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

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

参数

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

interpolate()​

tsx
interpolate(config: InterpolationConfigType);

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

参见 AnimatedInterpolation.js

参数

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

config 对象由以下键组成

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

animate()​

tsx
animate(animation, callback);

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

参数

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