这篇文章主要讲一下push的自定义转场动画
最终的效果图为：
自定义push的转场动画.gif
Demo地址为：
Demo
相应的代码文件为：fifthViewController,PushAnimationController,CustomViewController
关于转场动画，下面这张图将的很清楚
转场动画的相关类和协议的方法
从上面的图中可以看出，为了实现push的自定义转场，需要实现UINavigationControllerDelegate
在fifthViewController中，先添加一个按钮，实现跳转的功能
在.h文件中，定义相应的button属性
@property (nonatomic, strong) UIButton *pushButton;
将button添加到view上，并实现跳转到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自定义转场动画" 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];
}
为什么实现相应的转场动画，我们需要让fifthViewController遵守协议UINavigationControllerDelegate
self.navigationController.delegate = self;
实现相应的协议方法
#pragma mark - UINavigationControllerDelegate
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
if (operation == UINavigationControllerOperationPush) {
//PushAnimationController就是用来处理push转场过程中相应的动画效果
return [[PushAnimationController alloc] init];
}
return nil;
}
接下来我们新建一个继承于NSObject的文件，遵守转场协议UIViewControllerAnimatedTransitioning
实现相应的协议方法
//设置动画执行的时长
- (NSTimeInterval)transitionDuration:(nullable id<UIViewControllerContextTransitioning>)transitionContext {
return 1.0f;
}
//用来处理具体的动画
- (void)animateTransition:(nonnull id<UIViewControllerContextTransitioning>)transitionContext {
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//需要将转场后的界面给加上去才行
[[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实现的，就是绕右下角旋转90度，这个动画在我上一篇文章中有讲具体的实现，就是将anchorPoint和position都设置为右下角即可
之后，customPushViewController完成基本的构建，即可完成相应的转场动画
在CustomPushViewController中，完成基本构建
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationController.navigationBar.translucent = NO;
self.view.backgroundColor = [UIColor yellowColor];
self.title = @"自定义push转场后的控制器";
}
这样，运行后的效果如下：
无法点击返回.gif
存在一个很严重的问题，就是push动画执行完毕后，无法点击返回。customPushViewController上的任何点击都没有反应
以为在push自定义动画后，我们需要添加代码
//一定要记得动画完成后执行此方法，让系统管理 navigation,否则系统会认为仍然在动画中
[transitionContext completeTransition:YES];
动画我们是使用CABAsicAnimation实现的，我们需要在动画结束时执行该行代码，所以需要知道合适动画结束，需用通过CAAnimationDelegate协议来实现
在PushAnimationController.h文件中，定义一个完成的block
@property (nonatomic, copy) dispatch_block_t completeBlock;
在.m文件中，动画执行的方法中，添加下面的代码
self.completeBlock = ^{
////一定要记得动画完成后执行此方法，让系统管理 navigation
[transitionContext completeTransition:YES];
};
动画CABasicAnimation遵守协议
animation1.delegate = self;
之后，实现CAAnimationDelegate协议方法
- (void)animationDidStart:(CAAnimation *)anim {
NSLog(@"开始执行自定义的动画");
}
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
if (flag) {
NSLog(@"动画正常结束");
}
//不论动画是正常结束还是被打断，都要执行该block代码块，标志自定义转场动画结束
if (self.completeBlock) {
self.completeBlock();
}
}
添加完上面的代码后，可以看到customPushViewController上的点击效果恢复
但是测滑返回失效，只需要在CustomPushViewController中添加下述代码即可恢复
//自定义push动画后，测滑返回手势失效(需要加上这样代码)
self.navigationController.interactivePopGestureRecognizer.delegate = self;
这样就得到我们最终的效果图
总结
最终效果图为：
自定义push的转场动画.gif
Demo地址为：
Demo
iOS动画效果的探究二：UIView Animation实现动画
iOS动画效果三：CABAsicAnimation实现平移、旋转和放大
网友评论