仿iOS版ofo（小黄车）首页菜单动画

首页菜单动画"/>

仿iOS版ofo（小黄车）首页菜单动画

点击上方蓝字关注码个蛋

产品：来个iOS版ofo菜单效果。开发：没问题！

作者博客

源码地址

文章目录

• 前言

• 使用

• 分析

• 总结

0

前言

最近又是公司项目上线一段时间了，又是到了程序汪整理代码的节奏了。刚好也用到了ofo主页菜单的效果，于是自己把这部分给整理出来，供小伙伴们一起学习学习。还是和往常一样，先来个效果图再说，这里由于不好在苹果手机上录制屏幕，所以这次的效果图很骚，望大家勿喷哈~~

是不是很骚气呢，笑笑就可以了啊。下面进入主题，看看如何搭建这样的效果，还没看看自己做出来的效果呢，下面也来看看自己的效果图吧:

1

使用

布局:

启动menu:

关闭menu:

menu的监听:

给menu设置content部分:

2

分析

为了更好地理解代码，在上代码之前可以看看自己画的图:

从草图整体来看，最外层是包裹了OfoMenuLayout,它是专门来管理我们的title和content部分，不难理解它里面就两个直接的孩子:

上面的title部分就没什么好说的了，就是一个相对布局,右上角放了一个关闭按钮,咱们主要是看下Content部分，静态感受下Content的背景是如何生成的，可以见OfoMenuActivity设置了这么一句代码:

Content背景设置:

可以看到这里new了一个MenuBrawable，没错!!!这里是自定义了一个Drawable，那就去看下构造器吧。

MenuBrawable构造器:

这里什么也没有干，就初始化了一些常量

下面就是初始化背景path以及图片部分，具体在onBoundsChange方法进行处理：

处理好path轨迹以及bitmap缩放和中心位置确定后，下面就剩下绘制了，Drawable跟我们的View很像，也有自己的绘制。

Drawable绘制:

在绘制的时候用到了paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN))，关于PorterDuffXfermode传的mode网上有对应的图:

简单吧，这就是我们Content部分的背景绘制了，关于Drawable的绘制可以见:

/

最后给张我们Content部分绘制出来的效果图:

下面就是动态部分的处理了，其实是对三部分在y轴的平移。下面继续回到我们的草图中，去看下外层的OfoMenuLayout

获取title和content:

菜单打开的动画:

定义动画:

菜单关闭的动画:

上面的打开和关闭的动画，其实就是调换了起始坐标，好了动画就是这么简单啊，需要主要在动画期间是不允许事件分发的，需要处理事件分发部分。

事件处理:

两处的动画已经说完了，还就剩下OfoContentLayout中的动画了。下面也来一起看看吧：

初始化所有的child:

启动OfoContentLayout中动画:

3

总结

(1)初始化好content和title两部分的位置

(2)自定义好content部分的Drawable(MenuBrawable)

(3)在OfoMenuLayout中处理content和title的打开和关闭动画

(4)在OfoContentLayout中处理打开的动画，它是不需要关闭动画的

分享是一种美德，分享你的方案，让大家学习，共同进步，欢迎投稿。