动画合集

创建动画合集参数

点击查看源码

this.$refs.animation_view.animatorSet(
    'SequentiallyAnimatorsId',  //动画合集的id
    -1,                         //动画合集执行的时长
    false                       //是否监听动画合集执行状态
);

• 动画合集的id

动画合集通过自定义的动画id执行所有的操作。

• 动画合集执行的时长

  Sets the length of each of the current child animations of this AnimatorSet. By default, each child animation will use its own duration. If the duration is set on the AnimatorSet, then each child animation inherits this duration.

• 监听动画合集执行状态

点我查看动画监听

顺序执行

效果预览

第1步：创建动画合集

点击查看源码

//动画合集的id为：SequentiallyAnimatorsId
this.$refs.animation_view.animatorSet('SequentiallyAnimatorsId', -1, false);

第2步：创建动画并加入到动画合集

点击查看源码

this.$refs.animation_view.objectAnimator2('AlphaAnimationId', ...);
this.$refs.animation_view.objectAnimator2('ScaleAnimationId', ...);
this.$refs.animation_view.objectAnimator2('RotationAnimationId', ...);
this.$refs.animation_view.objectAnimator2('TranslationAnimationId', ...);

//playSequentially4
this.$refs.animation_view.playSequentially4(
    //动画合集的id
    'SequentiallyAnimatorsId',
    //动画的id
    "AlphaAnimationId",
    "ScaleAnimationId",
    "RotationAnimationId",
    "TranslationAnimationId",
);

第3步：执行动画合集

点击查看源码

this.$refs.animation_view.startAnimator('SequentiallyAnimatorsId');

并行执行

效果预览

第1步：创建动画合集

点击查看源码

//动画合集的id为：TogetherAnimatorsId
this.$refs.animation_view.animatorSet('TogetherAnimatorsId', -1, false);

第2步：创建动画并加入到动画合集

点击查看源码

this.$refs.animation_view.objectAnimator2('AlphaAnimationId', ...);
this.$refs.animation_view.objectAnimator2('ScaleAnimationId', ...);
this.$refs.animation_view.objectAnimator2('RotationAnimationId', ...);
this.$refs.animation_view.objectAnimator2('TranslationAnimationId', ...);

//playTogether4
this.$refs.animation_view.playTogether4(
    //动画合集的id
    'TogetherAnimatorsId',
    //动画的id
    "AlphaAnimationId",
    "ScaleAnimationId",
    "RotationAnimationId",
    "TranslationAnimationId",
);

第3步：执行动画合集

点击查看源码

this.$refs.animation_view.startAnimator('TogetherAnimatorsId');

with

效果预览

第1步：创建动画合集

点击查看源码

//动画合集的id为：WithAnimatorsId
this.$refs.animation_view.animatorSet('WithAnimatorsId', -1, false);

第2步：创建动画并加入到动画合集

点击查看源码

this.$refs.animation_view.objectAnimator2('AlphaAnimationId', ...);
this.$refs.animation_view.objectAnimator2('ScaleAnimationId', ...);

//AlphaAnimationId
this.$refs.animation_view.play(
        'WithAnimatorsId',
        "AlphaAnimationId",
      );
//ScaleAnimationId
this.$refs.animation_view.with(
        'WithAnimatorsId',
        "ScaleAnimationId",
      );

第3步：执行动画合集

点击查看源码

this.$refs.animation_view.startAnimator('WithAnimatorsId');

before

效果预览

第1步：创建动画合集

点击查看源码

//动画合集的id为：BeforeAnimatorsId
this.$refs.animation_view.animatorSet('BeforeAnimatorsId', -1, false);

第2步：创建动画并加入到动画合集

点击查看源码

this.$refs.animation_view.objectAnimator2('AlphaAnimationId', ...);
this.$refs.animation_view.objectAnimator2('ScaleAnimationId', ...);

//AlphaAnimationId
this.$refs.animation_view.play(
        'BeforeAnimatorsId',
        "AlphaAnimationId",
      );
//ScaleAnimationId
this.$refs.animation_view.before(
        'BeforeAnimatorsId',
        "ScaleAnimationId",
      );

第3步：执行动画合集

点击查看源码

this.$refs.animation_view.startAnimator('BeforeAnimatorsId');

after

效果预览

第1步：创建动画合集

点击查看源码

//动画合集的id为：AfterAnimatorsId
this.$refs.animation_view.animatorSet('AfterAnimatorsId', -1, false);

第2步：创建动画并加入到动画合集

点击查看源码

this.$refs.animation_view.objectAnimator2('AlphaAnimationId', ...);
this.$refs.animation_view.objectAnimator2('ScaleAnimationId', ...);

//AlphaAnimationId
this.$refs.animation_view.play(
        'AfterAnimatorsId',
        "AlphaAnimationId",
      );
//ScaleAnimationId
this.$refs.animation_view.after(
        'AfterAnimatorsId',
        "ScaleAnimationId",
      );

第3步：执行动画合集

点击查看源码

this.$refs.animation_view.startAnimator('AfterAnimatorsId');