第7章 React Native 第7章：Animated.Value 详解

版本：0.77 Animated.Value 是用于驱动动画的标准数值。一个 Animated.Value 可以同步驱动多个属性，但同一时刻只能由一种机制驱动。使用新机制（例如启动新动画或调用 setValue）会停止之前所有正在运行的动画。 通常通过 useAnimatedValue(0) 进行初始化，或在类组件中使用 new Animated.Value(0) 参考 方法 setValue() React TSXsetValue(value: number); 直接设置数值。这会停止该数值上正在运行的所有动画，并更新所有绑定的属性。 参数： 名称类型必填说明valuenumber是值 setOffset() React TSXsetOffset(offset: number); 设置一个偏移量，该偏移量会叠加在当前数值之上，无论当前数值是通过 setValue、动画还是 Animated.event 设置的。这常用于补偿手势起始点等偏移。 参数： 名称类型必填说明offsetnumber是偏移值 flattenOffset() React TSXflattenOffset(); 将偏移值合并到基础值中，并将偏移值重置为零。最终输出数值保持不变。 extractOffset() React TSXextractOffset(); 将基础值移至偏移值中，并将基础值重置为零。最终输出数值保持不变。 addListener() React TSXaddListener(callback: (state: {value: number}) => void): string; 为数值添加异步监听器，以便观察动画更新。由于数值可能由原生驱动，无法同步读取，因此使用监听器很有必要。 返回一个字符串，作为监听器的标识符。 参数： 名称类型必填说明callbackfunction是回调函数，接收包含 value 键的对象，其值更新为最新数值。 removeListener() React TSXremoveListener(id: string); 移除监听器。id 参数需与 addListener() 之前返回的标识符匹配。 参数： 名称类型必填说明idstring是待移除的监听器 ID。 removeAllListeners() React TSXremoveAllListeners(); 移除所有已注册的监听器。 stopAnimation() React TSXstopAnimation(callback?: (value: number) => void);

停止所有正在运行的动画或跟踪。停止动画后会以最终值调用 callback，便于更新状态使布局与动画位置保持一致。

参数：

名称	类型	必填	说明
callback	function	否	接收最终值的函数。

resetAnimation()​

React TSX

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

停止所有动画，并把值重置为初始值。

参数：

名称	类型	必填	说明
callback	function	否	接收初始值的函数。

interpolate()​

React 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()​

React TSX

animate(animation, callback);

通常只在内部使用，但自定义 Animation 类也可以调用它。

参数：

名称	类型	必填	说明
animation	Animation	是	参见 Animation.js。
callback	function	是	回调函数。