HollyTransition

零、导读

深入解读Android过渡动画Transition:

页面切换动画(过场动画)
共享元素动画
延时动画
场景动画

一、Transition前世今生

为了支持各种交互视觉设计的不断更新，Android对于开发者提供了越来越多的动画API支持。从API 1就存在的Drawable Animation和View Animation，以及API 11(Android 3.0)以后加入的Property Animation。而过渡动画Transition是在API 19(Android 4.4.2)中加入的。说道炫酷的动画，很多人首先想到的是Android5.0开发流行起来的共享元素动画。然而共享元素动画只是Transition的冰山一角。今天就让我们来一一揭开。

二、为什么要引入Transition

那为什么要引入Transition动画呢？由于在Android引入了Metrial Desigon之后，动画的场面越来越大，比如以前我们制作一个动画可能涉及到的View就一个，或者就那么几个，如果我们一个动画中涉及到了当前Activity视图树中的各个View，那么情况就复杂了。比如我们要一次针对视图树中的10个View进行动画，这些View的效果都不同，可能有的是平移，有的是旋转，有的是淡入淡出，那么不管是使用之前哪种方式的动画，我们都需要为每个View定义一个开始状态和结束状态【关键帧，比如放缩，我们得设置fromXScale和toXScale 】，随着View个数的增加，这个情况会越来越复杂。这个时候如果使用一堆Animator去实现这一连串动画，代码将会又臭又长，Transition的出现大大减轻了开发的工作。

三、页面切换动画(过场动画)

以前使用过场动画时，实现共享元素，主要是使用Activity，但是有遇到很多坑：比如最严重的一个是在某些机型上出现做返场动画时，第二个页面的画面还残留在页面上；第二个问题是，在存在虚拟导航栏的手机上，由于不同Activity是在不同的Window上绘制的，在Activity切换时界面存在闪烁的情况。而Fragment的切换则不存在这样的问题。综合考虑，决定使用Fragment。

示例图1：入场动画

示例图2：返场动画

三(1)、共享元素动画

如上图中 画廊按钮、拍摄按钮、设置按钮 ;页面切换时，对共享元素动画来讲，重要的函数有以下几个。共享元素执行的动画主要是针对将要进入的页面的。一个是入场动画 EnterTransition,另一个是返场 ReturnTransition。在做共享元素动画时，需要在前后两个页面对共享元素设定TransitionName，且对应的两个View，TransitionName需要相同。

//在第二个页面(即要进入的那个页面)设置共享元素TransitionName  ViewCompat可兼容5.0以下版本，不报错
ViewCompat.setTransitionName(mFakeLeft, SHARE_NAME_LEFT);
ViewCompat.setTransitionName(mPhotoBtn, SHARE_NAME_MIDDLE);
ViewCompat.setTransitionName(mFakeRight, SHARE_NAME_RIGHT);

//设定入场动画和返场动画
fragment.setSharedElementEnterTransition(new ChangeBounds());
fragment.setSharedElementReturnTransition(new ChangeBounds());

//添加共享元素
FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.app_ctrl_view, fragment);
fragmentTransaction.addToBackStack(null);
if (shareViews != null && shareViews.length > 0) {
    for (Pair<View, String> shareView : shareViews) {
        fragmentTransaction.addSharedElement(shareView.first, shareView.second);
    }
}
fragmentTransaction.commit();

疑问：上图的共享元素是如何实现形变的过程中发生alpha变化的？

刚开始，准备直接使用 xml 定制动画，一个changeBounds(左中右三个按钮同时形变) + 一个 fade (左右按钮在形变的同时 fadeout),但是发现只有形变生效。于是尝试使用自定义ChangeBounds来改造共享元素动画，在createAnimator中拿到Animator，从而可以拿到Animator变化的过程 ValueAnimator.AnimatorUpdateListener,这样就可以实现形变的同时，发生alpha的变化。示例代码

// 改造需要了解Transition的三大核心方法如下。
@Override
public void captureStartValues(TransitionValues transitionValues) {
    super.captureStartValues(transitionValues);
    Log.d(TAG, "captureStartValues: transitionValues=" + transitionValues);
}

@Override
public void captureEndValues(TransitionValues transitionValues) {
    super.captureEndValues(transitionValues);
    Log.d(TAG, "captureEndValues: transitionValues=" + transitionValues);
}

@Override
public Animator createAnimator(ViewGroup sceneRoot, TransitionValues startValues, TransitionValues endValues) {
    return super.createAnimator(sceneRoot, startValues, endValues);
}

三(2)、内容动画

如上面图片中，设置页面的背景渐变、动起来 SlideUp、功能说明 SlideUp;拍摄页面的进度条封面 Slide Left&Right。这里所说的内容动画，指的是Fragment布局中除共享元素外的View执行的动画，主要是为了区分共享元素动画。对内容过场动画比较重要的几个函数,下面这种图比较形象地描述这个关系。Activity和Fragment的意思是一样的。这里以Activity的示意图来说明。

示例图3：入场动画对应关系

示例图4：返场动画对应关系

TransitionSet transitionSet=new TransitionSet();
//从 A Fragment 进入 B Fragment,A会执行 ExitTransition,B 会执行EnterTransition
fragment.setEnterTransition(transitionSet);
fragment.setExitTransition(transitionSet);
//按返回键时，B Fragment 会pop出栈，执行ReturnTransition，此时 A Fragment 重新回到栈顶，执行ReEnterTransition.
fragment.setReenterTransition(transitionSet);
fragment.setReturnTransition(transitionSet);

四、延时动画(TransitionManager.beginDelayedTransition)

四(1)、进度条平滑过渡

iOS进度条有个方法：- (void)setProgress:(float)progress animated:(BOOL)animated; 如果animated=true 那么，设置进度时，会从当前进度平滑过渡到目标进度，大大提升了用户体验。Android进度条并不具备这种功能，只能设定一个progress,控件就僵硬地跳到对应的位置。但是借助Transition，可实现这个功能。示例代码

示例图5：实现进度条平滑过渡

四(2)、放大缩小效果

示例图6：实现同一ViewGroup中两个View之间协调放大与缩小效果

四(3)、Slide与Fade组合动画

示例图7：从上滑入从下滑出并且渐入渐出

五、路径动画

路径动画在日常APP中使用的场景很多，比如京东、天猫添加商品至购物车的动画。实现起来非常简单。直接使用Transition.setPathMotion(new ArcMotion());然后结合延时动画TransitionManager.beginDelayedTransition()即可。

示例图片8：普通路径动画

示例图片9：路径动画在共享元素中的运用

六、源码解析

入场动画时，是直接拿着进入页面的View进行动画的，返场动画时，不直接拿着View进行动画，而是在Overlap上，创建与Targets对应的ImageView，然后截取Targets的画面，显示在ImageView上，返场动画主要是在Overlap上进行的。

    public Animator onDisappear(ViewGroup sceneRoot,
                                TransitionValues startValues, int startVisibility,
                                TransitionValues endValues, int endVisibility) {
        if ((mMode & MODE_OUT) != MODE_OUT) {
            return null;
        }

        View startView = (startValues != null) ? startValues.view : null;
        View endView = (endValues != null) ? endValues.view : null;
        /**
         * 说明几点：
         * #1 onDisappear方法位于android.transition.Visibility类中
         * #2 在返场动画时，场景中每个被添加进Transition的Target都会执行该方法
         * #3 这里定义了一个overlayView，先标记下，后面会用得到
         */
        View overlayView = null;
        View viewToKeep = null;
        if (endView == null || endView.getParent() == null) {
            if (endView != null) {
                // endView was removed from its parent - add it to the overlay
                overlayView = endView;
            } else if (startView != null) {
                // endView does not exist. Use startView only under certain
                // conditions, because placing a view in an overlay necessitates
                // it being removed from its current parent
                if (startView.getParent() == null) {
                    // no parent - safe to use
                    overlayView = startView;
                } else if (startView.getParent() instanceof View) {
                    /**
                     * 如果StartView存在父布局
                     */
                    View startParent = (View) startView.getParent();
                    TransitionValues startParentValues = getTransitionValues(startParent, true);
                    TransitionValues endParentValues = getMatchedTransitionValues(startParent,
                            true);
                    VisibilityInfo parentVisibilityInfo =
                            getVisibilityChangeInfo(startParentValues, endParentValues);
                    if (!parentVisibilityInfo.visibilityChange) {
                        /**
                         * 如果StartView父布局在动画过程中未参与Visibility变化的话，那么就会
                         * 创建一个ImageView，并将StartView 画布Canvas上的内容转换为Bitmap设置到新创建的ImageView上
                         */
                        overlayView = TransitionUtils.copyViewImage(sceneRoot, startView,
                                startParent);
                    } else if (startParent.getParent() == null) {
                        int id = startParent.getId();
                        if (id != View.NO_ID && sceneRoot.findViewById(id) != null
                                && mCanRemoveViews) {
                            // no parent, but its parent is unparented  but the parent
                            // hierarchy has been replaced by a new hierarchy with the same id
                            // and it is safe to un-parent startView
                            overlayView = startView;
                        }
                    }
                }
            }
        } else {
            // visibility change
            if (endVisibility == View.INVISIBLE) {
                viewToKeep = endView;
            } else {
                // Becoming GONE
                if (startView == endView) {
                    viewToKeep = endView;
                } else {
                    overlayView = startView;
                }
            }
        }
        final int finalVisibility = endVisibility;
        final ViewGroup finalSceneRoot = sceneRoot;

        if (overlayView != null) {
            // TODO: Need to do this for general case of adding to overlay
            int[] screenLoc = (int[]) startValues.values.get(PROPNAME_SCREEN_LOCATION);
            int screenX = screenLoc[0];
            int screenY = screenLoc[1];
            int[] loc = new int[2];
            sceneRoot.getLocationOnScreen(loc);
            overlayView.offsetLeftAndRight((screenX - loc[0]) - overlayView.getLeft());
            overlayView.offsetTopAndBottom((screenY - loc[1]) - overlayView.getTop());
            /**
             * 通过上面一系列的判断，最终会将得到的overlayView添加到 场景一（及A页面）根部局的Overlap上
             * 也就是说，其实在做返场动画时，所有的动画都是在 A页面的Overlap上进行的。做完动画再将其从Overlap上移除。
             * 这里的overlayView可能是 B页面的控件，也有可能是B页面控件的画面（new了一个ImageView的形式展示）
             * 什么是Overlap,可参考文章：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0130/2384.html
             */
            sceneRoot.getOverlay().add(overlayView);
            Animator animator = onDisappear(sceneRoot, overlayView, startValues, endValues);
            if (animator == null) {
                sceneRoot.getOverlay().remove(overlayView);
            } else {
                final View finalOverlayView = overlayView;
                addListener(new TransitionListenerAdapter() {
                    @Override
                    public void onTransitionEnd(Transition transition) {
                        finalSceneRoot.getOverlay().remove(finalOverlayView);
                    }
                });
            }
            return animator;
        }

        if (viewToKeep != null) {
            int originalVisibility = viewToKeep.getVisibility();
            viewToKeep.setTransitionVisibility(View.VISIBLE);
            Animator animator = onDisappear(sceneRoot, viewToKeep, startValues, endValues);
            if (animator != null) {
                DisappearListener disappearListener = new DisappearListener(viewToKeep,
                        finalVisibility, mSuppressLayout);
                animator.addListener(disappearListener);
                animator.addPauseListener(disappearListener);
                addListener(disappearListener);
            } else {
                viewToKeep.setTransitionVisibility(originalVisibility);
            }
            return animator;
        }
        return null;
    }

七、遇到的问题

Scene切换时会RemoveAllView 导致之前设置点击事件消失
退场动画时，会截取View的canvas，并在A页面rootview的overlap上添加ImageView,如果自定义控件有影响canvas的绘制过程，则添加到ImageView上的Bitmap可能不正确
共享元素必须是RootView的直接子View
做页面间的过渡动画时，两个页面尽量简单，比如加载网络图片时，可以先使用前一个页面的图片做动画，等动画做完后再去加载图片。不可以一边儿做动画，一边儿加载图片，会造成动画很闪烁。
Fragment设置TransitionOverlap无效，还需要研究下。

fragment.setAllowEnterTransitionOverlap(false);
fragment.setAllowReturnTransitionOverlap(false);

在Fragment中使用 共享元素动画 时，需要两个Fragment基于同一个layout_id,然后通过replace的形式打开。
要使用Transition版本必须API>=19(Android4.4),有些功能如 Slide设定Edge、路径动画ArcMotion 更是需要 API>=21(Android 5.0)