iOS 转场动画笔记

文章转载出自：http://www.kittenyang.com/magicmove/

详细实现步骤在原文有说明

简单的说：导航的转场动画主要的实现原理步骤

1.创建2个动画过度Animated Transition对象（push一个效果＋pop一个效果）NSObject实现UIViewControllerAnimatedTransitioning协议 主要重写2个协议方法

    a.- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext//动画时间

    b.- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext//两个页面的动画效果处理

2.VC里面实现UINavigationControllerDelegate代理重写1个协议方法

   a.- (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController

                                   animationControllerForOperation:(UINavigationControllerOperation)operation

                                                fromViewController:(UIViewController *)fromVC

                                                  toViewController:(UIViewController *)toVC

先看效果

：

1.构建过度动画

转场动画的自定义的精髓在于动画过度对象 - (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext协议里面 可以获取到FromVC 和 ToVC 然后再在VC暴露属性出来做相应的alpha frame 等动画  之前要创建2个过渡动画对象 

一个是push

MagicMoveTransition

一个是pop

MagicMoveInverseTransition

原理都是一样 只是动画要自定义 有区别

例子：

//
//  MagicMoveTransition.m
//  KYMagicMove
//
//  Created by Kitten Yang on 1/17/15.
//  Copyright (c) 2015 Kitten Yang. All rights reserved.
//

#import "MagicMoveTransition.h"
#import "FirstCollectionViewController.h"
#import "SecondViewController.h"
#import "CollectionViewCell.h"
#import "UIView+MotionBlur.h"


@implementation MagicMoveTransition

- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext{
    return 0.25f;
}

- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
    //获取两个VC 和 动画发生的容器
    FirstCollectionViewController *fromVC = (FirstCollectionViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    SecondViewController *toVC   = (SecondViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *containerView = [transitionContext containerView];
    
    
    //对Cell上的 imageView 截图，同时将这个 imageView 本身隐藏
    CollectionViewCell *cell =(CollectionViewCell *)[fromVC.collectionView cellForItemAtIndexPath:[[fromVC.collectionView indexPathsForSelectedItems] firstObject]];

    UIView * snapShotView = [cell.imageView snapshotViewAfterScreenUpdates:NO];
    snapShotView.frame = fromVC.finalCellRect = [containerView convertRect:cell.imageView.frame fromView:cell.imageView.superview];
    cell.imageView.hidden = YES;

    
    //设置第二个控制器的位置、透明度
    toVC.view.frame = [transitionContext finalFrameForViewController:toVC];
    toVC.view.alpha = 0;
    toVC.imageViewForSecond.hidden = YES;
    
    //把动画前后的两个ViewController加到容器中,顺序很重要,snapShotView在上方
    [containerView addSubview:toVC.view];
    [containerView addSubview:snapShotView];
    
    //动起来。第二个控制器的透明度0~1；让截图SnapShotView的位置更新到最新；
    [containerView layoutIfNeeded];
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
//        [containerView layoutIfNeeded];
        toVC.view.alpha = 1.0;
        snapShotView.frame = [containerView convertRect:toVC.imageViewForSecond.frame fromView:toVC.view];
    } completion:^(BOOL finished) {
        //为了让回来的时候，cell上的图片显示，必须要让cell上的图片显示出来
        toVC.imageViewForSecond.hidden = NO;
        cell.imageView.hidden = NO;
        [snapShotView removeFromSuperview];
        //告诉系统动画结束
        [transitionContext completeTransition:!transitionContext.transitionWasCancelled];
    }];

}


@end

之后的动画可以自己定义做更优美的动画 以上是我稍微修改了原文作者kitten－yang的源码

2.使用：

FromVC里面的在viewDidAppear设置self.navigationController.delegate =self;（否则pop回来第二次push触发不到协议） 然后实现协议方法

 

#pragma mark <UINavigationControllerDelegate>
- (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC
{

    if ([toVC isKindOfClass:[SecondViewController class]])
    {
        MagicMoveTransition *transition = [[MagicMoveTransition alloc]init];
        return transition;
    }
    else
    {
        return nil;
    }
}

ToVC里面也需要设置self.navigationController.delegate = self但是不要像FromVC一样在viewDidAppear

#pragma mark <UINavigationControllerDelegate>
- (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC{
    if ([toVC isKindOfClass:[FirstCollectionViewController class]])
    {
        MagicMoveInverseTransition *inverseTransition = [[MagicMoveInverseTransition alloc]init];
        return inverseTransition;
    }
    else
    {
        return nil;
    }
}

源码地址：https://github.com/Jacky-LinPeng/MegicMove   

特别说明一下： 以上的源码是我修改kitten－yang的源码 主要的代码还是kitten－yang的成果 因为很喜欢这个效果 所以写这个笔记 备忘