iOS7中引入了controller之间切换动画,适用于UINavigationController栈内切换,也适用于madal显示。
iOS7中的controller动画切换支持两种类型,一种是自动切换,一种是交互式切换。
这里我们展示一下如何在navigation controller中实现fade自动切换。
Navigation Controller Delegate
UINavigationControllerDelegate中提供了4个新方法,它用来决定push/pop时候用什么样的变换。
我们感兴趣的方法是
当navigation controller在view controller之间变换的时候,这个方法总会被调用。
我们来创建一个类,作为navigation controller的delegate。
以下是我们的实现方法:
我们这里让每次变换动画都是一样的,即SCFadeTransition。
设置navigation controller的代码如下:
创建自定义变换
我们已经看到了delegate中需要返回一个变换对象,实际上就是遵循UIViewControllerAnimatedTransitioning 协议的对象。
此协议一共有三个方法,其中两个是必须要实现的:
• transitionDuration: (required). 动画时长
• animateTransition: (required). 动画
• animationEnded:. 动画结束时候调用,此方法可以选择实现
我们来定义一个类SCFadeTransition来实现这两个方法:
@interface SCFadeTransition : NSObject <UIViewControllerAnimatedTransitioning> @end
transitionDuration: 方法实现很简单:
这个方法会传入一个transitionContext,它的类型为UIViewControllerContextTransitioning。
我们可以利用viewControllerForKey: 方法知道是从哪个controller变换到哪个controller:
context中还可以提供了一个获取UIView的方法,这个UIView就是执行动画的地方。获取方法为调用containerView:
// Get the container view - where the animation has to happen UIView *containerView = [transitionContext containerView];
我们还要确保每个controller的view都必须是这个container view的subview:
// Add the two VC views to the container [containerView addSubview:fromVC.view]; [containerView addSubview:toVC.view];
我们不想看到要变换到的那个controller,那么就把它的view的alpha设置为0:
toVC.view.alpha = 0.0;
要实现fade效果,代码如下:
iOS7中的controller动画切换支持两种类型,一种是自动切换,一种是交互式切换。
这里我们展示一下如何在navigation controller中实现fade自动切换。
Navigation Controller Delegate
UINavigationControllerDelegate中提供了4个新方法,它用来决定push/pop时候用什么样的变换。
我们感兴趣的方法是
1 | - (id<UIViewControllerAnimatedTransitioning>)navigationController: animationControllerForOperation: fromViewController: toViewController: |
当navigation controller在view controller之间变换的时候,这个方法总会被调用。
我们来创建一个类,作为navigation controller的delegate。
1 | @interface SCNavControllerDelegate : NSObject <UINavigationControllerDelegate> @end |
以下是我们的实现方法:
1 | @implementation SCNavControllerDelegate - (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC { return [SCFadeTransition new ]; } @end |
我们这里让每次变换动画都是一样的,即SCFadeTransition。
设置navigation controller的代码如下:
1 | - (id)initWithCoder:(NSCoder *)aDecoder { self = [super initWithCoder:aDecoder]; if (self) { _navDelegate = [SCNavControllerDelegate new ]; self.delegate = _navDelegate; } return self; } |
2 | where _navDelegate is an ivar of type id<UINavigationControllerDelegate>. |
创建自定义变换
我们已经看到了delegate中需要返回一个变换对象,实际上就是遵循UIViewControllerAnimatedTransitioning 协议的对象。
此协议一共有三个方法,其中两个是必须要实现的:
• transitionDuration: (required). 动画时长
• animateTransition: (required). 动画
• animationEnded:. 动画结束时候调用,此方法可以选择实现
我们来定义一个类SCFadeTransition来实现这两个方法:
@interface SCFadeTransition : NSObject <UIViewControllerAnimatedTransitioning> @end
transitionDuration: 方法实现很简单:
1 | - (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext { return 2.0; } |
这个方法会传入一个transitionContext,它的类型为UIViewControllerContextTransitioning。
我们可以利用viewControllerForKey: 方法知道是从哪个controller变换到哪个controller:
1 | // Get the two view controllers UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; |
context中还可以提供了一个获取UIView的方法,这个UIView就是执行动画的地方。获取方法为调用containerView:
// Get the container view - where the animation has to happen UIView *containerView = [transitionContext containerView];
我们还要确保每个controller的view都必须是这个container view的subview:
// Add the two VC views to the container [containerView addSubview:fromVC.view]; [containerView addSubview:toVC.view];
我们不想看到要变换到的那个controller,那么就把它的view的alpha设置为0:
toVC.view.alpha = 0.0;
要实现fade效果,代码如下:
1 | [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0 options:0 animations:^{ toVC.view.alpha = 1.f; } completion:^( BOOL finished) { // Let's get rid of the old VC view [fromVC.view removeFromSuperview]; // And then we need to tell the context that we're done [transitionContext completeTransition:YES]; }]; |