Android Material Design 動畫實現

前段時間，利用Material Design控件編寫了一個Example，今天我在這個項目的基礎上，加入一些動畫。

先上效果圖：

主要加了3個動畫：FAB動畫，列表加載動畫，Shared Element Transition

FAB動畫

首先，咱們須要把FAB按鈕移到屏幕下邊去，我在Fragment的onActivityCreated方法中加入

mFabButton.setTranslationY(2 * getResources().getDimensionPixelOffset(R.dimen.btn_fab_size));

而後我在從網絡獲取到數據後，開始FAB顯示動畫

mFabButton.animate()
                .translationY(0)
                .setInterpolator(new OvershootInterpolator(1.f))
                .setStartDelay(500)
                .setDuration(ANIM_DURATION_FAB)
                .start();

在delay 500秒後開始動畫，主要是由於要與列表項的加載動畫同步。
使用OvershootInterpolator修飾動畫，能夠實如今向上移動超出原來位置必定值後，再返回到原位置的效果。

列表加載動畫

列表我是用RecycleView實現，咱們須要在Adapter里加入動畫處理

在onBindViewHolder方法中加入

runEnterAnimation(holder.itemView, position);

而後咱們實現runEnterAnimation方法

private void runEnterAnimation(View view, int position) {
            if (!animateItems || position >= 3) {
                return;
            }

            if (position > lastAnimatedPosition) {
                lastAnimatedPosition = position;
                view.setTranslationY(Utils.getScreenHeight(getActivity()));
                view.animate()
                        .translationY(0)
                        .setStartDelay(100 * position)
                        .setInterpolator(new DecelerateInterpolator(3.f))
                        .setDuration(700)
                        .start();
            }
        }

列表加載動畫，不是全部項都須要的，好比我這個例子中，屏幕上只能顯示3個Item，
因此position >= 3就不用加入動畫了。

先將Item向下移出屏幕
view.setTranslationY(Utils.getScreenHeight(getActivity()));

接着根據Item的position設定delay時間，這樣能夠實現Item一個一個出現,
加入DecelerateInterpolator 能夠實現動畫先快後慢的效果。

Shared Element Transition

Shared Element Transition是Android 5.0引入的動畫效果，能夠在兩個Activity中實現共享元素變換動畫，
在個人這個例子中，就是實現點擊Item後，圖片能夠慢慢放大和移位的效果。

設置transitionName

首先，咱們須要選定變換開始和結束的元素，給它們設置一個相同的transitionName，
我這個例子中，開始變換的元素是列表中的圖片

<ImageView
            android:id="@+id/ivBook"
            android:transitionName="@string/transition_book_img"
            android:layout_width="109dp"
            android:layout_height="135dp"
            android:src="@drawable/book1" />

開始變換的元素是圖書明細界面中的圖片

<ImageView
                android:id="@+id/ivImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:transitionName="@string/transition_book_img"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

transition_book_img就是一個普通的string，只要值是惟一的就能夠了。

使用Shared Element Transition

在Activity切換的時候，使用Shared Element Transition

Book book = mAdapter.getBook(position);
            Intent intent = new Intent(getActivity(), BookDetailActivity.class);
            intent.putExtra("book", book);
            ActivityOptionsCompat options =
                    ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(),
                            view.findViewById(R.id.ivBook), getString(R.string.transition_book_img));

            ActivityCompat.startActivity(getActivity(), intent, options.toBundle());

使用ActivityOptionsCompat的makeSceneTransitionAnimation方法建立動畫，
須要指定一個View做爲起始變換的View，以及變換的transitionName，
我這裏使用的是ivBook做爲起始View，transition_book_img做爲變換的transitionName，與XML中的設定一致。

這樣就OK了，ImageView的位移和大小變化，Android會自動幫你搞定。
固然咱們也能夠自定義變換動畫，後續再研究~~~

這個效果只支持Android 5.0以上

Github

最新項目的代碼，已經上傳到Github
源碼地址：MaterialDesignExample

拋磚引玉，期待你的加入，一塊兒來完善這個Demo

本文做者： 陽春麪
原文地址：http://www.aswifter.com/2015/08/01/android-material-design-animation/

歡迎關注個人微信公衆號，分享Android 開發，IOS開發，Swift開發和互聯網內容
微信號：APP開發者