处理值缩放

使用“缩放”这个词可能会让人误解，此缩放非彼缩放。这里说的缩放是指inputRange到outputRange输入值和输出值之间的缩放。

放大

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

this._animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100],
});

输入值是0到1，输出值是0到100.

如果有一个动画的值是从0到1，需要耗费一秒钟的事件，那么每100毫秒运行的动画值是10.

Animated.timing(this._animatedValue, {
    toValue: 1,
    duration: 1000
})

输出值为：

input: 0 => 0ms => output: 0
input: .1 => 100ms => output: 10
input: .2 => 200ms => output: 20
input: .3 => 300ms => output: 30
....
input: 1 => 1000ms => output: 100

缩小

上面的例子反过来一样成立：

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

this._animatedValue.interpolate({
  inputRange: [0, 100],
  outputRange: [0, 1],
});

我们来看看输出值是怎么变小的：

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

input: 0 => 0ms => output: 0
input: 10 => 100ms => output: .1
input: 20 => 200ms => output: .2
input: 30 => 300ms => output: .3
....
input: 100 => 1000ms => output: 1

可大可小

其实插值器可以把任意的输入值转化为任意的输出值。位移需要注意的地方是inputRange是升序的，outputRange和inputRange的值数量一致。

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

this._animatedValue.interpolate({
  inputRange: [0, 30, 50, 80, 100],
  outputRange: [0, -30, -50, 0, 200],
});

上面的设置如果放在一个执行一秒的动画里会发生什么呢。

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

• 首先我们得到的是反转输出0=>0, 30=>-30在前300毫秒之后是50=>-50在500毫秒的时候。
• 然后在800毫秒的时候立即从-50转化成0。
• 最终从0到200.