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

mymdeep發表於2017-04-12
Material Design筆記動畫

之前對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中。
最後還是推薦一下我的公眾號，歡迎給我留言。
更多的開發知識，可以關注我的公眾號：

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

相關文章