Animated

该Animated库旨在使动画变得流畅，强大且易于构建和维护。Animated侧重于输入和输出之间的声明性关系，以及两者之间的可配置变换，以及简单start/ stop方法来控制基于时间的动画执行。

创建动画最简单的工作流程是创建一个Animated.Value，将其与动画组件的一个或多个样式属性挂钩，然后使用Animated.timing()以下动画通过动画驱动更新：

Animated.timing(                            // Animate value over time
  this.state.fadeAnim,                      // The value to drive
  {
    toValue: 1,                             // Animate to final value of 1
  }
).start(                                  // Start the animation

请参阅动画指南以查看更多实际操作示例Animated。

概观

您可以使用两种值类型Animated：

Animated.Value() 为单个值

Animated.ValueXY() 为载体

Animated.Value可以绑定到样式属性或其他道具，也可以插入。一个人Animated.Value可以驱动任何数量的属性。

配置动画

Animated提供三种类型的动画类型。每种动画类型都提供了一个特定的动画曲线，用于控制您的值从初始值到最终值的动画效果：

Animated.decay() 以初始速度开始并逐渐减速至停止。

Animated.spring() 提供一个简单的弹簧物理模型。

Animated.timing() 使用缓动功能随时间推移动画值。

在大多数情况下，你会使用timing()。默认情况下，它使用对称的easeInOut曲线，将对象逐渐加速到全速，并通过逐渐减速停止结束。

使用动画

通过调用动画开始start()动画。start()需要一个完成回调，这将在动画完成时调用。如果动画正常运行，则完成回调将被调用{finished: true}。如果动画完成是因为在动画完成stop()之前被调用（例如，因为它被手势或其他动画中断），那么它将接收{finished: false}。

使用本机驱动程序

通过使用本地驱动程序，我们会在开始动画之前将所有关于动画的内容发送到本地，从而允许本地代码在UI线程上执行动画，而无需通过每一帧的桥接。一旦动画开始，JS线程就可以被阻塞而不会影响动画。

您可以通过useNativeDriver: true在动画配置中指定来使用本地驱动程序。查看动画指南了解更多信息。

动画组件

只有可生成动画的组件才能生成动画。这些特殊组件具有将动画值绑定到属性的神奇功能，并执行有针对性的本地更新，以避免每个帧上的反应呈现和对帐过程的成本。他们还处理卸载时的清理，因此默认情况下它们是安全的。

createAnimatedComponent()可以用来使组件具有可动性。Animated使用上面的包装器导出以下可动画组件：

Animated.Image

Animated.ScrollView

Animated.Text

Animated.View

组成动画

动画还可以使用组合函数以复杂的方式进行组合：

Animated.delay() 在给定的延迟后开始动画。

Animated.parallel() 同时开始一些动画。

Animated.sequence() 按顺序启动动画，等待每个完成之后再开始下一个动画。

Animated.stagger() 按顺序开始动画并行，但连续延迟。

通过简单地将toValue一个动画设置为另一个，动画也可以链接在一起Animated.Value。请参阅动画指南中的跟踪动态值。

默认情况下，如果一个动画停止或中断，则组中的所有其他动画也会停止。

结合动画值

您可以通过添加，乘法，除法或模数结合两个动画值来创建新的动画值：

Animated.add()

Animated.divide()

Animated.modulo()

Animated.multiply()

插值

该interpolate()功能允许输入范围映射到不同的输出范围。默认情况下，它将推断超出给定范围的曲线，但也可以使曲线限制输出值。它默认使用线性插值，但也支持缓动功能。

interpolate()在动画指南中了解更多关于插值的知识。处理手势和其他事件测量，如平移或滚动，其他事件可以直接使用动画值映射Animated.event()。这是通过结构化地图语法完成的，以便可以从复杂的事件对象中提取值。第一个级别是允许跨多个参数映射的数组，并且该数组包含嵌套对象。

Animated.event()

例如，使用水平滚动手势时，您需要执行以下操作以映射event.nativeEvent.contentOffset.x到scrollX（an Animated.Value）：

 onScroll={Animated.event(
   // scrollX = e.nativeEvent.contentOffset.x
   [{ nativeEvent: {
        contentOffset: {
          x: scrollX
        }
      }
    }]
 )}

方法

static decay(value, config)

根据衰减系数将初始速度的值设置为零。

配置是一个对象，可能有以下选项：

velocity：初始速度。需要。

deceleration：衰减率。默认0.997。

useNativeDriver：当使用本地驱动程序时。默认为false。

static timing(value, config)

沿着定时缓动曲线动画一个值。该Easing模块有大量预定义的曲线，或者您可以使用自己的功能。

配置是一个对象，可能有以下选项：

duration：动画的长度（毫秒）。默认500。

easing：放松功能来定义曲线。默认是Easing.inOut(Easing.ease)。

delay：延迟后开始动画（毫秒）。默认0。

useNativeDriver：当使用本地驱动程序时。默认为false。

static spring(value, config)

基于反弹和折纸的春季动画。跟踪速度状态以创建流体运动作为toValue更新，并可以链接在一起。

Config是一个可能有以下选项的对象。请注意，您只能定义弹性/速度或张力/摩擦，但不能同时定义：

friction：控制“反弹”/过冲。默认7。

tension：控制速度。默认40。

speed：控制动画的速度。默认12。

bounciness：控制弹性。默认8。

useNativeDriver：当使用本地驱动程序时。默认为false。

static add(a, b)

创建由两个添加在一起的动画值组成的新动画值。

static divide(a, b)

通过将第一个Animated值除以第二个Animated值创建一个新的Animated值。

static multiply(a, b)

创建一个由两个乘以一起的Animated值组成的新的Animated值。

static modulo(a, modulus)

创建一个新的Animated值，该值是所提供的Animated值的（非负值）模

static diffClamp(a, min, max)

创建一个限制在2个值之间的新动画值。它使用最后一个值之间的差异，即使该值远离边界，当值再次接近时它将开始改变。（value = clamp(value + diff, min, max)）。

这对于滚动事件很有用，例如，在滚动时显示导航栏并在滚动时隐藏它。

static delay(time)

在给定的延迟后开始动画。

static sequence(animations)

按顺序启动一系列动画，等待每个动画完成后再开始下一个动画。如果当前正在运行的动画已停止，则不会启动以下动画。

static parallel(animations, config?)

同时启动一组动画。默认情况下，如果其中一个动画停止，它们将全部停止。你可以用stopTogether标志覆盖它。

static stagger(time, animations)

动画数组可以并行运行（重叠），但会以连续的延迟顺序启动。很适合做尾随效果。

static loop(animation)

连续循环播放给定的动画，以便每次播放结束时都会重新开始并重新开始播放。可以指定在配置中使用密钥“迭代”循环的次数。如果子动画设置为'useNativeDriver'，将循环而不会阻塞UI线程。

static event(argMapping, config?)

采集一系列映射并相应地从每个arg提取值，然后调用setValue映射的输出。例如

 onScroll={Animated.event(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
   {listener},          // Optional async listener
 )}
 ...
 onPanResponderMove: Animated.event([
   null,                // raw event arg ignored
   {dx: this._panX},    // gestureState arg
 ]),

配置是一个对象，可能有以下选项：

listener：可选的异步侦听器。

useNativeDriver：当使用本地驱动程序时。默认为false。

static forkEvent(event, listener)

先进的命令式API用于侦听通过道具传入的动画事件。尽可能直接使用值。

static unforkEvent(event, listener)

属性

Value: CallExpression

驾驶动画的标准值等级。通常使用初始化new Animated.Value(0

ValueXY: CallExpression

用于驾驶2D动画的2D值类，例如平移手势。

Interpolation: CallExpression

导出为在流中使用插值类型

Node: CallExpression

为便于类型检查而导出。所有的动画值都来自这个类。

createAnimatedComponent: CallExpression

使任何React组件成为动画。用于创建Animated.View等。

attachNativeEvent: Identifier

命令式API将动画值附加到视图上的事件。喜欢使用Animated.event与useNativeDrive: true如果可能的话。