一、概述
在 转场动画理论篇 中，我们介绍了Content Transition的基本理论，今天，我们来一起学习Content Transition使用当中的细节问题。
二、基本使用
2.1 启动Activity方式
如果我们希望在Activity切换的时候加上Content Transition动画，那么需要使用下面的启动方式：
private void startTargetActivity(int position) {
if (position == 0) {
List<Pair> pairs = new ArrayList<>();
//1.得到ActivityOptionsCompact对象
ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(mActivity, pairs.toArray(new android.support.v4.util.Pair[pairs.size()]));
Intent intent = new Intent(mActivity, CTTargetActivity.class);
//2.调用第1步生成的ActivityOptionsCompact的toBundle方法
mActivity.startActivity(intent, compat.toBundle());
}
}
makeSceneTransitionAnimation有两个重载方法：
makeSceneTransitionAnimation(Activity activity, View sharedElement, String sharedElementName)makeSceneTransitionAnimation(Activity activity, Pair<View, String>... sharedElements)
Activity就对应于当前所在的Activity，而后面的参数则用于Shared Element Transition，这一节我们介绍的是Content Transition，因此，直接传一个空的数组就可以了。
2.2 设置对应的Transition
在基础理论篇中，我们说过在Activity的切换过程中，每个Acitivity包括了四种Transition，我们可以通过Acitivity所在Window的setxxxTransition方法来设置：
getWindow().setExitTransitiongetWindow().setEnterTransitiongetWindow().setReturnTransitiongetWindow().setReenterTransition
例如，我们被启动的Acitivity设置Enter和Return，那么需要像下面这样：
public class CTTargetActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ct_target);
setUpNormalTransition();
}
private void setUpNormalTransition() {
Window window = getWindow();
LogFadeTransition transition = new LogFadeTransition();
window.setEnterTransition(transition);
window.setReturnTransition(transition);
}
}
而如果我们希望对某个过程加上多个Transition，那么可以传入一个TransitionSet：
private void setUpNormalTransition() {
Window window = getWindow();
LogFadeTransition transition = new LogFadeTransition();
Slide slide = new Slide();
TransitionSet set = new TransitionSet();
set.addTransition(slide);
set.addTransition(transition);
window.setEnterTransition(set);
window.setReturnTransition(set);
}
2.3 Transition各方法回调验证
我们验证一下在上一篇文章中所谈到的captureXXX、onAppear、onDisappear的调用情况，下面是我们被启动CTTargetActivity的布局，为了在Transition的回调方法中，确定是哪个View，给每个View都加上了Tag：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:tag="rootView"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/ll_header"
android:tag="ll_header"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="150dp">
<ImageView
android:id="@+id/iv_bg"
android:tag="iv_bg"
android:src="@drawable/ic_bg"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/iv_header"
android:tag="iv_header"
android:layout_centerInParent="true"
android:src="@drawable/ic_1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="10dp"/>
<TextView
android:id="@+id/tv_header"
android:tag="tv_header"
android:layout_alignBottom="@id/iv_header"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:text="我是标题"
android:textSize="18sp"
android:textColor="@android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<TextView
android:id="@+id/tv_content"
android:tag="tv_content"
android:layout_width="match_parent"
android:padding="30dp"
android:textColor="@android:color/white"
android:background="#1F000000"
android:text="我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;"
android:layout_height="match_parent"/>
</LinearLayout>
当我们从别的Activity通过2.1的方式启动它时，效果是这样的：
当
CTTargetActivity被启动的时候，打印的Log为，此时会调用每个transitionView的onAppear方法来获得一个渐显的Animator：
而如果我们从
CTTargetActivity返回到之前启动它的那个Activity，这时候打印的Log为，此时会调用每个transitionView的onDisappear方法来获得一个渐隐的Animator：
2.4 指定transitionView
在默认情况下，需要执行Transition的View是通过系统遍历得到的，如果我们希望改变这一集合，那么可以通过Transition的addXXX和excludeXXX方法：
-
addTarget，默认情况下是通过遍历View树的方式得到transitionViews，而如果我们使用了addTarget方法，那么会使得这一过程失效，最后变化的transitionViews只是addTarget所指定的View：
例如我们像下面这样操作：
private void setUpNormalTransition() {
Window window = getWindow();
LogFadeTransition transition = new LogFadeTransition();
transition.addTarget(R.id.iv_bg);
window.setEnterTransition(transition);
window.setReturnTransition(transition);
}
那么此时就只会对iv_bg进行变换：
-
excludeChildren：
把这个View的所有子View从transition的列表中去除，例如，类似于ListView，如果我们希望他的每个Item不做变换，那么就可以使用这个标志位。 -
excludeTarget：
排除某个具体的View。
2.5 Transition过程监听
某些时候，我们希望在Transition完成之后再进行某些操作，那么可以通过下面这个方法来监听整个过程：
contentTransition.addListener(new Transition.TransitionListener() {
@Override
public void onTransitionStart(Transition transition) {}
@Override
public void onTransitionEnd(Transition transition) {}
@Override
public void onTransitionCancel(Transition transition) {}
@Override
public void onTransitionPause(Transition transition) {}
@Override
public void onTransitionResume(Transition transition) {}
});
三、自定义Transition
经过这么长篇幅的介绍，相信大家一定对Transition有了一定的了解了，下面，我们就开始设置自己的Transition，这是我们最终的效果：
在我们的
Transition中，根据View的Tag来进行区分动画：
public class CustomContentTransition extends Visibility {
public static final String TAG = "CustomContentTransition";
@Override
public void captureStartValues(TransitionValues transitionValues) {
super.captureStartValues(transitionValues);
}
@Override
public void captureEndValues(TransitionValues transitionValues) {
super.captureEndValues(transitionValues);
}
@Override
public Animator onAppear(ViewGroup sceneRoot, final View view, TransitionValues startValues, TransitionValues endValues) {
Animator animator = null;
String viewTag = (String) view.getTag();
if ("transition_reveal".equals(viewTag)) {
animator = createRevealAnimator(view, false);
} else if ("transition_translationY".equals(viewTag)) {
animator = createTranslateYAnimator(view, 200, 0, false);
} else if ("transition_scale".equals(viewTag)) {
animator = createScaleAnimator(view, .8f, 1f, false);
}
return animator;
}
@Override
public Animator onDisappear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
Animator animator = null;
String viewTag = (String) view.getTag();
if ("transition_reveal".equals(viewTag)) {
animator = createRevealAnimator(view, true);
} else if ("transition_translationY".equals(viewTag)) {
animator = createTranslateYAnimator(view, 0, 200, true);
} else if ("transition_scale".equals(viewTag)) {
animator = createScaleAnimator(view, 1f, .8f, true);
}
return animator;
}
private Animator createScaleAnimator(final View view, float startValue, final float endValues, final boolean dismiss) {
ValueAnimator animator = ValueAnimator.ofFloat(startValue, endValues);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float scale = (Float) animation.getAnimatedValue();
float faction = animation.getAnimatedFraction();
view.setScaleX(scale);
view.setScaleY(scale);
view.setAlpha(dismiss ? (1 - faction) : faction);
}
});
return animator;
}
private Animator createTranslateYAnimator(final View view, final int startValue, int endValue, final boolean dismiss) {
ValueAnimator animator = ValueAnimator.ofInt(startValue, endValue);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int translationY = (Integer) animation.getAnimatedValue();
float faction = animation.getAnimatedFraction();
view.setTranslationY(translationY);
view.setAlpha(dismiss ? (1 - faction) : faction);
}
});
return animator;
}
private Animator createRevealAnimator(final View view, boolean dismiss) {
int cx = (view.getLeft() + view.getRight()) / 2 - 270;
int cy = (view.getTop() + view.getBottom()) / 2 - 120;
float maxRadius = (float) Math.hypot(view.getWidth(), view.getHeight());
float startRadius = dismiss ? maxRadius : 0;
float finalRadius = dismiss ? 0 : maxRadius;
return ViewAnimationUtils.createCircularReveal(view, cx, cy, startRadius, finalRadius);
}
}
在布局当中，给View添加不同的Tag：
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:tag="rootView"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/ll_header"
android:tag="ll_header"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="150dp">
<ImageView
android:id="@+id/iv_bg"
//***
android:tag="transition_reveal"
android:src="@drawable/ic_bg"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/iv_header"
//***
android:tag="transition_scale"
android:layout_centerInParent="true"
android:src="@drawable/ic_1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="10dp"/>
<TextView
android:id="@+id/tv_header"
//***
android:tag="transition_scale"
android:layout_alignBottom="@id/iv_header"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:text="我是标题"
android:textSize="18sp"
android:textColor="@android:color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<TextView
android:id="@+id/tv_content"
//***
android:tag="transition_translationY"
android:layout_width="match_parent"
android:padding="30dp"
android:textColor="@android:color/white"
android:background="#1F000000"
android:text="我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;我是内容;"
android:layout_height="match_parent"/>
</LinearLayout>
最后，我们需要在Activity中把这个自定义的Transition设置给Window：
private void setUpNormalTransition() {
Window window = getWindow();
CustomContentTransition contentTransition = new CustomContentTransition();
contentTransition.addTarget(R.id.iv_bg);
contentTransition.addTarget(R.id.tv_header);
contentTransition.addTarget(R.id.iv_header);
contentTransition.addTarget(R.id.tv_content);
contentTransition.setDuration(500);
window.setEnterTransition(contentTransition);
window.setReturnTransition(contentTransition);
}
五、总结
至此，我们对于Content Transition的学习就结束了，转场动画Content Transition其实并不难，主要就是要知道VISIBILITY中各回调的调用时机，以及个参数的含义，然后通过onAppear和onDisappear返回自定义的Animator。
