动画体系知识梳理(1) 转场动画 ContentTransition 理论篇

泽毛
622 阅读10分钟

一、概述

在Android 5.0当中，Google基于Android 4.4中的Transition框架引入了转场动画，设计转场动画的目的，在于让Activity之间或者Fragment之间的切换更加自然，其根本原因在于界面间切换时的动画不再是以Activity或者Fragment的整个布局作为切换时动画的执行单元，而是将动画的执行单元细分到了View。目前提供的转场动画分为两种：

  • Content Transition：用于两个界面之间非共享的View。
  • Shared Element Transition：用于两个界面之间需要共享的View。

二、什么是Transition

2.1 Transition的基本概念

在学习Content Transition之前，我们先对转场动画所依赖的Transition框架做一个简要的介绍，这个框架是围绕着两个概念**Scene（场景）和Transition（变换）**来建立的，在后面我们会多次提到它：

  • 场景（Scene）：表示UI所对应的状态，一般来说，会有两个场景：起点场景和终点场景，在这两个场景当中，UI有可能会有不同的状态。在上图当中，SceneA和SceneB就是两个不同的场景，ViewA在两个场景中对应的状态分别为VISIBLE和INVISIBLE。
  • 变换（Transition）：用来定义两个场景之间切换的规则，当场景发生发生变换时，Transition需要做的有两点：
  • 确定View在起点场景和终点场景的状态。
  • 创建View从终点场景切换到终点场景所需的Animator。

2.2 Transition的简单例子

下面，我们通过一个简单的例子，对上面的概念有一个直观的感受：

public class ExampleActivity extends Activity implements View.OnClickListener {
    private ViewGroup mRootView;
    private View mRedBox, mGreenBox, mBlueBox, mBlackBox;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRootView = (ViewGroup) findViewById(R.id.layout_root_view);
        mRootView.setOnClickListener(this);

        mRedBox = findViewById(R.id.red_box);
        mGreenBox = findViewById(R.id.green_box);
        mBlueBox = findViewById(R.id.blue_box);
        mBlackBox = findViewById(R.id.black_box);
    }

    @Override
    public void onClick(View v) {
        TransitionManager.beginDelayedTransition(mRootView, new Fade());
        toggleVisibility(mRedBox, mGreenBox, mBlueBox, mBlackBox);
    }

    private static void toggleVisibility(View... views) {
        for (View view : views) {
            boolean isVisible = view.getVisibility() == View.VISIBLE;
            view.setVisibility(isVisible ? View.INVISIBLE : View.VISIBLE);
        }
    }
}
  • 第一步：通过beginDelayedTranstion传入场景对应布局的根节点（mRootView）以及场景变换的规则（Fade），此时系统理解调用Transition的captureStartValues方法，来确定场景当中所有子View的visibility。
  • 第二步：当beginDeleyedTransition返回后，我们将子View设置为不可见。
  • 第三步：在下一帧，系统调用Transtion的captureEndValues()方法获取场景当中所有子View的可见性。
  • 第四步：这时候系统发现在起始场景中View是VISIBLE的，而在终点场景中它变为了INVISIBLE，那么Fade Transition就会根据这些信息创建并返回AnimatorSet，用它来将那些发生变化的View的alpha值渐变为0，而不是直接设为不可见。
  • 第五步：系统启动这个Animator，使得这些View慢慢隐藏。

2.3 Transition小结

我们可以总结出Transition的两个特点：

  • Animator对于开发者而言是抽象的，开发者设置View的起始值和最终值，Transition会根据这两者的差异，自动地创建切换的Animator。
  • 可以随时通过替换Transition来改变切换的规则。

三、Content Transition基本概念

3.1 旧的界面切换动画

回忆一下，在5.0之前：

  • 给Activity之间的切换添加动画，在启动Activity的地方加上overridePendingTransition
  • 给Fragment之间的切换添加动画，通过FragmentTransation的setCustomAnimation。

这两种方式都有一个共同的特点，那就是它们都是将Activity所在的窗口或Fragment所对应的布局作为切换动画的执行单元。

3.2 新的界面切换动画

在新的切换方式当中，可以将布局中的每个View作为切换的执行单元，我们以Activity之间的切换为例。

3.2.1 启动BActivity

在AActivity启动中BActivity，这时候就会涉及到四种Scene和两种Transition：

  • AActivity's Exit Transition：它定义了AActivity中的元素如何从VISIBLE（起点场景）变为INVISIBLE（终点场景）。
  • BActivity's Enter Transition：它定义了BActivity中的元素如果从INVISIBLE（起点场景）变为VISIBLE（终点场景）。

3.2.1.1 确定需要执行Transition的View

整个Transition的第一步，就是先要确定当前界面中需要执行Transition的动画切换单元，这一过程是通过对整个View树进行递归调用得到的，而递归的逻辑在ViewGroup当中：

public void captureTransitioningViews(List<View> transitioningViews) {
        if (getVisibility() != View.VISIBLE) {
            return;
        }
        if (isTransitionGroup()) {
            transitioningViews.add(this);
        } else {
            int count = getChildCount();
            for (int i = 0; i < count; i++) {
                View child = getChildAt(i);
                child.captureTransitioningViews(transitioningViews);
            }
        }
}

而在View中，该方法为：

public void captureTransitioningViews(List<View> transitioningViews) {
        if (getVisibility() == View.VISIBLE) {
            transitioningViews.add(this);
        }
}

由此可见，所有需要变换的ViewGroup/View都保存在transitioningViews当中，关于这个集合的构成依据以下三点：

  • 节点不可见，那么它以及它的所有子节点都不加入集合。
  • 节点的isTransitionGroup()标志位为true，那么把它和它的所有子节点当成一个变换单元加入到集合当中。
  • 除了以上两种情况，那么View树的所有叶子节点都加入到集合当中。

其中isTransitionGroup()的值我们可以通过setTransitionGroup(boolean flag)来改变，如果在场景当中用到了WebView，而我们希望将它作为一个整体进行变换，那么应当加上这个标志位。 除了系统默认的遍历，我们还可以通过Transition的added和excluded来改变这个集合。

3.2.1.2 Exit Transition的执行过程

下面，我们以AActivity的Exit Transition为例，描述一下它整个的执行过程：

  • 第一步：系统遍历AActivity的View树，并决定在exit transition运行时需要变换的View，把它们放在集合当中，也就是我们在3.2.1.1中所说的transitionViews。
  • 第二步：AActivity的Exit Transition获取集合中View的起始状态，调用的是captureStartValues方法。
  • 第三步：将集合中的View设为INVISIBLE。
  • 第四步：在下一帧时，Exit Transition获取集合中View的终点状态，调用的是captureEndValues方法。
  • 第五步：Exit Transition根据第二步中的起始状态和终点状态，创建一个Animator，并执行这个Animator，由于是从VISIBLE变为INVISIBLE，因此，是通过onDisappear方法得到Animator。

3.2.1.3 Enter Transition的执行过程。

BActivity的Enter Transition和AActvity的Exit Transition类似，只不过第三步操作是从INVISIBLE到VISIBLE。

3.2.2 从BActivity返回

而当我们从BActivity返回到AActivity，那么就会涉及到下面四种Scene和两种Transition：

  • BActivity's Return Transition
  • AActivity's Reenter Transition

其原理和上面是相同的，就不多介绍了。

3.2.3 小结

无论是AActivity启动BActivity，还是BActivity返回到AActivity，当View的可见性不断切换的时候，系统能保证根据状态信息来创建所需的动画。很显然，所有的Content transition对象都需要能够捕捉并记录View的起始状态和终点状态，幸运的是，抽象类Visiblity已经帮我们做了，我们只需要实现onAppear和onDisappear方法，在里面创建一个Animator来定义进入和退出场景的View的动画，系统默认提供了三种Transition - Fade、Slide、Explode，下面我们在分析Fade源码的时候，会详细解释这一过程。

3.3 Content Transition和Shared Element Transition

在上面的讨论当中，我们是从切换的角度来考虑的，而如果我们从Transition的角度来看，那么每个Transition又可以细分为两类：

  • content transitions：定义了Activity非共享View进入和退出场景的方式。
  • shared element transitions：定义了Acitivity共享View进入和退出场景的方法。

3.4 例子

下面，我们以一个视频来解释一下上面谈到的四个Transition：

在这个视频当中，我们将列表页称为AActivity，详情页称为BActivity，此时，对应于上面提到的四种Transition：

  • AActivity's Exit Transition为null
  • AActivity's Reenter Transition为null
  • BActivity's Enter Transition则分为三个部分：
  • 封面从小的圆形渐渐变成大的方形
  • 播放图标的半径渐渐变大
  • 底下的列表采用了自定义的Slide-in动画。
  • BActivity's Exit Transition：
  • 上半部分采用了Slide(TOP)的方式，而下半部分采用Slide(BOTTOM)的方式。

四、源码分析

系统默认自带了三种Transition，Fade、Slide、Explode，这一节，我们一起来分析一下它们的实现方式：

4.1 Fade

4.1.1 captureXXX函数

首先，我们看一下它获取起点和终点属性的函数：

  • public void captureStartValues(TransitionValues transitionValues)
  • public void captureEndValues(TransitionValues transitionValues)

Fade只重写了captureStartValues，在这里面，它把View当前的translationAlpha值保存起来，这个值表示的是在Transition开始之前View的translationAlpha的值：

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        super.captureStartValues(transitionValues);
        transitionValues.values.put(PROPNAME_TRANSITION_ALPHA, transitionValues.view.getTransitionAlpha());
    }

4.1.2 onAppear和onDisappear

在上面的分析当中，我们提到过，当View的可见性从INVISIBLE变为VISIBLE时会调用Transition中的Animator来执行这一变换的过程，例如从AActivity跳转到BActivity，那么BActivity中的View就会调用onAppear所返回的Animator：

    @Override
    public Animator onAppear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
        float startAlpha = getStartAlpha(startValues, 0);
        if (startAlpha == 1) {
            startAlpha = 0;
        }
        return createAnimation(view, startAlpha, 1);
    }

这里首先会通过getStartAlpha去获取起始的transitionAlpha值，它是把之前保存在PROPNAME_TRANSITION_ALPHA中的值取出来：

    private static float getStartAlpha(TransitionValues startValues, float fallbackValue) {
        float startAlpha = fallbackValue;
        if (startValues != null) {
            Float startAlphaFloat = (Float) startValues.values.get(PROPNAME_TRANSITION_ALPHA);
            if (startAlphaFloat != null) {
                startAlpha = startAlphaFloat;
            }
        }
        return startAlpha;
    }

下面，我们再回到onAppear函数当中，看一下Animator的创建过程：

    private Animator createAnimation(final View view, float startAlpha, final float endAlpha) {
        if (startAlpha == endAlpha) {
            return null;
        }
        view.setTransitionAlpha(startAlpha);
        final ObjectAnimator anim = ObjectAnimator.ofFloat(view, "transitionAlpha", endAlpha);
        final FadeAnimatorListener listener = new FadeAnimatorListener(view);
        anim.addListener(listener);
        addListener(new TransitionListenerAdapter() {
            @Override
            public void onTransitionEnd(Transition transition) {
                view.setTransitionAlpha(1);
            }
        });
        return anim;
    }

从上面可以看出，它返回的是一个ObjectAnimator，这个Animator会把View的translationAlpha从startAlpha变为1，这也就是一个渐渐显示的过程。 再看一下onDisappear函数，它就是onAppear的反向过程：

    @Override
    public Animator onDisappear(ViewGroup sceneRoot, final View view, TransitionValues startValues,
            TransitionValues endValues) {
        float startAlpha = getStartAlpha(startValues, 1);
        return createAnimation(view, startAlpha, 0);
    }

4.2 Slide

下面，我们来看一下另一种Transition - Slide的实现原理，和上面类似，我们先看一下captureXXX方都做了什么：

4.2.1 captureXXX

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        super.captureStartValues(transitionValues);
        captureValues(transitionValues);
    }

    @Override
    public void captureEndValues(TransitionValues transitionValues) {
        super.captureEndValues(transitionValues);
        captureValues(transitionValues);
    }

对于起点和终点值的获取都是调用了下面这个函数，它保存的是View在窗口中的位置：

private void captureValues(TransitionValues transitionValues) {
    View view = transitionValues.view;
    int[] position = new int[2];
    view.getLocationOnScreen(position);
    transitionValues.values.put(PROPNAME_SCREEN_POSITION, position);
}

4.2.2 onAppear和onDisappear

    @Override
    public Animator onAppear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
        if (endValues == null) {
            return null;
        }
        int[] position = (int[]) endValues.values.get(PROPNAME_SCREEN_POSITION);
        //终点值是确定的
        float endX = view.getTranslationX();
        float endY = view.getTranslationY();
        //起点值则需要根据所选的模式来确定
        float startX = mSlideCalculator.getGoneX(sceneRoot, view, mSlideFraction);
        float startY = mSlideCalculator.getGoneY(sceneRoot, view, mSlideFraction);
        //根据起点值、终点值、View所处窗口的位置，来得到一个`Animator`
        return TranslationAnimationCreator.createAnimation(view, endValues, position[0], position[1], startX, startY, endX, endY, sDecelerate, this);
    }

这里面，最关键的是mSlideCalculator，默认情况下为：

    private static final CalculateSlide sCalculateBottom = new CalculateSlideVertical() {
        @Override
        public float getGoneY(ViewGroup sceneRoot, View view, float fraction) {
            return view.getTranslationY() + sceneRoot.getHeight() * fraction;
        }
    };

用一张图解解释一下上面的坐标：

所以当我们采用这个Transition的时候，就可以看到它从屏幕的底端滑上来。 而onDisappear则也是一个反向的过程：

    @Override
    public Animator onDisappear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
        if (startValues == null) {
            return null;
        }
        int[] position = (int[]) startValues.values.get(PROPNAME_SCREEN_POSITION);
        //这里的起始值和终点值正好是和onAppear相反的.
        float startX = view.getTranslationX();
        float startY = view.getTranslationY();
        float endX = mSlideCalculator.getGoneX(sceneRoot, view, mSlideFraction);
        float endY = mSlideCalculator.getGoneY(sceneRoot, view, mSlideFraction);
        return TranslationAnimationCreator.createAnimation(view, startValues, position[0], position[1], startX, startY, endX, endY, sAccelerate, this);
    }

4.3 小结

通过分析Fade和Slide的源码，它们的主要思想就是：

  • 在capturexxx方法中，把属性保存在TranslationValues中，这里，一定要记得调用对应的super方法让系统保存一些默认的状态。
  • 在onAppear和onDisappear中，根据起点和终点和终点的TranslationValues，构造一个改变View属性的Animator，同时在动画结束之后，还原它的属性。

五、总结

这一篇我们分析了Content Transition的设计思想和原理，下一篇文章我们将着重讨论如何通过代码来实现上面的效果。

六、参考文献

1.Getting Started with Activity & Fragment Transitions (part 1) 2.Content Transitions In-Depth (part 2) 3.Material-Animations

avatar
文章
阅读
粉丝