上一篇文章講到如何給主視圖做動畫.接下來這篇文章會進行第二,第三步.
第二步
這一步 毫無疑問是要給側邊欄設置一個動畫效果,使之與主視圖的動效協調一致,并給我們這個輪子加上手勢識別的功能.
修改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:點我 點我 我是小王子
