Android Transition Note

概述

Android 4.4.2 (API level 19)引入Transition框架，以後不少APP上都使用該框架作出很酷炫的效果，視頻中介紹了該框架的基本使用以及其中核心的一些類和方法，只有學會這些基本的API才能在以後的Activity/Fragment過渡定製一些本身想要的效果。

先看官網的一張關係圖

圖中有三個核心的類，分別是Scene、Transition和TransitionManager，下面對這個三個核心類展開分析。

Scene

Scene場景，用於保存佈局中全部View的屬性值，建立Scene的方式能夠經過getSceneForLayout方法
getSceneForLayout(ViewGroup sceneRoot, int layoutId, Context context)
好比：

mScene0 = Scene.getSceneForLayout(mSceneRoot, R.layout.scene0, getContext());
mScene1 = Scene.getSceneForLayout(mSceneRoot, R.layout.scene1, getContext());複製代碼

也能夠直接new Scene(ViewGroup sceneRoot, View layout)

View view0 = inflater.inflate(R.layout.scene0, container, false);
View view1 = inflater.inflate(R.layout.scene1, container, false);
mScene0 = new Scene(mSceneRoot, view0);
mScene1 = new Scene(mSceneRoot, view1);複製代碼

兩種方式都須要傳SceneRoot，即該場景的根節點。

Transition

Transition過渡動畫，前面建立了兩個場景，分別保存了視圖的一些屬性，好比Visibility、position等，Transition就是對於這些屬性值的改變定義過渡的效果。從上圖能夠看到系統內置了一些經常使用的Transition，Transition的建立能夠經過加載xml，如：

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />複製代碼

而後在代碼中：

Transition mFadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);複製代碼

或者直接在代碼中：

Transition mFadeTransition = new Fade();複製代碼

TransitionManager

TransitionManeger用於將Scene和Transition聯繫起來，它提供了一系列的方法如setTransition(Scene fromScene, Scene toScene, Transition transition)指明起始場景和結束場景、他們的過渡動畫是什麼，go(Scene scene, Transition transition)，到指定的場景所使用的過渡動畫是什麼，beginDelayedTransition(ViewGroup sceneRoot, Transition transition)，在當前場景到下一幀的過渡效果是什麼。好比這裏使用go()方法，效果:

注意這裏兩個Scene中紅綠兩個方塊除了位置和大小不同，id是一致的，transition記錄下兩個Scene先後屬性值，根據屬性值的改變執行過渡動畫，默認狀況下對SceneRoot下的全部View執行動畫效果，咱們能夠經過Transition.addTarget和removeTarget方法選擇性添加或移除執行動畫的View。

經常使用API

有時候咱們只想改變當前已展現的視圖層級中View的狀態，能夠經過beginDelayedTransition實現，下面列舉系統內置的Transition的使用。

AutoTransition

AutoTransition默認的動畫效果，對應xml tag爲autoTransition

實際上是如下幾個動畫組合順序執行：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>複製代碼

在代碼中使用：

TransitionManager.beginDelayedTransition(mRoot, new AutoTransition());
        if (mTextView.getVisibility() != View.VISIBLE) {
            mTextView.setVisibility(View.VISIBLE);
        } else {
            mTextView.setVisibility(View.GONE);
        }複製代碼

ChangeBounds

ChangeBounds對應xml tag爲changeBounds，根據先後佈局界限的變化執行動畫

TransitionManager.beginDelayedTransition(mRoot, new ChangeBounds());
FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) mTarget.getLayoutParams();
if ((lp.gravity & Gravity.START) == Gravity.START) {
    lp.gravity = Gravity.BOTTOM | Gravity.END;
} else {
    lp.gravity = Gravity.TOP | Gravity.START;
}
mTarget.setLayoutParams(lp);複製代碼

ChangeClipBounds

ChangeClipBounds對應xml tag爲changeClipBounds，做用對象：View的getClipBounds()值

Rect BOUNDS = new Rect(20, 20, 100, 100);
TransitionManager.beginDelayedTransition(mRoot, new ChangeClipBounds());
if (BOUNDS.equals(ViewCompat.getClipBounds(mImageView))) {
    ViewCompat.setClipBounds(mImageView, null);
} else {
    ViewCompat.setClipBounds(mImageView, BOUNDS);
}複製代碼

ChangeImageTransform

對應xml tag爲changeImageTransform，做用對象：ImageView的matrix

TransitionManager.beginDelayedTransition(mRoot, new ChangeImageTransform());
mImageView.setScaleType(ImageView.ScaleType.XXX);複製代碼

ChangeScroll

對應xml tag爲changeScroll，做用對象：View的scroll屬性值

TransitionManager.beginDelayedTransition(mRoot, new ChangeScroll());
mTarget.scrollBy(-100, -100);複製代碼

ChangeTransform

對應xml tag 爲changeTransform，做用對象：View的scale和rotation

TransitionManager.beginDelayedTransition(mRoot, new ChangeTransform());
if (mContainer2.getChildCount() > 0) {
    mContainer2.removeAllViews();
    showRedSquare(mContainer1);
} else {
    mContainer1.removeAllViews();
    showRedSquare(mContainer2);
    mContainer2.getChildAt(0).setRotation(45);
}

private void showRedSquare(FrameLayout container) {
        final View view = LayoutInflater.from(getContext())
                .inflate(R.layout.red_square, container, false);
        container.addView(view);
    }複製代碼

Explode

對應xml tag爲explode，做用對象：View的Visibility

TransitionManager.beginDelayedTransition(mRoot, new Explode());
int vis = mViews.get(0).getVisibility() == View.VISIBLE ? View.GONE : View.VISIBLE;
for (View view : mViews) {
    view.setVisibility(vis);
}複製代碼

Fade

對應xml tag爲fade，做用對象：View的Visibility

能夠在初始化是指定IN或者OUT分別對應淡入和淡出，若不指定默認爲淡入淡出效果

TransitionManager.beginDelayedTransition(mRoot, new Fade());
int vis = mViews.get(0).getVisibility() == View.VISIBLE ? View.GONE : View.VISIBLE;
for (View view : mViews) {
    view.setVisibility(vis);
}複製代碼

Slide

對應xml tag爲slide，做用對象：View的Visibility

TransitionManager.beginDelayedTransition(mRoot, new Slide());
int vis = mViews.get(0).getVisibility() == View.VISIBLE ? View.GONE : View.VISIBLE;
for (View view : mViews) {
    view.setVisibility(vis);
}複製代碼

TransitionSet

對應xml tag爲transitionSet

能夠在代碼中建立transitionSet如：

mTransition = new TransitionSet();
mTransition.addTransition(new ChangeImageTransform());
mTransition.addTransition(new ChangeTransform());
TransitionManager.beginDelayedTransition(mOuterFrame, mTransition);
        if (mInnerFrame.getChildCount() > 0) {
            mInnerFrame.removeAllViews();
            addImageView(mOuterFrame, ImageView.ScaleType.CENTER_CROP, mPhotoSize);
        } else {
            mOuterFrame.removeViewAt(1);
            addImageView(mInnerFrame, ImageView.ScaleType.FIT_XY,
                    FrameLayout.LayoutParams.MATCH_PARENT);
        }複製代碼

也能夠經過加載xml佈局建立transitionSet：

xml佈局長這樣：

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="together">
    <changeImageTransform/>
    <changeTransform/>
</transitionSet>複製代碼

經過transitionOrdering屬性設置動畫執行的順序，together表示同時執行，sequential表示順序執行，在代碼中能夠調用TransitionSet的setOrdering(int)方法，屬性值傳ORDERING_SEQUENTIAL或者ORDERING_TOGETHER

在代碼中：

mTransition = (TransitionSet) TransitionInflater.from(getContext()).inflateTransition(R.transition.transition);
TransitionManager.beginDelayedTransition(mOuterFrame, mTransition);
        if (mInnerFrame.getChildCount() > 0) {
            mInnerFrame.removeAllViews();
            addImageView(mOuterFrame, ImageView.ScaleType.CENTER_CROP, mPhotoSize);
        } else {
            mOuterFrame.removeViewAt(1);
            addImageView(mInnerFrame, ImageView.ScaleType.FIT_XY,
                    FrameLayout.LayoutParams.MATCH_PARENT);
        }複製代碼

這裏結合changeImageTransform和changeTransform，效果以下：

PathMotion

Transition的輔助工具，以path的方式指定過渡效果，兩個具體實現類ArcMotion和PatternPathMotion，看下ArcMotion的效果

mTransition = new AutoTransition();
mTransition.setPathMotion(new ArcMotion());
TransitionManager.beginDelayedTransition(mRoot, mTransition);
        FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) mTarget.getLayoutParams();
        if ((lp.gravity & Gravity.START) == Gravity.START) {
            lp.gravity = Gravity.END | Gravity.BOTTOM;
        } else {
            lp.gravity = Gravity.START | Gravity.TOP;
        }
        mTarget.setLayoutParams(lp);複製代碼

它的運動軌跡是條曲線，有興趣的能夠研究下它的實現算法，在源碼中有個很萌的圖以下：

自定義Transition

除了系統內置的Transition，咱們還能夠自定義Transition效果，須要繼承Transition

public class CustomTransition extends Transition {
    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}複製代碼

其工做原理是在captureStartValues和captureEndValues中分別記錄View的屬性值，官網建議確保屬性值不衝突，屬性值的命名格式參考：

package_name:transition_name:property_name複製代碼

在createAnimator中建立動畫，對比屬性值的改變執行動畫效果，如自定義修改顏色動畫效果：

在兩個Scene中使用自定義過渡動畫，效果以下：

Note

1.Android 版本在4.0(API Level 14)到4.4.2(API Level 19)使用Android Support Library's

2.對於 SurfaceView可能不起效果，由於SurfaceView的實例是在非UI線程更新的，所以會形成和其餘視圖動畫不一樣步。

3.某些特定的轉換類型在應用到TextureView時可能不會產生所需的動畫效果。

4.繼承自AdapterView的如ListView，與該框架不兼容。

5.不要對包含文本的視圖的大小進行動畫

Thanks to

Google Demo

Github Demo傳送門