nuke-animated

Animated

• category: API
• chinese: 动画
• type: API

---

** 注意，这个动画库体积非常庞大， 建议使用 Transition 代替 **

API

Animated 用来创造流畅、强大、并且易于构建和维护的动画。

只有声明为可动画化的组件才能被关联动画。比如： View、Text，还有Image都是可动画化的。

属性：

• Value: AnimatedValue

  • 表示一个数值的类，用于驱动动画；
  • 通常用new Animated.Value(0);来初始化。

• ValueXY: AnimatedValueXY

  • 表示一个2D值的类，用来驱动2D动画，例如拖动操作等。

方法：

• static decay(value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig)

  • 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。

• static timing(value: AnimatedValue | AnimatedValueXY, config: TimingAnimationConfig)

  • 推动一个值按照一个过渡曲线而随时间变化。Easing模块定义了一大堆曲线，你也可以使用你自己的函数。

• static spring(value: AnimatedValue | AnimatedValueXY, config: SpringAnimationConfig)

  • 产生一个基于Rebound和Origami实现的Spring动画。它会在toValue值更新的同时跟踪当前的速度状态，以确保动画连贯。可以链式调用。

• static add(a: Animated, b: Animated)

  • 将两个动画值相加计算，创建一个新的动画值。

• static multiply(a: Animated, b: Animated)

  • 将两个动画值相乘计算，创建一个新的动画值。

• static delay(time: number)

  • 在指定的延迟之后开始动画。

• static sequence(animations: Array)

  • 按顺序执行一个动画数组里的动画，等待一个完成后再执行下一个。如果当前的动画被中止，后面的动画则不会继续执行。

• static parallel(animations: Array, config?: ParallelConfig)

  • 同时开始一个动画数组里的全部动画。默认情况下，如果有任何一个动画停止了，其余的也会被停止。你可以通过stopTogether选项来改变这个效果。

• static stagger(time: number, animations: Array)

  • 一个动画数组，里面的动画有可能会同时执行（重叠），不过会以指定的延迟来开始。用来制作拖尾效果非常合适。

• static event(argMapping: Array, config?: EventConfig)

  • 接受一个映射的数组，对应的解开每个值，然后调用所有对应的输出的setValue方法。
  • 例如：

 onScroll={this.AnimatedEvent(
   [{nativeEvent: {contentOffset: {x: this._scrollX}}}]
   {listener},          // 可选的异步监听函数
 )
 ...
 onPanResponderMove: this.AnimatedEvent([
   null,                // 忽略原始事件
   {dx: this._panX},    // 手势状态参数
 ]),