官方动画文档

Overview

Animated 可以使用2种值类型：

• Animated.Value() 单一值,能够绑定样式属性或者其它属性，也可以使用插值，单个 Animated.Value 能够驱动任意数量的属性
• Animated.ValueXY() 容器(vectors)

Configuring animations

Animated 提供了3种动画类型。每种动画类型提供了特定的用于控制从初始值到结束值的动画曲线

• Animated.decay(): 以一个初始速度开始，然后渐渐的停止
• Animated.spring(): 提供简单的弹簧物理模型
• Animated.timing(): 使用 easing function 基于时间的动画 （easeInOut 曲线，先快后慢）

Working with animations

可以通过调用 start() 方法开始动画，start() 方法还可以接收一个动画完成之后的回调函数。如果动画正常的结束，完成回调函数将返回 {finished: true}.如果动画在其正常完成之前因为调用 stop() 方法完成(比如被手势中断或者其它动画中断)，它将返回 {finished: false}

Using the native driver

通过使用native driver,在开始动画之前将所有动画相关的信息都发送给原生，允许原生代码在UI thread上进行动画，而不需要在每一帧都都通过桥连接。一旦动画开始，JS线程将被阻塞而不影响动画。

可以在动画配置中指定 useNativeDriver: true 来使用原生驱动。

Animatable components

只有可动画组件才能进行动画。这个特殊的组件将动画值绑定到属性上，并且做目标原生更新，这样能避免react对每一帧进行渲染和调和过程(reconciliation process)的花销。它们也会在unmount时做清理工作因此它们默认是安全的。

• createAnimatedComponent() 可以用于使一个组件animatable

Animated库使用上面的方法导出了下列可动画的组件：

• Animated.View
• Animated.ScrollView
• Animated.Text
• Animated.Image

Composing animations

动画可以结合复合函数组成复杂的动画：

• Animated.delay() 在给定的delay之后开始动画
• Animated.parallel() 同时开始多个动画
• Animated.sequence() 按顺序开始动画，下一个动画在上一个动画结束之后开始
• Animated.stagger() 按顺序和并行的开始动画，每个动画都给一个delay

动画可以连接起来(chain together),通过简单的设置一个动画的 toValue值成为另一个动画的 Animated.Value值， 详情见 tracking dynamic values.

默认情况下，如果一个动画停止或者被终止，则动画组中的所有其它动画都会停止

combining animated values

可以通过 addition | multiplication | division | modulo 将2个动画值结合成一个新的动画值

• Animated.add()
• Animated.divide()
• Animated.modulo()
• Animated.multiply()

Interpolation

interpolation() 方法允许输入范围映射为不同的输出范围。默认情况，它会根据给定输入范围外扩输出曲线，但是也可以压缩输出曲线。默认使用线性插值，但是也支持缓动函数

• interpolate()

Handling gestures and other events

像panning或者 scrolling手势 和其它时间能够通过 Animated.event 直接映射为动画值。这是通过结构性的映射语法完成的，因此值能够从复杂的event 对象中提取出来。第一级是一个允许通过多个args映射的数组，这个数组包含嵌套的对象

• Animated.event()

例如，当处理水平scrolling手势，你可能像下面那样做，为了将 event.nativeEvent.contentOffset.x 映射为 scrollX(一个Animated.Value)

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

Reference

Methods

decay()

static decay(value, config)

将一个value基于衰减系数从初始速度动画到0

config是一个下列options的对象：

• velocity: 初始速度, Required
• deceleration: 衰减率，默认 0.997
• isInteraction: 是否这个动画在 InteractionManager中创建一个 'interaction handle',默认是 true
• useNativeDriver: 使用原生driver 默认是false

timing()

static timing(value, config)

随着easing曲线改变动画值。Easing 模块有很多预定义的曲线，你也可以自定义函数。

config也是一个对象：

• duration: 动画时间，默认为500 （ms）
• easing: 缓动函数，默认是 Easing.inOut(Easing.ease)
• delay: 开始动画前的延迟，默认是0
• isInteraction: 是否这个动画在 InteractionManager中创建一个 'interaction handle',默认是 true
• useNativeDriver: 使用原生driver 默认是false

spring()

static spring(value, config)

根据一种基于阻尼谐振的分析弹簧模型，对其进行赋值。

主要使用方法：

• Animated.spring(value: Animated.Value | Animated.ValueXY, config: SpringAnimationConfig): Animated.CompositeAnimation

其中 config 有如下选项：

• friction: 控制反弹力或者超过部分，默认值是 7
• tension： 控制速度，默认是 40
• speed: 控制动画的速度，默认值是 12
• bounciness: 控制反弹力，默认值是 8

指定 刚度/阻尼/质量(sniffness/damping/mass) 传入 Animated.spring 函数config中,将使动画采用基于阻尼谐振子运动方程的解析弹簧模型

• stiffness: 弹簧刚度系数，默认值是 100
• damping: 定义弹簧的运动是如何因摩擦力(frication)而阻尼的，默认值是 10
• mass: 附着在弹簧末端的物体质量，默认值是 1

注意你只能定义其中的一组数据，例如定义了 '反弹力和速度'， 其余的2组则不能再定义了：

• bounciness/speed: 反弹力和速度
• tension/friction：张力和摩擦力
• stiffness/damping/mass：刚度，阻尼和质量

其余的配置选项：

• velocity: 附着在弹簧末端物体的初始速度，默认值是0，即物体没有运动
• overshootClamping: 表示弹簧是否应该是压缩状态而非舒展状态，默认值是false
• restDisplacementThreshold: 在静止时(at rest)位移阈值,默认值是 0.001
• restSpeedThreshold: 静止时应考虑弹簧的速度，单位为 pixel/second, 默认值是 0.001
• delay: 动画开始前延迟时间，单位ms,默认值是0
• isInteraction: 是否这个动画在InteractionManager上创建一个 'interaction handle'，默认是true
• useNativeDriver: 是否使用原生驱动，默认false

add()

static add(a, b)

将2个动画值加在一起组合创建一个新的动画值

divide()

static divide(a, b)

第1个动画值减去第2个动画值组合创建一个新的动画值

multiply()

static multiply(a, b)

将2个动画值相乘在一起组合创建一个新的动画值

modulo()

static modulo(a, modulus)

将动画值取模创建一个新的动画值

diffClamp()

static diffClamp(a, min, max)

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

这在scroll events中有用，比如，在向上滚动时显示navbar，在向下滚动时隐藏navbar

loop()

static loop(animation)

连续的循环一个给定的动画，因此每次到达最后之后再从头开始。能够通过 iterations 指定循环的次数。如果子动画设置了 useNativeDriver: true将不会影响UI线程。另外，loops将阻止那些基于 VirtualizedList的组件在动画运行时渲染更多的行，可以通过在子动画config中设置isInteraction: false来修复这个问题

event()

static event(argMapping, config?)

接收映射数组，从每个arg依次的提取值，然后对映射的结果调用 setValue方法

onScroll= {Animated.event(
    [{nativeEvent: {contentOffset: {x: this._scrollX}}}],
    {listener: (event)=> console.log(event)} // 可选的异步listener
)}

...
onPanResponderMove: Animated.event([
   null,                // raw event arg ignored
   {dx: this._panX}],    // gestureState arg
{listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener
 ),

forkEvent()

static forkEvent(event, listener)

高级命令式API，用于监听传入props的动画事件。尽量直接使用values

unforkEvent()

static forkEvent(event, listener)

取消监听