捋一捋Android的轉場動畫

背景

隨著 Material Design設計概念的提出，使得很多的開發過程中對動畫和UI的優化越來越重要，其中一個重要的動畫
就是Material Deisgn : Material Motion

“Motion provides meaning. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. Motion in the world of material design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.”

可以看出Motion是多麼的強大，但是在Android機型上使用起來並不是一番風順

歷史

Android 4.0,引入了新的屬性 android:animateLayoutChanges=[true/false] ，所有派生自 ViewGroup 的控件都具有此屬性，只要在XML中添加上這個屬性，就能實現添加/刪除其中控件時，帶有默認動畫，如果要自定義動畫，就需要使用 LayoutTransaction 了。實踐證明，實際上這套機制使用起來並不是那麼靈活 Android 4.4 引入了 Scenes 和 Transitions（場景和變換），Scene 保存了布局的狀態，包括所有的控件和控件的屬性。布局可以是一個簡單的視圖控件或者復雜的視圖樹和子布局。保存了這個布局狀態到 Scene 後，我們就可以從另一個場景變化到該場景。從一個場景到另一個場景的變換中會有動畫效果，這些動畫信息就保存在 Transition 對象中。要運行動畫，我們要使用 TransitionManager 實例來應用 Transition

但是歸功於Android碎片化，由於不能適配低版本的機型隨意很多開發者放棄了這個強大的功能
，但是現在好了有了下面就是開源庫 Transitions-Everywhere
，Transitions-Everywhere 向後移植到 Android 4.O ,並且兼容 Android 2.2 +
所以是時候學習轉場動畫

作用

說了那麼多虛無的概率，那轉場動畫到底是干啥的呢，咱們上一個效果大家就明白了：

其實上面執行的邏輯就是一個Textview的visible設置及時顯示和隱藏功能，而且使用起來也很方便代碼：<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> TransitionManager.beginDelayedTransition(llyout, new Slide(Gravity.LEFT)); tv.setVisibility(tv.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);

實現這樣的效果，只需要一行代碼就可以，是不是很強大！那就開始咱們今天的學習

環境配置

依賴導入：

compile "com.andkulikov:transitionseverywhere:1.6.5"

將所有類包名為 android.transition.* 的替代為 com.transitionseverywhere.*

動畫Transition

那有哪些現成的動畫供我們使用呢

TransitionSet.用來驅動其他的 Transition .類似於 AnimationSet,能夠讓一組 Transition 有序，或者同時執行 ChangeBounds. 改變 View 的位置和大小 Fade 可以用來做最常用的淡入和淡出動畫 Slide 滑動動畫，上面展示的例子就是這個動畫 Scale 縮放動畫，可以縮小和擴大效果 Recolor 顏色，漸變的顏色修改 ChangeText 文本修改，主要是textview中使用 Rotate 旋轉動畫 ExplodeActivity 擴散動畫

大家不要著急，下面一一為大家講解這些動畫的使用方法

使用

滑動動畫

源碼鏈接

在textview顯示很隱藏前調用動畫方法，先初始化一個動畫Transition，這裡使用的是Slide動畫初始化傳入一個滑動方法值,beginDelayedTransition方法中第一個參數設定
需要動畫變量的父view布局對象

    //    Slide （滑行）
    public void onFadeClick(int diction) {
        Transition transition = new Slide(diction);
        TransitionManager.beginDelayedTransition(llyout, transition);
        tv.setVisibility(tv.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);
    }

Explode粒子擴散

源碼鏈接地址

通過EasyRecyclerView實現一個gridview效果的界面，點擊item後擴散每個item，當動畫開始後設置移除adpter的數據，恢復的時候再講數據添加回來
注意需要Explode的EpicenterCallback返回一個擴散的原點，這是使用的是點擊對象的位置！

/**
     * 開始的動畫
     *
     * @param view
     */
    public void onStartClick(View view) {
        final Rect viewRect = new Rect();
        view.getGlobalVisibleRect(viewRect);
        TransitionSet set = new TransitionSet()
                .addTransition(new Explode().setEpicenterCallback(new Transition.EpicenterCallback() {
                    @Override
                    public Rect onGetEpicenter(Transition transition) {
                        return viewRect;
                    }
                }).excludeTarget(view, true));
        TransitionManager.beginDelayedTransition(recyle, set);
        open = !open;
        if (open) {
            btnClose.setVisibility(View.VISIBLE);
            for (String str : getData()) {
                adapter.remove(str);
            }
        } else {
            btnClose.setVisibility(View.GONE);
            adapter.addAll(getData());
        }
    }

fade和scale伸縮動畫


源碼鏈接地址
* 單一的fade動畫

Transition transition=new Fade();
        transition.setDuration(2000);
        TransitionManager.beginDelayedTransition(llyout,transition );
        tv.setVisibility(tv.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);

單一的scale動畫

Transition transition=new Scale(0.8f);
        transition.setDuration(2000);
        TransitionManager.beginDelayedTransition(llyout, transition);
        tv.setVisibility(tv.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);

結合使用效果更好哦

TransitionSet set = new TransitionSet()
                .addTransition(new Scale(0.9f))
                .addTransition(new Fade());
        set.setDuration(2000);
        TransitionManager.beginDelayedTransition(llyout, set);
        tv.setVisibility(tv.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);

Path動畫

源碼鏈接地址

使用 setPathMotion 方法，可以在任意兩點之間的位置變換做路徑動畫,比如使用 ChangeBounds 改變 View的位置

 TransitionManager.beginDelayedTransition(rlyout,
                new ChangeBounds().setDuration(1000));
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) btnPath.getLayoutParams();
        params.gravity = open ? Gravity.TOP : Gravity.BOTTOM;
        btnPath.setLayoutParams(params);

當我們需要移除父容器內所有的 view，然後再增加一些新的 view。這些元素可能非常相似，數據替換動畫，我們怎麼能夠讓 Transition 框架分清哪些元素是被移除的，哪些元素是需要移動到新的位置呢？
只需要調用 TransitionManager.setTransitionName(View v, String transitionName) 方法就好了，
第一參數傳入想要標記的 view，在第二個參數傳入一個唯一的標識符，這樣就能可以保證每個 View 的 Transitions 的唯一性！

TransitionManager.beginDelayedTransition(llyoutData, new ChangeBounds().setDuration(1000));
        llyoutData.removeAllViews();
        Collections.shuffle(list);
        for (int i = 0; i < list.size(); i++) {
            String item = list.get(i);
            TextView tv =(TextView) View.inflate(this, R.layout.llyout_item, null);
            tv.setText(item);
            TransitionManager.setTransitionName(tv, item);
            llyoutData.addView(tv);
        }

文字動畫集合

源碼鏈接地址

Recolor動畫

TransitionManager.beginDelayedTransition(llyout, new Recolor().setDuration(1000));
                if (colorTag) {
                    tv.setTextColor(getResources().getColor(R.color.drak));
                    tv.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.colorPrimaryDark)));
                } else {
                    tv.setTextColor(getResources().getColor(R.color.colorPrimary));
                    tv.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.drak)));
                }

ChangeText動畫

TransitionManager.beginDelayedTransition(llyout, new ChangeText().setChangeBehavior(ChangeText
                        .CHANGE_BEHAVIOR_OUT_IN).setDuration(1000));
                txTag = !txTag;
                if (txTag) {
                    tv.setText("文字我改了");
                } else {
                    tv.setText("文字又復原了");
                }

Rotate動畫

TransitionManager.beginDelayedTransition(llyout, new Rotate().setDuration(1000));
                roteTag = !roteTag;
                if (roteTag) {
                    img.setRotation(90);
                    tv.setRotation(180);
                } else {
                    img.setRotation(0);
                    tv.setRotation(0);
                }

指定特定動畫對象

配置 Transitions 也非常容易，你可以給一些特殊目標的 View 指定 Transitions，僅僅只有它們才能有動畫

增加動畫目標

addTarget(View target)?. view addTarget(int targetViewId).? 通過view 的id addTarget(String targetName) ?.與 TransitionManager .setTransitionName 方法設定的標識符相對應。 addTarget(Class targetType)?. 類的類型 ，比如android. widget.TextView.class。

移除動畫目標

removeTarget(View target) removeTarget(int targetId) removeTarget(String targetName) removeTarget(Class target)

排除不想做動畫的view

excludeTarget(View target, boolean exclude) excludeTarget(int targetId, boolean exclude) excludeTarget(Class type, boolean exclude) excludeTarget(Class type, boolean exclude)

排除某個 ViewGroup 的所有子 View

excludeChildren(View target, boolean exclude) excludeChildren(int targetId, boolean exclude) excludeChildren(Class type, boolean exclude)

github源碼地址