跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽，抢先掌握 React Native 新架构精髓 立即查看 >

Animated.Value

驱动动画的一维标量值. 一个Animated.Value可以同步地驱动多个属性，但每次只能以一种动画机制变化。如果改用了其他动画机制（例如开始一个新的动画或是调用setValue），则会停止先前的动画。

一般这样来初始化new Animated.Value(0);

文档

方法​

setValue()​

setValue(value);

直接赋值。注意这会导致正在运行的动画中断而直接更新到新值。

参数：

名称类型必需说明
valuenumber是新的动画值

setOffset()​

setOffset(offset);

设置一个偏移量，该偏移量会叠加在通过setValue、动画或Animated.event设置的任何值之上。对于补偿诸如平移手势的起始位置等情况非常有用。

参数：

名称类型必需说明
offsetnumber是偏移量

flattenOffset()​

flattenOffset();

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

extractOffset()​

extractOffset();

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

addListener()​

addListener(callback);

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

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

参数：

名称类型必需说明
callbackfunction是回调函数将接收一个对象，其中value键的值设置为新值。

removeListener()​

removeListener(id);

移除一个监听函数。 id参数应与之前由addListener()返回的标识符匹配。

参数：

名称类型必需说明
idstring是正在移除的监听器的ID。

removeAllListeners()​

removeAllListeners();

移除所有监听函数。

stopAnimation()​

stopAnimation([callback]);

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

参数：

名称类型必需说明
callbackfunction否一个将接收最终值的函数。

resetAnimation()​

resetAnimation([callback]);

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

参数：

名称类型必需说明
callbackfunction否一个接收原始值的函数。

interpolate()​

interpolate(config);

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

请参阅AnimatedInterpolation.js

参数：

名称类型必需说明
configobject是看下面的说明

config 对象由以下键组成：

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

animate()​

animate(animation, callback);

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

参数：

名称类型必需说明
animationAnimation是请参阅 Animation.js.
callbackfunction是回调函数

stopTracking()​

stopTracking();

一般只在内部使用。

track()​

track(tracking);

一般只在内部使用。

参数：

名称类型必需说明
trackingAnimatedNode是请参阅 AnimatedNode.js