用三步带你写一个侧边栏视图轮子(二)

上一篇文章讲到如何给主视图做动画.接下来这篇文章会进行第二,第三步.

第二步

这一步 毫无疑问是要给侧边栏设置一个动画效果,使之与主视图的动效协调一致,并给我们这个轮子加上手势识别的功能.
修改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:点我 点我 我是小王子