iOS -自定义转场动画

青春.png

*废话不多说直接看效果(模仿新浪微博)

自定义视图弹窗.gif

-分析我们的效果，点击导航的titleView然后弹出一个自定义视图，里面有个tableView。 其次有个浅灰色的蒙版

-工程结构

Snip20170317_1.png

Pragma mark - NO.1 主界面设置

- (void)viewDidLoad {
    [super viewDidLoad];
  [self setupNav];
  }


-(void)setupNav{
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"navigationbar_friendattention"] style: UIBarButtonItemStylePlain target:self action:nil];
    
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"navigationbar_pop"] style: UIBarButtonItemStylePlain target:self action:nil];
    
    self.titleBtn = [[TitleButton alloc]init];
    [self.titleBtn setTitle:@"tmack81" forState:UIControlStateNormal];
    [self.titleBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.titleBtn addTarget:self action:@selector(titleBtnClick:) forControlEvents:UIControlEventTouchUpInside];
    
    
    self.navigationItem.titleView = self.titleBtn;
    
}

-以上是最简单主界面导航栏的设置，可以忽略

Pragma mark — NO.2 PopoverViewController设置

#首先创建一个PopoverViewController，继承自UIViewController,创建时给个xib文件，在里面整个tableView就好，其次在里面不需要设置任何东西

 在ViewController中，按钮的点击事件
//按钮监听事件
-(void)titleBtnClick:(TitleButton *)titleBtn{
     titleBtn.selected = !titleBtn.selected;
  
    //创建弹出控制器
    PopoverViewController *popover = [[PopoverViewController alloc]init];
    
    //设置modal样式--因为不设置的话会造成popoverVc弹出的时候，首页和nav或者tabBar全部被移除掉了，而我的popoverVc不是遮住整个屏幕的，所以不能让底部的控制器移除掉了
    popover.modalPresentationStyle = UIModalPresentationCustom; //设置成这个就不会移除了
  //弹出控制器
    [self presentViewController:popover animated:YES completion:nil];
    
    
}

Pragma mark — NO.3 关键设置JJPresentViewController

#import <UIKit/UIKit.h>

@interface JJPresentationController : UIPresentationController

/**蒙版View*/
@property (nonatomic , strong) UIView *coverView;
@end
#设置JJPresentationController继承自UIPresentationController，并创建一个蒙版属性

.m文件中进行设置
#import "JJPresentationController.h"

@implementation JJPresentationController

//Modal出来的控制器实际上都是先加到一个容器上的，我们重写这个即将布局容器的子控制器的方法来控制modal出来的控制器的大小
-(void)containerViewWillLayoutSubviews{
    [super containerViewWillLayoutSubviews];
     //1.拿到被弹出的控制器设置其大小
    self.presentedView.frame = CGRectMake(0, 0, 200, 300);
    self.presentedView.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, 55);
    //2.设置蒙版
    [self setupCoverView];
    
    
}

//设置蒙版View
-(void)setupCoverView{
    
    //1.添加蒙版
    //如果用addSubview会将我们弹出控制器的view一并遮住了
    //把coverView添加到容器view的最底层
    
    self.coverView = [[UIView alloc]init];
    [self.containerView insertSubview:self.coverView atIndex:0];
    
    //设置coverView的大小
    self.coverView.frame = self.containerView.bounds;
    self.coverView.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.3];
    //给coverView添加点击手势
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapClick:)];
    [self.coverView addGestureRecognizer:tap];
    
    
    
}

#pragma mark -- 点击手势的监听方法
-(void)tapClick:(UITapGestureRecognizer *)tap{
      //直接可以拿到弹出的控制器，然后dismiss就好了
    [self.presentedViewController dismissViewControllerAnimated:YES completion:nil];
   // NSLog(@"点击蒙版了");
}

Pragma mark — NO.4 回到主界面继续设置

#1.遵守两个协议
@interface ViewController ()<UIViewControllerTransitioningDelegate,UIViewControllerAnimatedTransitioning>

#2.做个属性记录
/**记录是弹出还是消失动画*/
@property (nonatomic , assign) BOOL isPresented;
//默认是消失动画
    self.isPresented = NO;

#3.在按钮点击事件中设置转场代理
popover.transitioningDelegate = self;

#4.执行协议方法并设置弹出和消失动画

#pragma mark -- 代理方法

-(UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source{
    
    JJPresentationController *presentVc = [[JJPresentationController alloc]initWithPresentedViewController:presented presentingViewController:presenting];
    
    return presentVc;
    
}


#pragma mark -- 自定义弹出动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
    
    self.isPresented = YES;
    //返回值是转场动画协议，我们直接返回就好
    return self;
    
}

#pragma mark -- 自定义消失动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
    self.isPresented = NO;
    return self;
}

// MARK:- 自定义弹出动画遵守的协议(报错是因为这个协议里面有必须实现的方法)
#pragma mark -- UIViewControllerAnimatedTransitioning 实现这个协议的代理方法
//返回动画时间
-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
    
    return  0.8;
    
}

 ///transitionContext:转场上下文:可以获得弹出的view和消失的view
-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    
  //三目运算
 self.isPresented ? [self animationForPresentedView:transitionContext] : [self animationToPresentedView:transitionContext];
 
    
}

#pragma mark -- 自定义弹出动画
-(void)animationForPresentedView:(id<UIViewControllerContextTransitioning>)transitionContext{
    //1.获取弹出的view
    //UITransitionContextFromViewKey:消失的view
    //UITransitionContextToViewKey:弹出的view
    UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
    
    //2.将弹出的view添加到containerView中
    UIView *containerView = [transitionContext containerView];
    [containerView addSubview:presentedView];
    
    //3.执行我们自定义的动画--将弹出视图的高度隐藏
    presentedView.transform = CGAffineTransformMakeScale(1.0, 0);
    
    //转场动画的时间，我们直接调用第一个动画执行时间的方法，获得的返回值就是那个时间了
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        
        //恢复原有大小
        presentedView.transform = CGAffineTransformIdentity;
        //设置锚点，不然动画不是从上面开始弹出的
        presentedView.layer.anchorPoint = CGPointMake(0.5, 0);
        
    } completion:^(BOOL finished) {
        //必须告诉转场已经完成了自定义动画
        [transitionContext completeTransition:YES];
        
    }];
    
}

#pragma mark -- 自定义消失动画
-(void)animationToPresentedView:(id<UIViewControllerContextTransitioning>)transitionContext{
    
    //1.获取消失的View
    UIView *dismissView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    
    //2.执行动画
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
       
        //这里不能把y方向缩放，直接置为0,这样的话会直接消失，效果不好
        dismissView.transform = CGAffineTransformMakeScale(1.0, 0.000001);
        
        
        
    } completion:^(BOOL finished) {
        
        //将消失View从父控件中移除
        [dismissView removeFromSuperview];
        //告诉其转场动画结束
        [transitionContext completeTransition:YES];
        
    }];
    
    
    
}

Pragma mark — NO.5 至此已经能实现这个自定义视图转场了，最后我们对转场的代码进行一个抽取，使主控制器显得不是那么臃肿

#创建一个类PopoverAnimator继承自NSObject
#import <UIKit/UIKit.h>

//遵守协议
@interface PopoverAnimator : NSObject <UIViewControllerTransitioningDelegate,UIViewControllerAnimatedTransitioning>
/**记录是弹出还是消失动画*/
@property (nonatomic , assign) BOOL isPresented ;


#把主控制器里面关于转场的代码全部放过来
#import "PopoverAnimator.h"
#import "JJPresentationController.h"
@implementation PopoverAnimator

#pragma mark -- 代理方法

-(UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source{
    
    JJPresentationController *presentVc = [[JJPresentationController alloc]initWithPresentedViewController:presented presentingViewController:presenting];
    
    return presentVc;
    
}


#pragma mark -- 自定义弹出动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
    
    self.isPresented = YES;
     return self;
    
}

#pragma mark -- 自定义消失动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
    self.isPresented = NO;
    return self;
}


#pragma mark -- UIViewControllerAnimatedTransitioning 实现这个协议的代理方法
-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
    
    return  0.8;
    
}

///transitionContext:转场上下文:可以获得弹出的view和消失的view
-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    
    //三目运算
    self.isPresented ? [self animationForPresentedView:transitionContext] : [self animationToPresentedView:transitionContext];
    
    
}

#pragma mark -- 自定义弹出动画
-(void)animationForPresentedView:(id<UIViewControllerContextTransitioning>)transitionContext{
    //1.获取弹出的view
    //UITransitionContextFromViewKey:消失的view
    //UITransitionContextToViewKey:弹出的view
    UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
    
    //2.将弹出的view添加到containerView中
    UIView *containerView = [transitionContext containerView];
    [containerView addSubview:presentedView];
    
    //3.执行我们自定义的动画--将弹出视图的高度隐藏
    presentedView.transform = CGAffineTransformMakeScale(1.0, 0);
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        
        //恢复原有大小
        presentedView.transform = CGAffineTransformIdentity;
        //设置锚点，不然动画不是从上面开始弹出的
        presentedView.layer.anchorPoint = CGPointMake(0.5, 0);
        
    } completion:^(BOOL finished) {
        //必须告诉转场已经完成了自定义动画
        [transitionContext completeTransition:YES];
        
    }];
    
}

#pragma mark -- 自定义消失动画
-(void)animationToPresentedView:(id<UIViewControllerContextTransitioning>)transitionContext{
    
    //1.获取消失的View
    UIView *dismissView = [transitionContext viewForKey:UITransitionContextFromViewKey];
    
    //2.执行动画
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
             dismissView.transform = CGAffineTransformMakeScale(1.0, 0.000001);
       } completion:^(BOOL finished) {
        
        //将消失View从父控件中移除
        [dismissView removeFromSuperview];
        //告诉其转场动画结束
        [transitionContext completeTransition:YES];
        
    }];
    
}

#回到主界面，只需要设置一下代理就好，其它代码就都删掉吧
self.popoverAnimator = [[PopoverAnimator alloc]init];
    popover.transitioningDelegate = self.popoverAnimator;