轉場動畫在iOS開發中非常常見, 其原理大概如下圖:
TransitionAnimation.png
一切都是從圖中的 *** Transition Animation *** 開始.
本文主要基于以上這張圖, 講解了transitionFromViewController, CATransition, TransitionAnimation三種轉場實現方式.
transitionFromViewController
我們可以先看UIViewController自帶的方法:
transitionFromViewController:toViewController:duration:options:animations:completion:
參數很多, 不過都非常直觀.
通常的使用場景是 在多個Child ViewController之間切換.
AViewController *a = self.childViewControllers[0];
BViewController *b = self.childViewControllers[1];
CViewController *c = self.childViewControllers[2];
// Curl 翻頁效果
// UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown
// Flip 翻轉效果
// UIViewAnimationOptionTransitionFlipFromLeft, UIViewAnimationOptionTransitionFlipFromRight
// UIViewAnimationOptionTransitionFlipFromTop, UIViewAnimationOptionTransitionFlipFromDown
[self transitionFromViewController:_currentViewController
toViewController:b
duration:0.5
options:UIViewAnimationOptionTransitionFlipFromRight
animations:^{
} completion:^(BOOL finished) {
}];
轉場的效果可以通過options和animations參數來控制.
NewsNavigationBar
屏幕快照 2016-08-15 21.34.01.png
這個demo是利用transitionFromViewController方法實現的類似網易新聞的導航欄樣式.
DemoNewsNavigationBar
CATransition
CATransition繼承自CALayer, 包含了一些場景的動畫效果. 如Fade，Cube，Ripple，PageCurl，CameraIrilHollow等.
使用如下:
CATransition *animation = [CATransition animation];
animation.duration = 0.5;
animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;
animation.type = kCATransitionFade;
// 在當前view上執行CATransition動畫
// [self.view.layer addAnimation:animation forKey:@"animation"];
// 在window上執行CATransition, 即可在ViewController轉場時執行動畫。
[self.view.window.layer addAnimation:animation forKey:@"kTransitionAnimation"];
DemoCATransitionPresentedViewController *presentedVC = [[DemoCATransitionPresentedViewController alloc] init];
[self presentViewController:presentedVC animated:NO completion:nil];
如果僅僅在當前view的layer上添加該動畫, 則使用場景不在本文討論范圍之內.
而將該動畫添加到window.layer上, 則會在執行present或push操作時, 呈現指定的轉場動畫效果.
[self.navigationController.view.layer addAnimation:animation forKey:@"kTransitionAnimation"];
DemoCATransitionPushedViewController *pushedVC = [[DemoCATransitionPushedViewController alloc] init];
[self.navigationController pushViewController:pushedVC animated:NO];
Transition Animation
iOS中自定義的轉場動畫, 通常需要兩個對象.
UIViewControllerTransitioningDelegate
繼承該協議的對象是transition的代理, 該協議中主要指定了present/dismiss的UIViewControllerAnimatedTransitioning對象.
DemoViewControllerTransitionPresentedViewController *presentedVC = [[DemoViewControllerTransitionPresentedViewController alloc] init];
presentedVC.transitionDelegate = self;
[self presentViewController:presentedVC animated:YES completion:nil];
該協議包含的方法：
// prenent
- (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source;
// pop
- (id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed;
// prenent
- (id <UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator;
// pop
- (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator;
前兩個方法都返回的是繼承UIViewControllerAnimatedTransitioning協議的對象，其中即為轉場動畫的細節實現。
UIViewControllerAnimatedTransitioning
實現該協議的對象中即包含了轉場動畫的細節實現代碼, 因此, UIViewControllerTransitioningDelegate對象的作用主要是指定了包含轉場動畫細節實現的對象.
UIViewControllerAnimatedTransitioning包含的方法主要有：
轉場動畫時間
// This is used for percent driven interactive transitions, as well as for container controllers that have companion animations that might need to synchronize with the main animation.
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
動畫結束回調方法
@optional
// This is a convenience and if implemented will be invoked by the system when the transition context's completeTransition: method is invoked.
- (void)animationEnded:(BOOL) transitionCompleted;
轉場動畫細節實現
該方法中則主要負責轉場動畫細節的實現.
// This method can only be a nop if the transition is interactive and not a percentDriven interactive transition.
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
轉場細節中的幾個關鍵變量：
_transitionContext = transitionContext;
_containerView = [transitionContext containerView];
_from = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
_to = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
// iOS8之后才有
if ([transitionContext respondsToSelector:@selector(viewForKey:)]) {
_fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
_toView = [transitionContext viewForKey:UITransitionContextToViewKey];
} else {
_fromView = _from.view;
_toView = _to.view;
}
containerView即是轉場過程中呈現出來的View.
我們能夠從transitionContext中獲取到fromView和toView, 則用這兩個view的內容對containerView進行填充, 即可實現轉場細節了.
本文的Demo中實現了幾種常見的轉場動畫, 包括present/dismiss, presentHalf, Bubble, Drawer，push/pop.
UINavigationControllerDelegate
在UINavigationController的轉場中, 要指定UINavigationControllerDelegate對象.
self.navigationController.delegate = self;
[self.navigationController pushViewController:itemVC animated:YES];
push/pop主要是如下兩個方法
//
- (id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC;
//
- (id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
animationController;
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>)
使用如下:
#pragma mark - <UINavigationControllerDelegate>
- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC {
// Push/Pop
AnimatorPushPopTransition *pushPopTransition = [[AnimatorPushPopTransition alloc] init];
if (operation == UINavigationControllerOperationPush) {
pushPopTransition.animatorTransitionType = kAnimatorTransitionTypePush;
} else {
pushPopTransition.animatorTransitionType = kAnimatorTransitionTypePop;
}
NSArray *indexPaths = [_collectionView indexPathsForSelectedItems];
if (indexPaths.count == 0) {
return nil;
}
NSIndexPath *selectedIndexPath = indexPaths[0];
UICollectionViewCell *cell = [_collectionView cellForItemAtIndexPath:selectedIndexPath];
// 一定要加上convertPoint:toView:操作
pushPopTransition.itemCenter = [_collectionView convertPoint:cell.center toView:self.view];
pushPopTransition.itemSize = cell.frame.size;
pushPopTransition.imageName = [NSString stringWithFormat:@"%ld", (long)selectedIndexPath.item];
return pushPopTransition;
}
UITabBarController
在UITabBarController的轉場中, 同樣指定UITabBarControllerDelegate對象即可.
//
- (id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
animationControllerForTransitionFromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC;
//
- (id <UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>)animationController;
使用情況都比較類似, 這里就不多說了.
Demo
本文的Demo地址:
iOS-TransitionAnimation
