ios 网易新闻详情页上拉关闭当前页面效果

把本文用MacDown语法重新排版了下

模仿网易新闻详情页上拉以转场动画的形式关闭当前页面，效果如下：

github：https://github.com/hzpqt/TranistionAnimate

网易新闻上拉关闭动画效果

从动画效果看分为两个过程，页面的alpha值与高度height慢慢变小，并且变小后会自动回到导航控制器的上一级页面。类似于这种在导航栏控制器中切换回到上一级的动画效果一般都能使用转场动画完成，以下详细描述实现该动画效果的过程。

1. 构建storyBoard界面

storyboard界面

界面很简单，一个导航栏控制器，一个根控制器，一个详情页，分别对应RootViewController，DetailViewController

2.动画效果主要在详情页面实现

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.scrollView.delegate = self;    
        
    self.automaticallyAdjustsScrollViewInsets = NO;
    
    self.popTransition = [[popTransition alloc] init];
    
    __weak __typeof(self) weakSelf = self;
    self.scrollView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
        
        weakSelf.navigationController.delegate = self;
        [weakSelf.navigationController popViewControllerAnimated:YES];
    }];
    
    [(MJRefreshBackStateFooter *)self.scrollView.mj_footer setTitle:@"上拉关闭当前页" forState:MJRefreshStateIdle];
    [(MJRefreshBackStateFooter *)self.scrollView.mj_footer setTitle:@"释放关闭当前页" forState:MJRefreshStatePulling];
    [(MJRefreshBackStateFooter *)self.scrollView.mj_footer setTitle:@"" forState:MJRefreshStateRefreshing];
    
    [self setNavBarBackButton];
}

当页面向上滚动触发回调时，设置导航栏控制器的delegate为自己，并pop到上一级，此时navgationController会自动进入代理函数中，根据operation判断是push或者pop，如果是pop返回转场动画管理对象self.popTransition。

3.系统拿到转场动画管理对象后，会开始转场动画效果，该对象需要实现UIViewControllerAnimatedTransitioning协议

- (void)animateTransition:(id)transitionContext
{
      [self doPopAnimation:transitionContext];
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    [self doPopAnimation:transitionContext];
}

- (void)doPopAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
    
    DetailViewController *fromVC = (DetailViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    
    RootViewController *toVC = (RootViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    
    CGRect finalFrameForVC = [transitionContext finalFrameForViewController:toVC];
    
    //获取详情页截图
    UIView *snapShotView = [fromVC.view snapshotViewAfterScreenUpdates:NO];
    snapShotView.frame = finalFrameForVC;
    
    //详情页、列表页加入到containerView
    UIView *containerView = [transitionContext containerView];
    toVC.view.frame = finalFrameForVC;
    toVC.view.alpha = 1.0f;
    
    [containerView insertSubview:toVC.view atIndex:0];
    
    [containerView addSubview:snapShotView];
    
    [fromVC.view removeFromSuperview];
    
    //关键帧动画
    NSTimeInterval duration = [self transitionDuration:transitionContext];
    void (^anima)() = ^() {
        
        for (int i = 0; i < 5; i++) {
            [UIView addKeyframeWithRelativeStartTime:((i/5.f) * duration)  //每帧开始的时间
                                    relativeDuration:0.2 * duration      //每帧持续的时间
                                          animations:^{
                snapShotView.transform = CGAffineTransformMakeScale(1, 1 - (i+1)/5.f); //y轴每帧缩小到最开始的几分之几  4/5 3/5 2/5 1/5 0
                snapShotView.alpha = 1 - (i+1)/5.f;
            }];
        }
    };
    
    [UIView animateKeyframesWithDuration:duration
                                   delay:0
                                 options:UIViewKeyframeAnimationOptionCalculationModeLinear
                              animations:anima
                              completion:^(BOOL finished) {
        
        if (finished) {
            
            [snapShotView removeFromSuperview];
            [transitionContext completeTransition:YES];
        }
    }];
}

doPopAnimation函数中，先获取到fromVC、toVC，把fromVC页面的视图进行截图snapShotView加入到containerView中，隐藏fromVC页面，之后对
snapShotView添加关键帧动画，总共包含5帧，每帧中snapShotView高度慢慢变小，alpha也慢慢变小。

学习转场动画请参考：

http://www.jianshu.com/p/ea0132738057

http://www.jianshu.com/p/38cd35968864

随便推荐下mac下录制gif图片方法，http://www.jianshu.com/p/7c77a2a93ee2