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

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