Animated.sequence

使用sequence可以把多个动画组织起来,然他们依次顺序执行。

动画1 -> 动画2 -> 动画3 ->动画4 -> 动画5
this._opacityAnimationValue = new Animated.Value(1);
this._moveAnimationValue = new Animated.ValueXY();


Animated.sequence([
    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()}} />

例子中有两个动画。一个控制透明度,另一个移动一定距离。

第一个动画会把view从{x: 0, y: 0}移动到{x: 100, y: 100}。然后第二个动画开始执行,透明度从1逐步变为0。

results matching ""

    No results matching ""