上一篇文章講到如何給主視圖做動畫.接下來這篇文章會進(jìn)行第二,第三步.

第二步

這一步 毫無疑問是要給側(cè)邊欄設(shè)置一個(gè)動畫效果,使之與主視圖的動效協(xié)調(diào)一致,并給我們這個(gè)輪子加上手勢識別的功能.
修改presentSideMenu方法

//展示側(cè)邊欄
- (void)presentSideMenu{
    if (self.sideMenuVisible)  return;
    //分別設(shè)置兩個(gè)容器類layer的錨點(diǎn)
    [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);
        //設(shè)置mainViewContainer的縮放形變;
        _mainViewContainer.layer.transform = mainScaleTransform;
        CATransform3D mainTranslateTransform = _mainViewContainer.layer.transform;
        mainTranslateTransform = CATransform3DTranslate(mainTranslateTransform, 100, 0, 0);
        //設(shè)置mainViewContainer的平移形變;
        _mainViewContainer.layer.transform = mainTranslateTransform;
        
        //設(shè)置menuViewContainer的平移形變
        CATransform3D menuTranslateTransform = _menuViewContainer.layer.transform;
        menuTranslateTransform = CATransform3DTranslate(menuTranslateTransform, 30, 0, 0);
        _menuViewContainer.layer.transform = menuTranslateTransform;
    } completion:^(BOOL finished) {
        self.sideMenuVisible = YES;
    }];
}

為_menuViewContainer添加動畫代碼并且新建一個(gè)sideMenuVisible屬性 用于記錄側(cè)邊欄的顯示與否.
接下來是添加手勢:

    //viewDidLoad中添加如下代碼
    //添加手勢
    // 添加滑動的手勢手勢
    UIPanGestureRecognizer * panGes = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(viewDidSlide:)];
    [_mainVC.view addGestureRecognizer:panGes];

手勢實(shí)現(xiàn):

#pragma mark Pan 手勢識別
- (void)viewDidSlide:(UIScreenEdgePanGestureRecognizer *)pan{
    CGPoint location = [pan locationInView:self.view];
    if (pan.state == UIGestureRecognizerStateBegan) self.currentX = location.x; // 拿到當(dāng)前的位置
        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];
                }
            }
        }
}

判斷手勢只有在水平方向和左右移動才進(jìn)行顯示側(cè)邊欄操作.代碼修改后的效果:

給側(cè)邊欄設(shè)置動畫和添加手勢后

第三步

這一步其實(shí)是教朋友們?nèi)绾问褂梦覀冞@個(gè)?輪子 并且制作一個(gè)高冷 華麗的應(yīng)用Demo.
創(chuàng)建SideMenuVC和MainVC類 這倆個(gè)類都是我們實(shí)際應(yīng)用到的,看看我們的SB

主視圖

側(cè)邊欄

怎樣?看起來就很炫酷 對吧!
這個(gè)輪子的使用 你只需在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的實(shí)例 傳入主視圖和側(cè)邊欄的實(shí)例.
兄弟們看好了:

碉堡了

希望這篇文章能幫到有需要的同學(xué),這也是我寫博客的初衷,希望能一直寫下去.
github:點(diǎn)我 點(diǎn)我 我是小王子