RecyclerView使用LayoutTransition实现布局过渡动画
一、目标
上图为普通状态和编辑状态的界面图。
普通状态切换到编辑状态,需要切换删除按钮和拖拽按钮的可见性,并实现切换过程的动画效果。
二、体验地址
神马笔记最新版本:【神马笔记 版本1.3.0.apk】
三、功能设计
如果不设置动画效果,整个界面的切换过程将会非常生硬。
因此,我们添加如下的过渡动画。
- 切换到编辑状态
- 删除按钮——从左侧淡入(translationX + alpha)
- 拖拽按钮——从右侧进入(translationX)
- 切换到普通状态
- 删除按钮——从左侧淡出(translationX + alpha)
- 拖拽按钮——从右侧退出(translationX)
四、准备工作
1. LayoutTransition
ViewGroup
使用LayoutTransition
即可为布局变化应用动画效果。
ViewGroup#setLayoutTransition(LayoutTransition)
android:animateLayoutChanges="true"
通过代码或者资源文件方式,都可以启用ViewGroup
的布局过渡动画效果。
LayoutTransition
支持5中情景的动画,但经常使用的只有4种。
常量定义 | 动画效果 |
---|---|
CHANGE_APPEARING | 其他控件出现时,自身的变化动画 |
CHANGE_DISAPPEARING | 其他控件消失时,自身的变化动画 |
APPEARING | 自身出现时的动画 |
DISAPPEARING | 自身消失时的动画 |
CHANGING | ViewGroup自身布局发生变化时,而不是子控件发生变化。默认关闭。 |
private int mTransitionTypes = FLAG_CHANGE_APPEARING | FLAG_CHANGE_DISAPPEARING |
FLAG_APPEARING | FLAG_DISAPPEARING;
LayoutTransition
动画的默认值。
动画常量 | Delay | Interpolator | Animator |
---|---|---|---|
CHANGE_APPEARING | 0 | DECEL | CHANGE动画 |
CHANGE_DISAPPEARING | 300 | DECEL | CHANGE动画 |
APPEARING | 300 | ACCEL_DECEL | ObjectAnimator.ofFloat(null, “alpha”, 0f, 1f) |
DISAPPEARING | 0 | ACCEL_DECEL | ObjectAnimator.ofFloat(null, “alpha”, 1f, 0f) |
CHANGING | 0 | DECEL | CHANGE动画 |
CHANGE动画
PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left", 0, 1);
PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top", 0, 1);
PropertyValuesHolder pvhRight = PropertyValuesHolder.ofInt("right", 0, 1);
PropertyValuesHolder pvhBottom = PropertyValuesHolder.ofInt("bottom", 0, 1);
PropertyValuesHolder pvhScrollX = PropertyValuesHolder.ofInt("scrollX", 0, 1);
PropertyValuesHolder pvhScrollY = PropertyValuesHolder.ofInt("scrollY", 0, 1);
ObjectAnimator.ofPropertyValuesHolder