Animated.timing

使用Animated的timing方法，我们可以定义一个消耗一定时间来完成的动画。这类动画非常普遍，比如你要在一定的事件里移动一个组件一定的距离。

如：

this._animatedValue = new Animated.Value(0);

Animated.timing(this._animatedValue, {
    toValue: 100,
    duration: 500
}).start()

这样在动画执行的过程中_animatedValue的值就会从 0 到 100，消耗的事件是500毫秒。

Animated.timing方法还可以接受另外的两个参数：easing和delay。delay看字面就知道是什么意思了，动画会在一定毫秒为单位的时间的延迟之后触发：

this._animatedValue = new Animated.Value(0);

Animated.timing(this._animatedValue, {
    toValue: 100,
    delay: 300,
    duration: 500
}).start()

这个动画会在300毫秒的延迟之后触发。

easing参数的默认值是easeInOut。但是easeInOut并不是一个美剧之类的选项，而是这么定义的：let easeInOut = Easing.inOut(Easing.ease);

要访问全套系统定义的easing，可以从react-native中引入Easing模块。

import {Easing} from 'react-native';

具体的使用方法：

import {Easing, Animated} from 'react-native';

this._animatedValue = new Animated.Value(0);

Animated.timing(this._animatedValue, {
    toValue: 100,
    easing: Easing.linear,
    duration: 500
}).start()

Animated.timing(this._animatedValue, {
    toValue: 100,
    easing: Easing.elastic(2), // Springy
    duration: 500
}).start()

Animated.timing(this._animatedValue, {
    toValue: 100,
    easing: Easing.bounce, // Like a ball
    duration: 500
}).start()