动画体系知识梳理(2) 转场动画 ContentTransition 实践篇

1、概述

在 转场动画理论篇 中，咱们介绍了Content Transition的基本理论，今天，咱们来一块儿学习Content Transition使用当中的细节问题。

2、基本使用

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().setExitTransition
• getWindow().setEnterTransition
• getWindow().setReturnTransition
• getWindow().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) {}
});
复制代码

3、自定义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);
    }
复制代码

5、总结

至此，咱们对于Content Transition的学习就结束了，转场动画Content Transition其实并不难，主要就是要知道VISIBILITY中各回调的调用时机，以及个参数的含义，而后经过onAppear和onDisappear返回自定义的Animator。