Animated.Value

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

驱动动画的标准值。一个 Animated.Value 可以同步驱动多个属性，但同一时间只能被一个驱动机制控制。使用新机制（如启动新动画或调用 setValue）将停止之前的驱动机制。

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

---

参考

方法

setValue()

tsx

setValue(value: number);

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

参数:

Name	Type	Required	Description
value	number	Yes	Value

---

setOffset()

tsx

setOffset(offset: number);

设置叠加在基础值上的偏移量（无论通过 setValue、动画还是 Animated.event 设置）。适用于补偿平移手势起点等场景。

参数:

Name	Type	Required	Description
offset	number	Yes	Offset value

---

flattenOffset()

tsx

flattenOffset();

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

---

extractOffset()

tsx

extractOffset();

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

---

addListener()

tsx

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

为该值添加异步监听器以观察动画更新。由于该值可能由原生驱动而无法同步读取，此方法非常实用。

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

参数:

Name	Type	Required	Description
callback	function	Yes	The callback function which will receive an object with a value key set to the new value.

---

removeListener()

tsx

removeListener(id: string);

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

参数:

Name	Type	Required	Description
id	string	Yes	Id for the listener being removed.

---

removeAllListeners()

tsx

removeAllListeners();

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

---

stopAnimation()

tsx

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

停止所有正在运行的动画或跟踪。动画停止后会调用 callback 并传入最终值，适用于更新状态以匹配动画在布局中的位置。

参数:

Name	Type	Required	Description
callback	function	No	A function that will receive the final value.

---

resetAnimation()

tsx

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

停止所有动画并将值重置至初始状态。

参数:

Name	Type	Required	Description
callback	function	No	A function that will receive the original value.

---

interpolate()

tsx

interpolate(config: InterpolationConfigType);

在更新属性前对值进行插值处理（例如将 0-1 映射到 0-10）。

详见 AnimatedInterpolation.js

参数:

Name	Type	Required	Description
config	object	Yes	See below.

config 对象包含以下键：

• inputRange：数字数组

• outputRange：数字或字符串数组

• easing（可选）：接收输入数字并返回数字的函数

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

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

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

---

animate()

tsx

animate(animation, callback);

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

参数:

Name	Type	Required	Description
animation	Animation	Yes	See Animation.js.
callback	function	Yes	Callback function.