『Material Design入門學習筆記』動畫（含demo）

以前對Material Design的風格有了一些大致的瞭解，從這篇文章開始就要介紹代碼了。
此次文章介紹的代碼是比較雜的，有不一樣形式的動畫。之前的移動放縮就不說了，主要介紹一些不經常使用的。
由於涉及到動畫效果，本文不作截圖了，截圖過大，有時候上傳會失敗。須要的用戶，能夠下載個人demo進行測試。
『Material Design入門學習筆記』前言
『Material Design入門學習筆記』動畫（含demo）
『Material Design入門學習筆記』主題與AppCompatActivity（附demo）
demo下載

---

按鈕交互

前面提到過的就是按鈕交互，點擊有個波紋狀態這個怎麼實現呢？
只須要對波紋設置一個背景便可：

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground"
        android:transitionName="button2"
        android:id="@+id/button2"
        android:text="波紋有邊界"/>複製代碼

另一種是波紋超出按鈕邊界的：

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:transitionName="button3"
        android:text="波紋超出邊界"/>複製代碼

動畫效果的實現

若是你下載了個人demo，看到效果必定以爲這種波紋效果不錯，這種動畫是如何實現的呢？
你仔細看波紋效果，發現其實，這是一個畫圓的過程，一個從小到大的圓。知道了這個，就好實現了。
使用ViewAnimationUtils這個類，能夠實現一個畫圓的動畫。

Animator animator = ViewAnimationUtils.createCircularReveal(
                    img,
                    img.getWidth()/2,
                    img.getHeight()/2,
                    img.getWidth(),
                    0);//img爲一個imageview
                animator.setInterpolator(new AccelerateDecelerateInterpolator());
                animator.setDuration(2000);
                animator.start();複製代碼

如今對createCircularReveal方法進行一個說明：

• 第一個參數：表明的是你要操做的view
• 第二個參數：圓的x方向的中點，
• 第三個參數：圓的y方向的中點，
• 第四個參數：圓開始時候的半徑
• 第五個參數：圓結束時候的半徑

Activity過渡動畫

在Android5.0以後咱們可使用google提供的Transition框架來實現Activity之間或者Fragment的動畫變換效果。
這個與以前的overridePendingTransition是不太同樣的，動畫效果更加平滑一些。
對於須要使用動畫的Activity，須要先設置容許使用Transition:

//設置容許經過ActivityOptions.makeSceneTransitionAnimation發送或者接收Bundle
        getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
        //設置使用TransitionManager進行動畫，不設置的話系統會使用一個默認的TransitionManager
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);複製代碼

而後能夠對這個Activity設置動畫，設置方法有如下四種：

//A打開B的時候，A中的View是如何播放動畫的
getWindow().setExitTransition(new Fade());
//A打開B的時候，B中的View是如何播放動畫的
getWindow().setReenterTransition(new Explode());
//B返回A的時候，B中的View是如何播放動畫的
getWindow().setEnterTransition(new Slide());
//B返回A的時候，A中的View是如何播放動畫的
getWindow().setReturnTransition(new Fade());複製代碼

動畫主要有如下三種形式：

• Fade(淡出)
• Explode(分解)
• 以及Slide(滑動)

使用的時候能夠，參照如下代碼：

ActivityOptions option = ActivityOptions.makeSceneTransitionAnimation(Animation.this);
 Intent explode = new Intent(Animation.this,ExplodeTransitionActivity.class);
                getWindow().setExitTransition(new Explode().setDuration(Constants.TRANSITIONTIME));
                getWindow().setReenterTransition(new Explode().setDuration(Constants.TRANSITIONTIME));
                getWindow().setEnterTransition(new Explode().setDuration(Constants.TRANSITIONTIME));
                getWindow().setReturnTransition(new Explode().setDuration(Constants.TRANSITIONTIME));
                startActivity(explode, option.toBundle());複製代碼

具體效果能夠參照個人demo：

getWindow().setExitTransition(new Explode().setDuration(Constants.TRANSITIONTIME));複製代碼

我對動畫設置了時間，方便用戶觀看，比較各類動畫之間的差別。
這時可能會有人問ActivityOptions是什麼，這個立刻就要說到，使用Transition，能夠設置view的共享動畫

共享動畫

先說一下什麼叫共享動畫，好比你從A Activity切換到B，可能兩個Activity中都有相同的組件，並且位置什麼都沒有變化，你但願在Activity變化時，這些組件不動，其餘地方執行動畫，這時就要用到共享動畫了，效果能夠參照個人demo。
首先我須要對相同的組件設置android:transitionName="button1"

<Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:transitionName="button1"
            android:id="@+id/button1"
            android:text="無動畫"/>複製代碼

而後使用以下代碼：

Intent shareelements = new Intent(Animation.this,ShareElementsActivity.class);
                getWindow().setExitTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                getWindow().setExitTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                getWindow().setReenterTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                getWindow().setEnterTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                getWindow().setReturnTransition(new Fade().setDuration(Constants.TRANSITIONTIME));
                View imageview = findViewById(R.id.img);
                View btn1 = findViewById(R.id.button1);
                View btn2 = findViewById(R.id.button2);
                View btn3 = findViewById(R.id.button3);
                Bundle bundle = ActivityOptions.makeSceneTransitionAnimation( this,
                    Pair.create(imageview,"img"),
                    Pair.create(btn1, "button1"),
                    Pair.create(btn2, "button2"),
                    Pair.create(btn3, "button3")).toBundle();
                startActivity(shareelements, bundle);複製代碼

我保持了四個組件不動，一個imageview，三個button，可是這裏要注意，這裏必需要用view，不能使用ImageView，不然會報錯。
這樣咱們再執行這段代碼，就會實現，activity 淡出屏幕的效果，可是這四個組件不動。

總結

此次沒有作動畫的截圖，由於我對動畫設置了時間，作一個動圖太大，喜歡的朋友仍是下載個人demo觀看。以後關於Material Design的代碼我都會放入這個demo中。
最後仍是推薦一下個人公衆號，歡迎給我留言。
更多的開發知識，能夠關注個人公衆號：