動畫體系知識梳理(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。