iOS动画效果七:实现自定义present转场动画效果

这篇文章主要介绍如何实现自定义的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)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];
}

最终,运行代码,即可得到最终的动画效果

总结

最终效果图为:


自定义present转场动画.gif

Demo地址为:
Demo地址

iOS开发中动画效果的探究(一)

iOS动画效果的探究二:UIView Animation实现动画

iOS动画效果三:CABAsicAnimation实现平移、旋转和放大

ios动画效果四:使用Pop框架实现弹簧效果

iOS动画效果五:CABasicAnimation实现绕定点旋转的效果]

iOS动画效果六:实现自定义的push转场动画

iOS动画效果七:实现自定义present转场动画效果

iOS动画效果八:实现类似系统的测滑返回效果

你可能感兴趣的:(iOS动画效果七:实现自定义present转场动画效果)