RecyclerView之条目动画

一，自带的条目动画

我们先来看看系统自带的动画设置实现：

        rv_content.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false) as RecyclerView.LayoutManager?//设置显示方式
        mAdapter = RecyclerViewSimpleAdapter(this, itemList)
        rv_content.adapter = mAdapter
        rv_content.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))//系统默认间隔线
        rv_content.itemAnimator = DefaultItemAnimator()//系统默认动画

这样我们就实现了动画的添加，通过添加和删除可以看出默认的动画为：Alpha形式。

二，第三方条目动画

2.1，第三方github地址：

github地址:recyclerview-animators

2.2，添加依赖

compile 'jp.wasabeef:recyclerview-animators:2.2.6'

2.3，动画使用

2.3.1 子条目进入动画

        rv_content.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false) as RecyclerView.LayoutManager?//设置显示方式
        mAdapter = RecyclerViewSimpleAdapter(this, itemList)
        val adapter = SlideInLeftAnimationAdapter(mAdapter)//从左侧进入
        rv_content.adapter = adapter
        rv_content.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))//系统默认间隔线
        rv_content.itemAnimator = DefaultItemAnimator()//系统默认动画

通过SlideInLeftAnimationAdapter(mAdapter)我们就将子条目从左进入动画设置成功了。当然还提供了从右的方法SlideInRightAnimationAdapter(mAdapter),从下的方法SlideInBottomAnimationAdapter(mAdapter)，缩放进入方法：ScaleInAnimationAdapter(mAdapter)，渐变进入方法：AlphaInAnimationAdapter(mAdapter)等等。
上面的方法都只能设置一种效果，可以将上面的方法组合起来，来设置子条目的进入动画

        rv_content.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false) as RecyclerView.LayoutManager?//设置显示方式
        mAdapter = RecyclerViewSimpleAdapter(this, itemList)
        val adapter = SlideInLeftAnimationAdapter(mAdapter)//从左侧进入
        val adapterSec = ScaleInAnimationAdapter(adapter)//缩放进入
        rv_content.adapter = adapterSec
        rv_content.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))//系统默认间隔线
        rv_content.itemAnimator = DefaultItemAnimator()//系统默认动画

2.3.2 子条目添加删除动画

        rv_content.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false) as RecyclerView.LayoutManager?//设置显示方式
        mAdapter = RecyclerViewSimpleAdapter(this, itemList)
        val adapter = SlideInLeftAnimationAdapter(mAdapter)//从左侧进入
        val adapterSec = ScaleInAnimationAdapter(adapter)//缩放进入
        rv_content.adapter = adapterSec
        rv_content.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))//系统默认间隔线
        rv_content.itemAnimator = SlideInLeftAnimator()//从左边进入，从左边退出

上面设置了添加子条目时从左边进入，删除时从左边退出。这个设置子条目添加和删除动画有好多种类型，这里就不一一列举了。
这里也可以更改插值器

        rv_content.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false) as RecyclerView.LayoutManager?//设置显示方式
        mAdapter = RecyclerViewSimpleAdapter(this, itemList)
        val adapter = SlideInLeftAnimationAdapter(mAdapter)//从左侧进入
        val adapterSec = ScaleInAnimationAdapter(adapter)//缩放进入
        rv_content.adapter = adapterSec
        rv_content.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))//系统默认间隔线
        val animator = SlideInUpAnimator(OvershootInterpolator(2f))//向前甩一定值后再回到原来位置
        rv_content.itemAnimator = animator

在这里更改的是向上动画的插值器。更改插值器的方法也有很多种，自己可以试试。

2.3.3 动画时间设置

        rv_content.layoutManager = LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false) as RecyclerView.LayoutManager?//设置显示方式
        mAdapter = RecyclerViewSimpleAdapter(this, itemList)
        val adapter = SlideInLeftAnimationAdapter(mAdapter)//从左侧进入
        val adapterSec = ScaleInAnimationAdapter(adapter)//缩放进入
        rv_content.adapter = adapterSec
        rv_content.addItemDecoration(DividerItemDecoration(this, DividerItemDecoration.VERTICAL))//系统默认间隔线
        val animator = SlideInUpAnimator(OvershootInterpolator(2f))//向前甩一定值后再回到原来位置
        rv_content.itemAnimator = animator
        rv_content.itemAnimator.addDuration = 3000//设置新增动画时长
        rv_content.itemAnimator.removeDuration = 1000//设置移除动画时长
        rv_content.itemAnimator.moveDuration = 1000//设置移动动画时长
        rv_content.itemAnimator.changeDuration = 1000//设置所有变化动画时长

2.3.4 动画自定义

如果上面的没有你想要的效果，例如‘添加从右侧进，删除从左侧出’，那么我们就需要自己定制了

class CustomSlideInRightAnimtor : BaseItemAnimator{
    constructor()

    constructor(interpolator: Interpolator) {
        mInterpolator = interpolator
    }

    override fun animateRemoveImpl(holder: RecyclerView.ViewHolder?) {
       val viewCompat: ViewPropertyAnimatorCompat = ViewCompat.animate(holder!!.itemView)
        viewCompat.duration = removeDuration
        viewCompat.interpolator = mInterpolator
        viewCompat.startDelay = getRemoveDelay(holder)
        viewCompat.setListener(DefaultRemoveVpaListener(holder))
        viewCompat.translationX((-holder.itemView.rootView.width).toFloat())
        viewCompat.start()
    }

    override fun preAnimateAddImpl(holder: RecyclerView.ViewHolder?) {
        ViewCompat.setTranslationX(holder!!.itemView, (holder.itemView.rootView.width).toFloat())
    }

    override fun animateAddImpl(holder: RecyclerView.ViewHolder?) {
        val viewCompat: ViewPropertyAnimatorCompat = ViewCompat.animate(holder!!.itemView)
        viewCompat.duration = removeDuration
        viewCompat.interpolator = mInterpolator
        viewCompat.startDelay = getRemoveDelay(holder)
        viewCompat.setListener(DefaultRemoveVpaListener(holder))
        viewCompat.translationX(0F)
        viewCompat.start()
    }
}

定制动画的使用

rv_content.itemAnimator = CustomSlideInRightAnimtor()//自定义动画，从右边进入，从左边退出

这样就实现了我们需要的效果。

三，子条目的拖拽动画

系统提供了拖拽类ItemTouchHelper，具体的拖拽实现实在ItemTouchHelper.SimpleCallback中，我们只要实现了其中的onSwiped,onMove方法，也就完成了拖拽的操作

val itemTouchHelper = ItemTouchHelper(object : ItemTouchHelper.SimpleCallback(ItemTouchHelper.UP or ItemTouchHelper.DOWN or ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT, ItemTouchHelper.START or ItemTouchHelper.END){

            override fun onMove(recyclerView: RecyclerView?, viewHolder: RecyclerView.ViewHolder?, target: RecyclerView.ViewHolder?): Boolean {
                val fromPosition = viewHolder!!.adapterPosition
                val toPosition = target!!.adapterPosition
                if (fromPosition < toPosition){
                    for (i in fromPosition..toPosition-1){
                        Collections.swap(itemList, i, i+1)
                    }
                }else{
                    for (i in fromPosition downTo toPosition + 1){
                        Log.e("hjd", "fromPosition:$fromPosition,toPosition:$toPosition,i:$i")
                        Collections.swap(itemList, i, i-1)
                    }
                }

                mAdapter!!.notifyItemMoved(fromPosition, toPosition)
                return true
            }

            override fun onSwiped(viewHolder: RecyclerView.ViewHolder?, direction: Int) {
                val position = viewHolder!!.adapterPosition
                itemList.removeAt(position)
                mAdapter!!.notifyItemRemoved(position)
            }

        })

        itemTouchHelper.attachToRecyclerView(rv_content)

好了这个第三方的条目动画的使用就简单说到这里了，下一篇RecyclerView Header和Footer的添加

四，参考文章

github地址:[recyclerview-animators]: https://github.com/wasabeef/recyclerview-animators