Inerpolation

插值器是实现完美动画的关键。有很多种设置插值器的方法，我们会覆盖的尽可能广。

我们可以使用插值器绑定到Aniamted.Values上，来控制基于这个值的输出，从而产生不同的动画。比如，用户拖动一个卡片的时候，你可以使用插值器处理Animated.Value，改变这个卡片的背景色或者让这个卡片产生旋转。当然还可以实现缩放的效果。设置适当的inputRange及其对应的outputRange也会对动画产生影响。

比如，你想让透明度和拖动关联起来。你可以这样：

this._animatedValue = new Animated.ValueXY();

this._opacityAnimation = this._animatedValue.x.interpolate({
    inputRange: [0, 150],
    outputRange: [1, .2]
});

this._opacityAnimation和Animated.Value一样，也可以使用在任意Animated.View里，或者支持动画的组件里。上面的例子做了什么呢。它让用户在拖动的过程中在X轴上位置的变化对应到透明度的值上。X轴的位置0到150，对应到透明度的1到0.2。所以，当x轴的位置为0的时候，透明度就是1，当x的值为75的时候透明度为0.4。

你也许会问了，如果用户拖动的距离在x轴上大于150呢？有些人会觉得透明度会保持在0.2上不再改变。这并不是默认的情况。

你必须指定插值器如何处理这种情况。如果你想让透明度停留在0.2上，不管X轴的距离超出了多少，那么就指定extrapolate:'clamp'，具体是这样的：

this._opacityAnimation = this._animatedValue.x.interpolate({
    inputRange: [0, 150],
    outputRange: [1, .2],
    extrapolate: 'clamp'
});

clamp非常重要，你不需要附加多余动画的时候就需要clamp出场了。

另外，你必须保证inputRange和outputRagne中的元素数量是一致的。

Extrapolate

我们在上面已经聊过插值器的推断（extrapolate）如何使用了。它还有其他的一些选项。包括clamp，还有identity和extend.extend是默认值，也就是在动画超出了iputRange的最终值后插值器会继续解析。

type ExtrapolateType = 'extend' | 'identity' | 'clamp';

extrapolate?: ExtrapolateType;
extrapolateLeft?: ExtrapolateType;
extrapolateRight?: ExtrapolateType;

extrapolate之外还有其他的很多。比如处理从左到右的动画，或者是从右到左的动画。

Clamp和Extend

先看一个例子：

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

var scaleAndFlipOnReverse = this._animatedValue.y.interpolate({
  inputRange: [0, deviceHeight],
  outputRange: [.1, 2],
  extrapolateLeft: 'extend',
  extrapolateRight: 'clamp'
});

<Animated.View style={{transform: [{scale: scaleAndFlipOnReverse}]}} />

假设用户在拖动一个方框，如果这个方框从0到100移动，然后方框从0.1方法到2，最后停止。接着如果我们反方向拖动方框从100到0，并且还继续拖动到出现负值。那么方框会一直缩小，到位置值出现负值的时候方框会产生翻转。也就是extrapolateRight: 'clamp'从左往右的滑动，超出最大值的时候动画停止。extrapolateLeft: 'extend'从右往左滑，在超出最大值的时候插值器会继续推断，动画继续运行。