在Github看到一个老外写的一个3D折叠效果的侧滑菜单demo，效果很不错，想收藏起来为以后项目开发所用。老外的demo是Swift版的，趁最近比较有时间安静下来学习，于是，我决定把它封装成OC版的。
先看看效果
原理
1、使用storyboard来创建整个UI框架，能比较直观地看到这个结构其实很简单
2、主要由左侧列表控制器
MenuViewController和右边的内容控制器DetailViewController构成，这两个控制器分别接上一个导航控制器后分别连到ContainerviewController上。
- 下面是
ContainerviewController视图布局，通过scrollView作为容器来操作左右滑动
主视图.png - scrollView记得打开PagingEnabled
- 其中右边的Container宽度为屏幕的宽度，这样就能通过左右滑动改变
scrollView的contentOffset值来显示或者隐藏左边的菜单
代码（部分关键代码）
1、ContainerViewController.m
在storyboard里面拖出
scrollview和左边的menuContainerView这个两个属性，在viewDidLayoutSubviews里面设置menuContainerView的anchorPoint
-(void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
self.menuContainView.layer.anchorPoint = CGPointMake(1.0, 0.5);
[self hideOrShowMenu:NO animated:NO]; //初始化为隐藏菜单
}
控制
menuContainerView展开或者隐藏，并且在上面的viewDidLayoutSubviews方法里面初始化为隐藏状态
- (void)hideOrShowMenu:(BOOL)isShow animated:(BOOL)isAnimated
{
CGFloat xOffset = CGRectGetWidth(self.menuContainView.bounds);
CGPoint contentOffset = isShow?CGPointZero:CGPointMake(xOffset, 0);
//通过设置contentOffset来隐藏或者显示菜单
[self.scorllView setContentOffset:contentOffset animated:isAnimated];
_isShow = isShow;
}
在scrollView的
scrollViewDidScroll代理方法里面设置左右滑动的判断以及3D效果
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat multiplier = 1.0 / CGRectGetWidth(self.menuContainView.bounds);
CGFloat offset = scrollView.contentOffset.x * multiplier;
CGFloat fraction = 1.0 - offset;
self.menuContainView.layer.transform = [self transformForFraction:fraction];
self.menuContainView.alpha = fraction;
HamburgerView *rotatingView = (HamburgerView *)_detailVC.hamburger;
[rotatingView rotateWithFraction:fraction];
scrollView.pagingEnabled = scrollView.contentOffset.x < (scrollView.contentSize.width - CGRectGetWidth(scrollView.frame));
CGFloat menuOffset = CGRectGetWidth(self.menuContainView.bounds);
_isShow = !CGPointEqualToPoint(CGPointMake(menuOffset, 0), scrollView.contentOffset);
}
- (CATransform3D)transformForFraction:(CGFloat)fraction
{
CATransform3D identity = CATransform3DIdentity;
identity.m34 = -1.0 / 1000.0;
double angle = (1.0 - fraction) * -M_PI_2;
CGFloat xOffset = CGRectGetWidth(self.menuContainView.bounds) * 0.5;
CATransform3D rotateTransform = CATransform3DRotate(identity, angle, 0.0, 1.0, 0.0);
CATransform3D translateTransform = CATransform3DMakeTranslation(xOffset, 0.0, 0.0);
return CATransform3DConcat(rotateTransform, translateTransform);
}
2、MenuViewController.m
这是菜单tableview控制器，主要控制菜单每一项的背景图片和颜色以及点击事件
///加载plist文件中的数据资源
- (void)viewDidLoad {
[super viewDidLoad];
NSString *path = [[NSBundle mainBundle]pathForResource:@"MenuItems" ofType:@"plist"];
_dataArray = [NSArray arrayWithContentsOfFile:path];
}
///tableViewCell点击响应，这里用通知的方法来通知detailView控制器
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
NSDictionary *dict = _dataArray[indexPath.row];
[[NSNotificationCenter defaultCenter]postNotificationName:@"KCallToShowInDetailViewNotification" object:dict];
}
3、HamburgerView.m
展开菜单的点击按钮，这里叫‘汉堡包’，哈。这个view里面需要创建一个imageView视图，还需要一个控制imageView旋转的方法，如下, （这个方法在
scrollViewDidScroll中会调用到）
- (void)rotateWithFraction:(CGFloat)fraction
{
CGFloat angle = fraction * M_PI_2;
_imageView.transform = CGAffineTransformMakeRotation(angle);
}
小结
小结一下：这个侧滑菜单的demo，个人感觉效果还可以，灵活运用scrollview的特性，实现起来也不复杂，以后的项目中可以参照这种UI框架来实现该功能。
附上项目代码：
老外的demo：https://github.com/chris-pilcher/3D-Sidebar-Animation
我的demo：https://github.com/RanYeee/RNLeftSildeMenu
*请各位大神多多指导！
