简单的属性动画解决折叠窗(抽屉)动画问题

1. 背景
2. 使用方法

背景

最近有个需求要实现折叠窗的问题,效果如下

在网上找的方案基本上都是自定义View,这里自己做了一个属性动画的工具类,让你很灵活的实现上述效果.

使用方法

2.1现在提供工具类代码

public class OpenShrinkAnimUtil {
    /**
     * 展开布局动画
     */
    public static void animateOpen(View v,int mHiddenViewMeasuredHeight) {
        v.setVisibility(View.VISIBLE);
        ValueAnimator animator = createDropAnimator(v, 0,
                mHiddenViewMeasuredHeight);
        animator.start();

    }

    /**u
     * 关闭布局动画
     */
    public static void animateClose(final View view) {
        int origHeight = view.getHeight();
        ValueAnimator animator = createDropAnimator(view, origHeight, 0);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                view.setVisibility(View.GONE);
            }

        });
        animator.start();
    }

    /**
     * 顺时针旋转180°箭头动画
     */
    public static void animationIvOpen(View v) {
        RotateAnimation animation = new RotateAnimation(0, 90,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                0.5f);
        animation.setFillAfter(true);
        animation.setDuration(100);
        v.startAnimation(animation);
    }

    /**
     * 逆时针旋转180°箭头动画
     */
    public static void animationIvClose(View v) {
        RotateAnimation animation = new RotateAnimation(90, 0,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
                0.5f);
        animation.setFillAfter(true);
        animation.setDuration(100);
        v.startAnimation(animation);
    }

    /**
     * 创建动画
     *
     * @param v     需要实现动画下效果的视图
     * @param start 开始高度
     * @param end   结束高度
     * @return 动画对象
     */
    private static ValueAnimator createDropAnimator(final View v, int start, int end) {
        ValueAnimator animator = ValueAnimator.ofInt(start, end);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator arg0) {
                int value = (int) arg0.getAnimatedValue();
                ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
                layoutParams.height = value;
                v.setLayoutParams(layoutParams);
            }
        });
        return animator;
    }

一共四个方法

1.箭头顺时针旋转90°动画
2.箭头逆时针旋转90°动画
3.展开布局动画
4.关闭布局动画

2.2那么接下就是如何使用了

点击折叠栏的时候,我们判断一下当前展开布局是否可见就可以了,如果可见则隐藏,如果隐藏了,则设置为可见.注意这里我们需要拥有一个箭头朝右的图片

  /**
     *主要就是展开布局动画，和箭头朝下的动画，注意这里我们需要一个向右的箭头图片
     * @param layParamSetting 想要展开隐藏的布局
     * @param rightArrow 右边的箭头
     */
    private void controlPanel(View layParamSetting,View rightArrow) {
        //如果布局被隐藏了，则展开
        if (layParamSetting.getVisibility() == View.GONE) {
            OpenShrinkAnimUtil.animateOpen(layParamSetting, DEFAULT_PARAM_SETTING_HEIGHT);
            OpenShrinkAnimUtil.animationIvOpen(rightArrow);
        } else {
            OpenShrinkAnimUtil.animateClose(layParamSetting);
            OpenShrinkAnimUtil.animationIvClose(rightArrow);
        }
    }

DEFAULT_PARAM_SETTING_HEIGHT是展开布局的高度,我们只需在VIew绘制完成的时候去拿它的高度即可.可以利用View.post(Runnable action)方法来获取高度.代码如下:

mLayParamSetting.post(new Runnable() {
                @Override
                public void run() {
                //获取展开动画的高度.
					DEFAULT_PARAM_SETTING_HEIGHT  = mLayParamSetting.getMeasuredHeight();                  
                }
            });

或者我们可以直接在布局的时候将高度设置成固件值.

至此就完成了上述动画.

如果任何疑问,请联系邮箱:[email protected]