这篇文章主要介绍如何实现自定义的present转场动画
最终的效果图为:
Demo地址为:
Demo地址
相关的文件名为:
SixthViewController,CustomModalViewController,PresentingAnimationController,DismissingAnimationController
关于转场动画,下面这张图将的很清楚
从上图可以看出,为了实现自定义的present转场动画,需要实现UIViewControllerTranslationingDelegate
在SixViewController中,添加一个button,点击button可以present到CustomModalViewController
在SixViewController.h中
@property (nonatomic, strong) UIButton *presentButton;
将button添加到view上
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.navigationController.navigationBar.translucent = NO;
self.title = @"自定义present的转场动画";
self.view.backgroundColor = [UIColor whiteColor];
self.presentButton.center = self.view.center;
[self.view addSubview:self.presentButton];
}
- (void)didClickOnPresent:(UIButton *)button {
NSLog(@"点击了开启转场动画的按钮");
CustomModalViewController *modalVC = [[CustomModalViewController alloc] init];
modalVC.transitioningDelegate = self;
modalVC.modalPresentationStyle = UIModalPresentationCustom;
[self.navigationController presentViewController:modalVC animated:YES completion:nil];
}
- (UIButton *)presentButton {
if (_presentButton) {
return _presentButton;
}
_presentButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
[_presentButton setTitle:@"点击开始自定义转场动画" forState:UIControlStateNormal];
[_presentButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
_presentButton.titleLabel.font = [UIFont systemFontOfSize:18];
[_presentButton addTarget:self action:@selector(didClickOnPresent:) forControlEvents:UIControlEventTouchUpInside];
[_presentButton sizeToFit];
return _presentButton;
}
- (void)didClickOnPresent:(UIButton *)button {
NSLog(@"点击了开启转场动画的按钮");
CustomModalViewController *modalVC = [[CustomModalViewController alloc] init];
modalVC.transitioningDelegate = self;
modalVC.modalPresentationStyle = UIModalPresentationCustom;
[self.navigationController presentViewController:modalVC animated:YES completion:nil];
}
让该类遵守UIViewControllerTransitioningDelegate协议,实现相应的协议方法
#pragma mark - UIViewControllerTransitionDelegate
//present时的转场动画
- (id)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
//PresentingAnimationController是我们后面定义的,用来处理present时的转场动画
return [[PresentingAnimationController alloc] init];
}
//dismiss时的转场动画
- (id)animationControllerForDismissedController:(UIViewController *)dismissed {
//DismissingAnimationController是我们后面定义的,用来处理dismiss时的转场动画
return [[DismissingAnimationController alloc] init];
}
接下来,新建一个继承于NSObject类的文件,遵守UIViewControllerAnimatedTransitioning协议,用来处理present时具体的动画效果,命名为PresentingAnimationController
实现相应的协议方法
//设置动画执行的时长
- (NSTimeInterval)transitionDuration:(id)transitionContext {
return 0.5f;
}
//用来处理具体的动画
- (void)animateTransition:(id)transitionContext {
UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
fromView.tintAdjustmentMode = UIViewTintAdjustmentModeDimmed;
fromView.userInteractionEnabled = YES;
UIView *toView = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey].view;
toView.frame = CGRectMake(0, 0, CGRectGetWidth(transitionContext.containerView.bounds) - 100.f, CGRectGetHeight(transitionContext.containerView.bounds) - 280.f);
CGPoint p = CGPointMake(transitionContext.containerView.center.x, -transitionContext.containerView.center.y);
toView.center = p;
[transitionContext.containerView addSubview:toView];
POPSpringAnimation *positionAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY];
positionAnimation.toValue = @(transitionContext.containerView.center.y);
positionAnimation.springBounciness = 10;
[positionAnimation setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
[transitionContext completeTransition:YES];
}];
POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
scaleAnimation.springBounciness = 20;
scaleAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(1.2, 1.4)];
[toView.layer pop_addAnimation:positionAnimation forKey:@"positionAnimation"];
[toView.layer pop_addAnimation:scaleAnimation forKey:@"scaleAnimation"];
}
在处理具体的动画效果时,使用了google推出的pop框架,这部分代码时参考pop框架的官方文档,所以这里不进行解释
也可以自行写动画的代码实现相应的动画效果
接下来,新建一个继承于NSObject类的文件,遵守UIViewControllerAnimatedTransitioning协议,用来处理present时具体的动画效果,命名为DismissingAnimationController
实现相应的协议方法:
//动画的执行时间
- (NSTimeInterval)transitionDuration:(nullable id)transitionContext {
return 0.5f;
}
//具体的动画效果
- (void)animateTransition:(nonnull id)transitionContext {
UIView *toView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
toView.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
toView.userInteractionEnabled = YES;
UIView *fromView = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view;
POPBasicAnimation *closeAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
closeAnimation.toValue = @(-fromView.layer.position.y);
[closeAnimation setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
[transitionContext completeTransition:YES];
}];
POPSpringAnimation *scaleAnimation = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerScaleXY];
scaleAnimation.springBounciness = 20;
scaleAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
[fromView.layer pop_addAnimation:closeAnimation forKey:@"closeAnimation"];
[fromView.layer pop_addAnimation:scaleAnimation forKey:@"scaleDown"];
}
上面的动画效果同样是参考pop的官方文档
接下来,在转场后的CustomModalViewController上添加按钮,点击按钮执行dismiss方法
在CustomModalViewController.h文件中
@property (nonatomic, strong) UIButton *dismissButton;
将button添加在view上
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor blueColor];
self.view.layer.cornerRadius = 8.f;
self.dismissButton.center = self.view.center;
[self.view addSubview:self.dismissButton];
}
- (UIButton *)dismissButton {
if (_dismissButton) {
return _dismissButton;
}
_dismissButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
[_dismissButton setTitle:@"消失" forState:UIControlStateNormal];
[_dismissButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[_dismissButton addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside];
return _dismissButton;
}
- (void)dismiss {
[self dismissViewControllerAnimated:YES completion:nil];
}
最终,运行代码,即可得到最终的动画效果
总结
最终效果图为:
Demo地址为:
Demo地址
iOS开发中动画效果的探究(一)
iOS动画效果的探究二:UIView Animation实现动画
iOS动画效果三:CABAsicAnimation实现平移、旋转和放大
ios动画效果四:使用Pop框架实现弹簧效果
iOS动画效果五:CABasicAnimation实现绕定点旋转的效果]
iOS动画效果六:实现自定义的push转场动画
iOS动画效果七:实现自定义present转场动画效果
iOS动画效果八:实现类似系统的测滑返回效果