一,自带的条目动画
我们先来看看系统自带的动画设置实现:
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