官方动画文档

作者: JamesSawyer | 来源:发表于2018-04-06 01:31 被阅读106次

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)

取消监听