RecyclerView系列之六：item動(dòng)畫(huà)效果

在實(shí)際開(kāi)發(fā)中，我們想要自己的界面變得更加酷炫，免不了加入動(dòng)畫(huà)這個(gè)元素，今天來(lái)看一看RecyclerView中的動(dòng)畫(huà).

一、怎么添加動(dòng)畫(huà)

RecyclerView有一個(gè)方法 RecyclerView.setItemAnimator( )，這個(gè)方法就是添加item動(dòng)畫(huà)的，該方法需要一個(gè)RecyclerView.ItemAnimator對(duì)象.

RecyclerView.ItemAnimator是一個(gè)抽象類，該抽象類有一個(gè)子類SimpleItemAnimator，不過(guò)也是一個(gè)抽象類，我們通常用的是它的孫子DefaultItemAnimator



在DefaultItemAnimator中有Add、Remove、Move、Change四種動(dòng)畫(huà).

需要注意的是，要實(shí)現(xiàn)這四種動(dòng)畫(huà)效果，數(shù)據(jù)更新時(shí)不能通過(guò)：

Adapter.notifyDataSetChanged();

而是通過(guò)：

Adapter.notifyItemInserted(int position) 
Adapter.notifyItemRemoved(int position)
Adapter.notifyItemChanged(int position)
Adapter.notifyItemMoved(int fromPosition, int  toPosition)

ok,我們通過(guò) RecyclerView.setItemAnimator( new DefaultItemAnimator())來(lái)觀看一下系統(tǒng)給我們實(shí)現(xiàn)的動(dòng)畫(huà)效果.

二、觀看系統(tǒng)默認(rèn)動(dòng)畫(huà)效果
1、MainActivity中：
public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private MainAdapter mAdapter;
    private List<String> mDatas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        mRecyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
        mAdapter = new MainAdapter(this,mDatas);
        mRecyclerView.setAdapter(mAdapter);

      /**
       * 既然是動(dòng)畫(huà)，就會(huì)有時(shí)間，我們把動(dòng)畫(huà)執(zhí)行時(shí)間變大一點(diǎn)來(lái)看一看效果
       */
        DefaultItemAnimator defaultItemAnimator = new DefaultItemAnimator();
        defaultItemAnimator.setAddDuration(1000);
        defaultItemAnimator.setRemoveDuration(1000);
        mRecyclerView.setItemAnimator(defaultItemAnimator);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

/**
 * 這里通過(guò)兩個(gè)菜單按鈕來(lái)觀看我們的動(dòng)畫(huà)效果
 */
    @Override
    public boolean onOptionsItemSelected(MenuItem item){
        switch (item.getItemId()){
            case R.id.action_add:
                mAdapter.addData(1);
                break;
            case R.id.action_remove:
                mAdapter.removeData(1);
                break;
        }
        return true;
    }


    private void initData() {
        mDatas = new ArrayList<>();
            for (int i = 'A'; i < 'Z'; i++) {
            mDatas.add("" + (char) i);
        }
    }
}

res/menu/main.xml定義兩個(gè)菜單按鈕

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.text.MainActivity">

    <item
        android:id="@+id/action_add"
        android:orderInCategory="1"
        android:title="add"
        app:showAsAction="ifRoom"></item>

    <item
        android:id="@+id/action_remove"
        android:orderInCategory="2"
        android:title="delete"
        app:showAsAction="ifRoom" />

</menu>
2、Adapter中：
public class MainAdapter extends RecyclerView.Adapter<MainAdapter.MyViewHolder> {

    private Context mContext;
    private List<String> mDatas;

    public MainAdapter(Context context, List<String> mDatas) {
        this.mContext = context;
        this.mDatas = mDatas;
    }

   /**
    * 增加數(shù)據(jù)
    */
    public void addData(int position) {
        mDatas.add(position, "add");
        notifyItemInserted(position);//注意這里
    }

   /**
    * 移除數(shù)據(jù)
    */
    public void removeData(int position) {
        mDatas.remove(position);
        notifyItemRemoved(position);//注意這里
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_layout, parent, false));
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
          holder.tv.setText(mDatas.get(position));
    }

    @Override
    public int getItemCount() {
         return mDatas.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        TextView tv;

        public MyViewHolder(View view) {
            super(view);
            tv = (TextView)itemView.findViewById(R.id.tv);
        }
    }
}
3、布局文件

MainActivity的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

item的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#ff33b5e5"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center"
        tools:text="別看了，我就是一個(gè)TextView" />
</RelativeLayout>
4、效果圖

我們可以看到：
1）、item增加時(shí)，就是一個(gè)透明度alpha由0到1的動(dòng)畫(huà)
2）、item減少時(shí)，就是一個(gè)透明度alpha由1到0的動(dòng)畫(huà)
剩下兩種動(dòng)畫(huà)，有興趣的可以自己去看看

三、實(shí)現(xiàn)我們自己想要的動(dòng)畫(huà)效果
1、怎么實(shí)現(xiàn)

按照我們的想法：繼承DefaultItemAnimator，重寫動(dòng)畫(huà)執(zhí)行的幾個(gè)方法，不就可以實(shí)現(xiàn)我們自己的動(dòng)畫(huà)效果了嗎.

可惜的是，DefaultItemAnimator中執(zhí)行動(dòng)畫(huà)的幾個(gè)方法，都被private修飾了，我們不能繼承~~

既然不能繼承，我們干脆把DefaultItemAnimator整篇代碼復(fù)制過(guò)來(lái)，找到實(shí)現(xiàn)動(dòng)畫(huà)的幾個(gè)方法，改吧改吧，不就是我們的了嗎.

2、DefaultItemAnimator中更改動(dòng)畫(huà)效果的幾個(gè)方法
animateAdd( ) 
animateAddImpl( )

animateRemove( )
animateRemoveImpl( )

animateMove( )
animateMoveImpl( )

animateChange( )
animateChangeImpl( )
3、實(shí)現(xiàn)我們的item增加動(dòng)畫(huà)

（1）系統(tǒng)方法：animateAdd( ) 、animateAddImpl( )源碼

//添加item時(shí)調(diào)用，通常返回true
    @Override
    public boolean animateAdd(final RecyclerView.ViewHolder holder) {
        resetAnimation(holder);//重置動(dòng)畫(huà)，這個(gè)方法最終指向endAnimation，取消之前執(zhí)行的動(dòng)畫(huà)，同時(shí)恢復(fù)Item的狀態(tài)
        ViewCompat.setAlpha(holder.itemView, 0);//item執(zhí)行動(dòng)畫(huà)之前的狀態(tài)?
        mPendingAdditions.add(holder);
        return true;
    }

void animateAddImpl(final ViewHolder holder) {
        final View view = holder.itemView;//拿到我們執(zhí)行動(dòng)畫(huà)的itemView
        final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);//開(kāi)啟一個(gè)屬性動(dòng)畫(huà)
        mAddAnimations.add(holder);//DefaultItemAnimator中執(zhí)行動(dòng)畫(huà)是將所有item的將要執(zhí)行的動(dòng)畫(huà)放入ArrayLists，一起執(zhí)行他們


//下面就是動(dòng)畫(huà)的邏輯了，這里執(zhí)行了一個(gè)alpha動(dòng)畫(huà)，設(shè)置了一個(gè)執(zhí)行時(shí)間，就是這么簡(jiǎn)單！?。?
        animation.alpha(1).setDuration(getAddDuration()).
                setListener(new VpaListenerAdapter() {//設(shè)置了一個(gè)監(jiān)聽(tīng)

/**
 * 動(dòng)畫(huà)開(kāi)始時(shí)...
 */
                    @Override
                    public void onAnimationStart(View view) {
                        dispatchAddStarting(holder);// 通知?jiǎng)赢?huà)開(kāi)始
                    }
/**
 * 動(dòng)畫(huà)取消時(shí)...
 */
                    @Override
                    public void onAnimationCancel(View view) {
                        ViewCompat.setAlpha(view, 1);
                    }

/**
 * 動(dòng)畫(huà)結(jié)束時(shí)...
 *        
 */
                    @Override
                    public void onAnimationEnd(View view) {
                        animation.setListener(null);//取消監(jiān)聽(tīng)
                        dispatchAddFinished(holder);//通知?jiǎng)赢?huà)結(jié)束
                        mAddAnimations.remove(holder);// 從動(dòng)畫(huà)隊(duì)列中移除
                        dispatchFinishedWhenDone();
                    }
                }).start();
    }

（2）實(shí)現(xiàn)我們自己的animateAdd( ) 、animateAddImpl( )方法

    @Override
    public boolean animateAdd(final RecyclerView.ViewHolder holder) {
        resetAnimation(holder);
        ViewCompat.setAlpha(holder.itemView, 0);
//這里我們?cè)黾恿艘粋€(gè)平移動(dòng)畫(huà)
        ViewCompat.setTranslationX(holder.itemView,-holder.itemView.getWidth());
        mPendingAdditions.add(holder);
        return true;
    }

    void animateAddImpl(final RecyclerView.ViewHolder holder) {
        final View view = holder.itemView;
        final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);
        mAddAnimations.add(holder);
//這里我們?cè)黾恿艘粋€(gè)平移動(dòng)畫(huà)
        animation.alpha(1).translationX(0).setDuration(getAddDuration).
                setListener(new VpaListenerAdapter() {
                    @Override
                    public void onAnimationStart(View view) {
                        dispatchAddStarting(holder);
                    }
                    @Override
                    public void onAnimationCancel(View view) {
                        ViewCompat.setAlpha(view, 1);
                    }

                    @Override
                    public void onAnimationEnd(View view) {
                        animation.setListener(null);
                        dispatchAddFinished(holder);
                        mAddAnimations.remove(holder);
                        dispatchFinishedWhenDone();
                    }
                }).start();
    }

同時(shí)在Activity中將動(dòng)畫(huà)改成我們自己的：

        MyItemAnimator myItemAnimator = new MyItemAnimator();
        myItemAnimator.setAddDuration(1000);
        myItemAnimator.setRemoveDuration(1000);
        mRecyclerView.setItemAnimator(myItemAnimator);

（3）效果圖



ok，我們可以看到，item增加時(shí)增加了平移的動(dòng)畫(huà).

4、實(shí)現(xiàn)我們的item刪除動(dòng)畫(huà)

（1）系統(tǒng)方法：animateRemove( ) 、animateRemoveImpl( )源碼

    @Override
    public boolean animateRemove(final ViewHolder holder) {
        resetAnimation(holder);
        mPendingRemovals.add(holder);
        return true;
    }

    private void animateRemoveImpl(final ViewHolder holder) {
        final View view = holder.itemView;
        final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);
        mRemoveAnimations.add(holder);
//這里執(zhí)行了一個(gè)淡出動(dòng)畫(huà)
        animation.setDuration(getRemoveDuration())
                .alpha(0).setListener(new VpaListenerAdapter() {
            @Override
            public void onAnimationStart(View view) {
                dispatchRemoveStarting(holder);
            }
/**
 * 動(dòng)畫(huà)結(jié)束時(shí)...
 *  因?yàn)閺?fù)用布局，所以你將控件刪除的時(shí)候需要將他還原，要不會(huì)出現(xiàn)重復(fù)問(wèn)題ViewCompat.setAlpha(view, 1);
 */
            @Override
            public void onAnimationEnd(View view) {
                animation.setListener(null);
                ViewCompat.setAlpha(view, 1);
                dispatchRemoveFinished(holder);
                mRemoveAnimations.remove(holder);
                dispatchFinishedWhenDone();
            }
        }).start();
    }

（2）實(shí)現(xiàn)我們自己的animateRemove( ) 、animateRemoveImpl( )方法

    @Override
    public boolean animateRemove(final RecyclerView.ViewHolder holder) {
        resetAnimation(holder);
        mPendingRemovals.add(holder);
//這里我們?cè)黾恿艘粋€(gè)平移動(dòng)畫(huà)
        ViewCompat.setTranslationX(holder.itemView,0);
        return true;
    }

    private void animateRemoveImpl(final RecyclerView.ViewHolder holder) {
        final View view = holder.itemView;
        final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);
        mRemoveAnimations.add(holder);
//這里我們?cè)黾恿艘粋€(gè)平移動(dòng)畫(huà)
        animation.setDuration(getRemoveDuration())
                .alpha(0).translationX(-holder.itemView.getWidth()).setListener(new VpaListenerAdapter() {
            @Override
            public void onAnimationStart(View view) {
                dispatchRemoveStarting(holder);
            }

            @Override
            public void onAnimationEnd(View view) {
                animation.setListener(null);
                ViewCompat.setAlpha(view, 1);
                ViewCompat.setTranslationX(view,0);//因?yàn)閺?fù)用布局，此處需還原
                dispatchRemoveFinished(holder);
                mRemoveAnimations.remove(holder);
                dispatchFinishedWhenDone();
            }
        }).start();
    }

（3）效果圖



ok，我們item刪除時(shí)多了平移效果

四、小結(jié)

可以看到，自己寫還是比較麻煩的，在GitHup上有一些非常不錯(cuò)的動(dòng)畫(huà)庫(kù)，我們可以拿來(lái)直接使用.

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容