setValue
setValue
是new Animated.Value(0)
实例上的一个方法。调用这个方法可以从外部修改这个实例内部的值。但是,掉用这个方法之后,之前正在执行的动画将被结束,从新的值开始执行动画。同时,更新全部相关的属性。
比如:
this._animatedValue = new Animated.Value(0);
<Animated.View style={{left: this._animatedValue}} />
this._animatedValue.setValue(150);
动画Animated.View
会直接从左边距为0的位置跳到左边距为150的地方。
有些需要注意的,如果动画使用了interpolate(插值器)。这样的操作发生的时候,interpolate会计算出正确的值但是不会再动画里展现出来。
比如:
this._animatedValue = new Animated.Value(0);
var _backgroundColor = this._animatedValue.interpolate({
inputRange: [0, 150],
outputRange: ['rgba(255,255,255,1)', 'rgba(0,0,0,1)']
});
<Animated.View style={{left: this._animatedValue, backgroundColor: _backgroundColor}} />
this._animatedValue.setValue(150);
这样会使Animated.View的backgroundColor直接从白色变成黑色,其他动画方法会从白色变成灰色,并最终变成黑色。