上一篇文章讲到如何给主视图做动画.接下来这篇文章会进行第二,第三步.
第二步
这一步 毫无疑问是要给侧边栏设置一个动画效果,使之与主视图的动效协调一致,并给我们这个轮子加上手势识别的功能.
修改presentSideMenu方法
//展示侧边栏
- (void)presentSideMenu{
if (self.sideMenuVisible) return;
//分别设置两个容器类layer的锚点
[self setAnChorPoint:CGPointMake(1.0, 0.5) forView:_mainViewContainer];
[self setAnChorPoint:CGPointMake(0, 0.5) forView:_menuViewContainer];
[self setAnChorPoint:CGPointMake(1.0, 0.5) forView:_mainVC.view];
[UIView animateWithDuration:self.duration animations:^{
CATransform3D mainScaleTransform = _mainViewContainer.layer.transform;
mainScaleTransform = CATransform3DMakeScale(_mainVCScaleValue, _mainVCScaleValue, 1.0f);
//设置mainViewContainer的缩放形变;
_mainViewContainer.layer.transform = mainScaleTransform;
CATransform3D mainTranslateTransform = _mainViewContainer.layer.transform;
mainTranslateTransform = CATransform3DTranslate(mainTranslateTransform, 100, 0, 0);
//设置mainViewContainer的平移形变;
_mainViewContainer.layer.transform = mainTranslateTransform;
//设置menuViewContainer的平移形变
CATransform3D menuTranslateTransform = _menuViewContainer.layer.transform;
menuTranslateTransform = CATransform3DTranslate(menuTranslateTransform, 30, 0, 0);
_menuViewContainer.layer.transform = menuTranslateTransform;
} completion:^(BOOL finished) {
self.sideMenuVisible = YES;
}];
}
为_menuViewContainer添加动画代码并且新建一个sideMenuVisible属性 用于记录侧边栏的显示与否.
接下来是添加手势:
//viewDidLoad中添加如下代码
//添加手势
// 添加滑动的手势手势
UIPanGestureRecognizer * panGes = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(viewDidSlide:)];
[_mainVC.view addGestureRecognizer:panGes];
手势实现:
#pragma mark Pan 手势识别
- (void)viewDidSlide:(UIScreenEdgePanGestureRecognizer *)pan{
CGPoint location = [pan locationInView:self.view];
if (pan.state == UIGestureRecognizerStateBegan) self.currentX = location.x; // 拿到当前的位置
if (pan.state == UIGestureRecognizerStateEnded) { // 如果拖拽停止了
CGPoint translantion = [pan translationInView:self.mainVC.view];
//ABS(translantion.x)/ABS(translantion.y) > 1表示水平方向滑动
if(ABS(translantion.x)/ABS(translantion.y) > 1){
//location.x<self.currentX :右滑
if(self.sideMenuVisible&&location.x<self.currentX) {
[self hideSideMenu];
}else
//location.x>self.currentX :左滑
if(!self.sideMenuVisible&&location.x>self.currentX){
[self presentSideMenu];
}
}
}
}
判断手势只有在水平方向和左右移动才进行显示侧边栏操作.代码修改后的效果:
给侧边栏设置动画和添加手势后
第三步
这一步其实是教朋友们如何使用我们这个�轮子 并且制作一个高冷 华丽的应用Demo.
创建SideMenuVC和MainVC类 这俩个类都是我们实际应用到的,看看我们的SB
主视图
侧边栏
怎样?看起来就很炫酷 对吧!
这个轮子的使用 你只需在appdelegate写上这些代码
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
UINavigationController *navVC = [[UINavigationController alloc]initWithRootViewController:[MainVC controller]];
SideMenuVC *sideVC = [SideMenuVC controller];
_slSideMenuVC = [[SLSideMenuVC alloc] initWithMainVC:navVC sideMenuVC:sideVC];
self.window.rootViewController = _slSideMenuVC;
self.window.backgroundColor = [UIColor blackColor];
[self.window makeKeyAndVisible];
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
return YES;
}
初始化SLSideMenuVC的实例 传入主视图和侧边栏的实例.
兄弟们看好了:
碉堡了
希望这篇文章能帮到有需要的同学,这也是我写博客的初衷,希望能一直写下去.
github:点我 点我 我是小王子
