RecyclerView使用LayoutTransition实现布局过渡动画

一、目标
二、体验地址
三、功能设计
四、准备工作

1. LayoutTransition
2. TransitionListener

五、组合起来

1. 设置LayoutTransition参数
2. 设置初始值
3. 设置动画
4. 处理Alpha
5. 检查动画效果

六、Finally

一、目标

在这里插入图片描述
上图为普通状态和编辑状态的界面图。

普通状态切换到编辑状态，需要切换删除按钮和拖拽按钮的可见性，并实现切换过程的动画效果。

二、体验地址

神马笔记最新版本：【神马笔记版本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((Object)null,
                                      pvhLeft, pvhTop, pvhRight, pvhBottom, 
                                      pvhScrollX, pvhScrollY);

LayoutTransition提供了set/get接口，可以修改动画属性。

注意事项
1. 控件APPEARING时，默认有300s的延迟，等到CHANGE_APPEARING空出位置后才会开始动画；
2. 控件CHANGE_DISAPPEARING时，默认有300s的延迟，等到DISAPPEARING释放出位置才会开始动画；
3. APPEARING，DISAPPEARING的动画效果为淡入淡出，因此决定了以上2个默认值；
4. DISAPPEARING动画结束后，会恢复动画前的alpha值；

anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator anim) {
                currentDisappearingAnimations.remove(child);
                child.setAlpha(preAnimAlpha);
                
                // ……
            }
        });

总结

LayoutTransition默认的动画效果已经非常不错，通常不需要进行其他设置。

如果需要自身设置动画，除了设置Animator之外，还需要注意设置StartDelay、Interpolator、Stagger等参数。

2. TransitionListener

我门设计的2组的动画效果。

切换到编辑状态
- 从左侧淡入（translationX + alpha）
- 从右侧进入（translationX）
切换到普通状态
- 从左侧淡出（translationX + alpha）
- 从右侧退出（translationX）

显然LayoutTransition默认的APPEARING，DISAPPEARING动画效果，无法满足需求。

另外，2个按钮应用了不同的动画效果，需要分开来设置Animator才能达到效果。

因此，我们需要设置TransitionListener动态设置参数。

public interface TransitionListener {

    public void startTransition(LayoutTransition transition, ViewGroup container,
                                View view, int transitionType);

    public void endTransition(LayoutTransition transition, ViewGroup container,
                              View view, int transitionType);
}

五、组合起来

1. 设置LayoutTransition参数

this.layoutTransition = new LayoutTransition();
layoutTransition.addTransitionListener(this);

layoutTransition.setInterpolator(LayoutTransition.APPEARING,
                            layoutTransition.getInterpolator(LayoutTransition.CHANGE_APPEARING));
layoutTransition.setInterpolator(LayoutTransition.DISAPPEARING,
                                 layoutTransition.getInterpolator(LayoutTransition.CHANGE_DISAPPEARING));

layoutTransition.setStartDelay(LayoutTransition.APPEARING, 0);
layoutTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING, 0);

因为从左右同时出现，将APPEARING和CHANGE_DISAPPEARING的延迟时间均设置为0。
将Interpolator设置为相同值，保持动画一致。

2. 设置初始值

view.addOnLayoutChangeListener((v, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom) -> {

    if (!isEdit) {
        removeBtn.setAlpha(0);
        removeBtn.setTranslationX(-iconView.getRight());

        dragBtn.setTranslationX(iconView.getRight());
    }

});

因为removeBtn和dragBtn默认的可见性为GONE，不会被布局。如果使用默认值，动画前后的数值是相同的，不会产生动画效果。

因此，必须要布局完成后，设置初始值。

这里使用iconView来设置初始值，也可以使用其他方式。

3. 设置动画

public void startTransition(LayoutTransition transition, ViewGroup container, View view, int transitionType) {

    if (view == removeBtn) {

        Animator animator = null;
        if (transitionType == LayoutTransition.APPEARING) {
            animator = ObjectAnimator.ofPropertyValuesHolder(view,
                    PropertyValuesHolder.ofFloat(View.ALPHA, 1.f),
                    PropertyValuesHolder.ofFloat(View.TRANSLATION_X, 0.f));

        } else if (transitionType == LayoutTransition.DISAPPEARING) {
            animator = ObjectAnimator.ofPropertyValuesHolder(view,
                    PropertyValuesHolder.ofFloat(View.ALPHA, 0.f),
                    PropertyValuesHolder.ofFloat(View.TRANSLATION_X, -view.getRight()));

        }

        transition.setAnimator(transitionType, animator);
    }

    if (view == dragBtn) {

        ObjectAnimator animator = null;
        if (transitionType == LayoutTransition.APPEARING) {
            animator = ObjectAnimator.ofPropertyValuesHolder(view,
                    PropertyValuesHolder.ofFloat(View.TRANSLATION_X, 0));

        } else if (transitionType == LayoutTransition.DISAPPEARING) {
            animator = ObjectAnimator.ofPropertyValuesHolder(view,
                    PropertyValuesHolder.ofFloat(View.TRANSLATION_X, itemView.getWidth() - view.getLeft()));
        }

        transition.setAnimator(transitionType, animator);
    }
}

因为removeBtn和dragBtn的动画不相同，因此需要在startTransition事件中进行设置。

4. 处理Alpha

public void endTransition(LayoutTransition transition, ViewGroup container, View view, int transitionType) {
    if (view == removeBtn) {
        if (transitionType == LayoutTransition.DISAPPEARING) {
            view.setAlpha(0);
        }
    }

    super.endTransition(transition, container, view, transitionType);
}

由于DISAPPEARING动画结束后，会将alpha设置会默认值。

因此动画结束后，重新将alpha设置为0。

5. 检查动画效果

void animateEdit(boolean value) {

    {
        ViewGroup layout = itemView.findViewById(R.id.swipe_view);
        if (layout.getLayoutTransition() == null) {
            layout.setLayoutTransition(layoutTransition);
        }
    }

    {
        removeBtn.setVisibility(value? View.VISIBLE: View.GONE);
    }

    {
        dragBtn.setVisibility(value? View.VISIBLE: View.GONE);
    }
}

调用animateEdit实现切换编辑时的动画效果。

六、Finally

在动画完成后必须调用RecyclerView.Adapter#notifyDataSetChanged()通知数据发生变化，否则滑动RecyclerView会出现控件错误的情况。

因为RecyclerView对控件进行缓存，所有必须要调用该接口。

～一觉游仙好梦～任它竹冷松寒～