上一篇文章講到如何給主視圖做動(dòng)畫.接下來這篇文章會(huì)進(jìn)行第二,第三步.
第二步
這一步 毫無疑問是要給側(cè)邊欄設(shè)置一個(gè)動(dòng)畫效果,使之與主視圖的動(dòng)效協(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添加動(dòng)畫代碼并且新建一個(gè)sideMenuVisible屬性 用于記錄側(cè)邊欄的顯示與否.
接下來是添加手勢:
//viewDidLoad中添加如下代碼
//添加手勢
// 添加滑動(dòng)的手勢手勢
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表示水平方向滑動(dòng)
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];
}
}
}
}
判斷手勢只有在水平方向和左右移動(dòng)才進(jìn)行顯示側(cè)邊欄操作.代碼修改后的效果:
給側(cè)邊欄設(shè)置動(dòng)畫和添加手勢后
第三步
這一步其實(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)我 我是小王子
