Animated.stagger

parallel类似,也是使一组动画同时运行。但是,稍有一点不同的是这些动画之间开始时间依次会有一定的延迟。

this._opacityAnimationValue = new Animated.Value(1);
this._moveAnimationValue = new Animated.ValueXY();


Animated.stagger(100, [
    Animated.timing(this._moveAnimationValue, {
        toValue: 100,
        duration: 500
    }),
    Animated.timing(this._opacityAnimationValue, {
        toValue: 0,
        duration: 200
    })
]).start()

<Animated.View style={{opacity: this._opacityAnimationValue, transform: this._moveAnimationValue.getTranslateTransform()}} />

首先开始位移动画,在一定的延迟(约100毫秒)之后开始透明度动画。

results matching ""

    No results matching ""