這篇文章主要講一下push的自定義轉(zhuǎn)場動畫
最終的效果圖為：
Demo地址為：
Demo
相應(yīng)的代碼文件為：fifthViewController,PushAnimationController,CustomViewController
關(guān)于轉(zhuǎn)場動畫，下面這張圖將的很清楚
從上面的圖中可以看出，為了實現(xiàn)push的自定義轉(zhuǎn)場，需要實現(xiàn)UINavigationControllerDelegate
在fifthViewController中，先添加一個按鈕，實現(xiàn)跳轉(zhuǎn)的功能
在.h文件中，定義相應(yīng)的button屬性
@property (nonatomic, strong) UIButton *pushButton;
將button添加到view上，并實現(xiàn)跳轉(zhuǎn)到CustomViewController中
- (UIButton *)pushButton {
if (_pushButton) {
return _pushButton;
}
_pushButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
[_pushButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[_pushButton setTitle:@"開始push自定義轉(zhuǎn)場動畫" forState:UIControlStateNormal];
[_pushButton addTarget:self action:@selector(pushButtonClicked) forControlEvents:UIControlEventTouchUpInside];
return _pushButton;
}
- (void)pushButtonClicked {
CustomPushViewController *vc = [[CustomPushViewController alloc] init];
[self.navigationController pushViewController:vc animated:YES];
}
為什么實現(xiàn)相應(yīng)的轉(zhuǎn)場動畫，我們需要讓fifthViewController遵守協(xié)議UINavigationControllerDelegate
self.navigationController.delegate = self;
實現(xiàn)相應(yīng)的協(xié)議方法
#pragma mark - UINavigationControllerDelegate
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
if (operation == UINavigationControllerOperationPush) {
//PushAnimationController就是用來處理push轉(zhuǎn)場過程中相應(yīng)的動畫效果
return [[PushAnimationController alloc] init];
}
return nil;
}
接下來我們新建一個繼承于NSObject的文件，遵守轉(zhuǎn)場協(xié)議UIViewControllerAnimatedTransitioning
實現(xiàn)相應(yīng)的協(xié)議方法
//設(shè)置動畫執(zhí)行的時長
- (NSTimeInterval)transitionDuration:(nullable id<UIViewControllerContextTransitioning>)transitionContext {
return 1.0f;
}
//用來處理具體的動畫
- (void)animateTransition:(nonnull id<UIViewControllerContextTransitioning>)transitionContext {
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//需要將轉(zhuǎn)場后的界面給加上去才行
[[transitionContext containerView] addSubview:toVC.view];
UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
[self beginAnimation:toView];
}
- (void)beginAnimation:(UIView *)toView {
CGSize size = [UIScreen mainScreen].bounds.size;
CABasicAnimation *animation1 = [CABasicAnimation animation];
animation1.keyPath = @"transform.rotation.z";
animation1.fromValue = @(M_PI_2);
animation1.toValue = @(0);
animation1.duration = 2.0f;
animation1.beginTime = 0.f;
animation1.delegate = self;
animation1.removedOnCompletion = NO;
animation1.fillMode = kCAFillModeForwards;
toView.layer.anchorPoint = CGPointMake(1, 1);
toView.layer.position = CGPointMake(size.width, size.height);
[toView.layer addAnimation:animation1 forKey:@"animation1"];
}
動畫效果是用CABasicAnimation實現(xiàn)的，就是繞右下角旋轉(zhuǎn)90度，這個動畫在我上一篇文章中有講具體的實現(xiàn)，就是將anchorPoint和position都設(shè)置為右下角即可
之后，customPushViewController完成基本的構(gòu)建，即可完成相應(yīng)的轉(zhuǎn)場動畫
在CustomPushViewController中，完成基本構(gòu)建
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationController.navigationBar.translucent = NO;
self.view.backgroundColor = [UIColor yellowColor];
self.title = @"自定義push轉(zhuǎn)場后的控制器";
}
這樣，運行后的效果如下：
存在一個很嚴(yán)重的問題，就是push動畫執(zhí)行完畢后，無法點擊返回。customPushViewController上的任何點擊都沒有反應(yīng)
以為在push自定義動畫后，我們需要添加代碼
//一定要記得動畫完成后執(zhí)行此方法，讓系統(tǒng)管理 navigation,否則系統(tǒng)會認(rèn)為仍然在動畫中
[transitionContext completeTransition:YES];
動畫我們是使用CABAsicAnimation實現(xiàn)的，我們需要在動畫結(jié)束時執(zhí)行該行代碼，所以需要知道合適動畫結(jié)束，需用通過CAAnimationDelegate協(xié)議來實現(xiàn)
在PushAnimationController.h文件中，定義一個完成的block
@property (nonatomic, copy) dispatch_block_t completeBlock;
在.m文件中，動畫執(zhí)行的方法中，添加下面的代碼
self.completeBlock = ^{
////一定要記得動畫完成后執(zhí)行此方法，讓系統(tǒng)管理 navigation
[transitionContext completeTransition:YES];
};
動畫CABasicAnimation遵守協(xié)議
animation1.delegate = self;
之后，實現(xiàn)CAAnimationDelegate協(xié)議方法
- (void)animationDidStart:(CAAnimation *)anim {
NSLog(@"開始執(zhí)行自定義的動畫");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if (flag) {
NSLog(@"動畫正常結(jié)束");
}
//不論動畫是正常結(jié)束還是被打斷，都要執(zhí)行該block代碼塊，標(biāo)志自定義轉(zhuǎn)場動畫結(jié)束
if (self.completeBlock) {
self.completeBlock();
}
}
添加完上面的代碼后，可以看到customPushViewController上的點擊效果恢復(fù)
但是測滑返回失效，只需要在CustomPushViewController中添加下述代碼即可恢復(fù)
//自定義push動畫后，測滑返回手勢失效(需要加上這樣代碼)
self.navigationController.interactivePopGestureRecognizer.delegate = self;
這樣就得到我們最終的效果圖
總結(jié)
最終效果圖為：
Demo地址為：
Demo
iOS動畫效果的探究二：UIView Animation實現(xiàn)動畫
iOS動畫效果三：CABAsicAnimation實現(xiàn)平移、旋轉(zhuǎn)和放大
iOS動畫效果五：CABasicAnimation實現(xiàn)繞定點旋轉(zhuǎn)的效果]
iOS動畫效果六：實現(xiàn)自定義的push轉(zhuǎn)場動畫
