Animated.Value
用于驱动动画的标准值。一个 Animated.Value
可以同步驱动多个属性,但一次只能被一个机制驱动。使用新的机制(例如,启动新的动画,或调用 setValue
)将停止任何之前的机制。
通常在类组件中使用 useAnimatedValue(0);
或 new Animated.Value(0);
初始化。
参考
方法
setValue()
tsx
setValue(value: number);
直接设置值。这将停止值上运行的任何动画,并更新所有绑定的属性。
参数
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
value | number | 是 | 值 |
setOffset()
tsx
setOffset(offset: number);
设置一个偏移量,该偏移量应用于设置的任何值之上,无论是通过 setValue
、动画还是 Animated.event
设置。对于补偿诸如平移手势的开始之类的事件很有用。
参数
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
offset | number | 是 | 偏移值 |
flattenOffset()
tsx
flattenOffset();
将偏移值合并到基础值中,并将偏移量重置为零。值的最终输出不变。
extractOffset()
tsx
extractOffset();
将偏移值设置为基础值,并将基础值重置为零。值的最终输出不变。
addListener()
tsx
addListener(callback: (state: {value: number}) => void): string;
向值添加一个异步监听器,以便您可以观察来自动画的更新。这很有用,因为无法同步读取该值,因为它可能是由原生驱动的。
返回一个字符串,该字符串充当监听器的标识符。
参数
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
callback | function | 是 | 回调函数,它将接收一个对象,该对象的 value 键设置为新值。 |
removeListener()
tsx
removeListener(id: string);
取消注册监听器。id
参数应与先前由 addListener()
返回的标识符匹配。
参数
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
id | string | 是 | 要移除的监听器的 ID。 |
removeAllListeners()
tsx
removeAllListeners();
移除所有已注册的监听器。
stopAnimation()
tsx
stopAnimation(callback?: (value: number) => void);
停止任何正在运行的动画或跟踪。在停止动画后,将使用最终值调用 callback
,这对于更新状态以匹配动画位置与布局很有用。
参数
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
callback | function | 否 | 将接收最终值的函数。 |
resetAnimation()
tsx
resetAnimation(callback?: (value: number) => void);
停止任何动画并将值重置为其原始值。
参数
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
callback | function | 否 | 将接收原始值的函数。 |
interpolate()
tsx
interpolate(config: InterpolationConfigType);
在更新属性之前插值该值,例如,将 0-1 映射到 0-10。
请参阅 AnimatedInterpolation.js
参数
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
config | object | 是 | 见下文。 |
config
对象由以下键组成
inputRange
:数字数组outputRange
:数字或字符串数组easing
(可选):一个函数,给定一个输入数字,返回一个数字extrapolate
(可选):一个字符串,例如 'extend'、'identity' 或 'clamp'extrapolateLeft
(可选):一个字符串,例如 'extend'、'identity' 或 'clamp'extrapolateRight
(可选):一个字符串,例如 'extend'、'identity' 或 'clamp'
animate()
tsx
animate(animation, callback);
通常仅在内部使用,但可以由自定义 Animation 类使用。
参数
名称 | 类型 | 必需 | 描述 |
---|---|---|---|
animation | Animation | 是 | 请参阅 Animation.js 。 |
callback | function | 是 | 回调函数。 |