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 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)

八、TODO

图片切换平滑过渡效果

颜色变化平滑过渡

文字变化平滑过渡

深入研究Transition-EveryWhere,存在类型转化的BUG

九、参考项目

Transitions-Everywhere 可支持Transiton动画到 Android 4.O ,并且兼容 Android 2.2 +(无动画但保证运行).

详细解读Fragment与Fragment Activity与Activity Activity与Fragment之间的切换动画

早在Android 4.4，Transition 就已经引入，但在5.0才得以真正的实现。而究竟Transition是用来干嘛的呢?这个Demo可以带你熟悉基本的操作。特点是比较熟练的使用xml来定义动画，动画衔接做得比较好。

主要特点是介绍ViewPager中实现的一些Transition动画

ViewOverlay与animation介绍。Transition在ReturnTransition动画时，会在第一个页面rootView的overlap上添加ImageView来执行动画。这篇文章详细介绍了Android中ViewOverlay的用处和原理。

Transition DEMO

十、结尾

本文示例代码: git@github.com:Pluckypan/HollyTransition.git 预览 欢迎Star、Fork