setValue

setValuenew 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直接从白色变成黑色,其他动画方法会从白色变成灰色,并最终变成黑色。

results matching ""

    No results matching ""