iOS动画效果七：实现自定义present转场动画效果
2020-11-09 本文已影响0人
落叶兮兮
这篇文章主要介绍如何实现自定义的present转场动画
最终的效果图为：
自定义present转场动画.gif
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<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
//PresentingAnimationController是我们后面定义的，用来处理present时的转场动画
return [[PresentingAnimationController alloc] init];
}
//dismiss时的转场动画
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
//DismissingAnimationController是我们后面定义的，用来处理dismiss时的转场动画
return [[DismissingAnimationController alloc] init];
}
接下来，新建一个继承于NSObject类的文件，遵守UIViewControllerAnimatedTransitioning协议，用来处理present时具体的动画效果，命名为PresentingAnimationController
实现相应的协议方法
//设置动画执行的时长
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
return 0.5f;
}
//用来处理具体的动画
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)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<UIViewControllerContextTransitioning>)transitionContext {
return 0.5f;
}
//具体的动画效果
- (void)animateTransition:(nonnull id<UIViewControllerContextTransitioning>)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];
}
最终，运行代码，即可得到最终的动画效果
总结
最终效果图为：
自定义present转场动画.gif
Demo地址为：
Demo地址
iOS动画效果的探究二：UIView Animation实现动画
iOS动画效果三：CABAsicAnimation实现平移、旋转和放大
