android侧滑菜单 动画,Android仿QQ左侧滑菜单实现

看了QQ里的左侧滑菜单，发现跟我们平时用MenuDrawer实现的抽屉效果有一些不同：

区别1、QQ的内容区域会伴随菜单的出现而缩小

区别2、QQ的侧滑菜单给人的感觉是隐藏在内容的后面，而不是拖出来的感觉

区别3、QQ的侧滑菜单有一个缩放以及透明度的效果

那么我们如何能做到呢：

对于区别1：这个好办，我们可以在滑动的时候，不断的改变内容区域的大小；如何改变呢？我们在菜单出现的整个过程中，不断记录菜单显示的宽度与其总宽度的比值，是个从0到1的过程，然后把0~1转化为1~0.7(假设内容区域缩小至0.7)；不断去缩小内容区域；

对于区别3：也比较好办，上面已经可以得到0到1的这个值了，那么缩放和透明度的动画就不在话下了；

对于区别2：我们使用的HorizontalScrollView，然后水平放置了菜单和内容，如何让菜单可以隐藏到内容的后面呢？其实也比较简单，在菜单出现的过程中，不断设置菜单的x方向的偏移量；0的时候完全隐藏，0.3的时候，隐藏x方向偏移量为0.7个宽度，类推。

下面是动画比例的计算：

我们在onScrollChanged里面，拿到 l 也就是个getScrollX，即菜单已经显示的宽度值；

float scale = l * 1.0f / mMenuWidth;

与菜单的宽度做除法运算，在菜单隐藏到显示整个过程，会得到1.0~0.0这么个变化的区间；有了这个区间，就可以根据这个区间设置动画了；

1、首先是内容区域的缩放比例计算：

我们准备让在菜单出现的过程中，让内容区域从1.0~0.8进行变化

那么怎么把1.0~0.0转化为1.0~0.8呢，其实很简单了：

float rightScale = 0.8f + scale * 0.2f; (scale 从1到0 )

2、菜单的缩放比例计算

仔细观察了下QQ，菜单大概缩放变化是0.7~1.0

float leftScale = 1 - 0.3f * scale;

3、菜单的透明度比例：

我们设置为0.6~1.0；即：

0.6f + 0.4f * (1 - scale)

4、菜单的x方向偏移量：

看一下QQ，并非完全从被内容区域覆盖，还是有一点拖出的感觉，所以我们的偏移量这么设置：

tranlateX = mMenuWidth * scale * 0.6f ；刚开始还是让它隐藏一点点

先看一下实现的效果：

  

源网址：http://blog.csdn.net/lmj623565791/article/details/39257409

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/11050.html

微信打赏

支付宝打赏

感谢您对作者Lena的打赏，我们会更加努力！    如果您想成为作者，请点我