QQ测拉效果实现（二）

转载本文请注明出处，尊重原创：

如果想第一时间收到文章更新，可以微信扫描二维码关注我的公众号，或者微信直接搜索“Android小菜”进行关注，所有的文章会比CSDN更快一步：

上一篇案例实现了最基本的QQ测拉效果，没有看上一篇的话可以点击链接先看上一篇文章：QQ测拉效果实现（一）本篇在上一篇的基础上实现抽屉效果以及实现测拉缩放效果，何为抽屉效果，请看下图：

其实实现这个效果特别的简单，主要还是选择使用HorizontalScrollView的原因。

为了兼容低版本实现属性动画效果，需要引入nineoldandroids包，使用它的工具类。

然后只需要在自定义控件里面加入下面几行代码就搞定了：

/**
     * 只要ScrollView改变，该方法就会被调用
     * @param l = getScrollX()的值
     */
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        float scale = l*1.0f / mLeftMenuWidth;//1-0
        // 参数二 mLeftMenu控件移动的距离
        ViewHelper.setTranslationX(mLeftMenu,mLeftMenuWidth*scale);
    }

虽然代码简单，但是解释起来就特别的绕，下面使用图的方式来举例：

蓝笔标注的表示左侧菜单，红笔表示主页面内容，绿笔表示自定义的QQSlindingMenu。

setTranslationX(mLeftMenu,150);

表示mLeftMenu这个控件往右边平移150dp的距离。

假设说leftMenu的宽度为200，此时手指移动控件50，则此时的getScrollX() = l = 150。为了让左侧菜单，展示的样式像是被主页面布局盖住。则需要把左侧菜单往右平移150；此时的效果，就像是左侧菜单被盖住了，且移动50，就让左侧菜单从左往右暂时50.也就是说，leftMenu平移的距离跟getScrollX()的距离成正比（且等比例）关系。见蓝笔展示样子。
再假如，手指移动了150，此时getScrollX() = l = 50，让左侧菜单再往右移动50，效果如下：

以上实现了抽屉效果，接下来实现缩放效果，最终的实现效果gif展示如下：

这种效果该如何实现呢？

可以看得，核心地方在于动画，且动画有两种：

1、缩放动画；2、渐变动画

分析：

1、缩放动画：

应该分两块来设置，左侧菜单应该从0.7（自己随意设定）-->1.0，右侧菜单应该从1.0--->0.7

比例计算可以通过如下公式：(scale是上面的那个比例值，随着左侧菜单的展示是从1-->0)。

leftScale = 1.0f - scale * 0.3f;

rightScale = 0.7f + scale * 0.3f;

然后修改onScrollChange()方法加入如下代码：

然后运行程序：

基本的效果是展示了，但是存在两个bug。下面一一说明：

bug（一）：

右侧菜单隐藏的时候，最后的padding值跟以往的padding值不符合，应该是50，而此时的距离是50*0.7=35，少了15.这是因为最后比例动画为原来控件的0.7倍的原因导致的。

主要原因是，动画缩放默认中心点在于控件的中心。因此，要修改动画缩放中心点，修改到左侧(x=0,y=height/2)就行了。

加入两行代码：

ViewHelper.setPivotX(mContentMenu,0);
ViewHelper.setPivotY(mContentMenu,mContentMenu.getHeight()/2);

bug（二）：

左侧菜单在刚刚拖拽的时候，应该有一部分是“隐藏”起来的，而不是完全状态的展示，因此修改如下代码：

ViewHelper.setTranslationX(mLeftMenu,mLeftMenuWidth*scale*0.7f);

表示左侧菜单平移距离是原来的0.7倍。

展示效果如下：

2、渐变动画

最后，再给左侧的菜单加入渐变动画效果，它应该从半透明状态，到完全不透明状态。

加入如下代码：

//渐变动画梯度值
float leftAlpha = 1.0f - scale * 0.4f;
//左侧菜单的渐变
ViewHelper.setAlpha(mLeftMenu,leftAlpha);
ViewHelper.setAlpha(mLeftMenu,leftAlpha);

最后再运行程序：

感兴趣可以关注公众号：“Android小菜”。