動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇

澤毛發表於2017-12-21
原文網址 : https://juejin.im/post/5a30fa5551882554b8378b5a
動畫

一、概述

在 轉場動畫理論篇 中，我們介紹了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().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的方式啟動它時，效果是這樣的：

動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇
當CTTargetActivity被啟動的時候，列印的Log為，此時會呼叫每個transitionView的onAppear方法來獲得一個漸顯的Animator：
動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇
而如果我們從CTTargetActivity返回到之前啟動它的那個Activity，這時候列印的Log為，此時會呼叫每個transitionView的onDisappear方法來獲得一個漸隱的Animator：
動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇

2.4 指定transitionView

在預設情況下，需要執行Transition的View是通過系統遍歷得到的，如果我們希望改變這一集合，那麼可以通過Transition的addXXX和excludeXXX方法：

  • addTarget，預設情況下是通過遍歷View樹的方式得到transitionViews，而如果我們使用了addTarget方法，那麼會使得這一過程失效，最後變化的transitionViews只是addTarget所指定的View：
    動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇
    例如我們像下面這樣操作：
    private void setUpNormalTransition() {
        Window window = getWindow();
        LogFadeTransition transition = new LogFadeTransition();
        transition.addTarget(R.id.iv_bg);
        window.setEnterTransition(transition);
        window.setReturnTransition(transition);
    }
複製程式碼

那麼此時就只會對iv_bg進行變換：

動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇

  • excludeChildren：
    動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇
    把這個View的所有子View從transition的列表中去除，例如，類似於ListView，如果我們希望他的每個Item不做變換，那麼就可以使用這個標誌位。
  • excludeTarget：
    動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇
    排除某個具體的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，這是我們最終的效果：

動畫體系知識梳理(2) 轉場動畫 ContentTransition 實踐篇
在我們的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。

相關文章