轉(zhuǎn)場(chǎng)動(dòng)畫在iOS開發(fā)中非常常見, 其原理大概如下圖:
一切都是從圖中的 *** Transition Animation *** 開始.
本文主要基于以上這張圖, 講解了transitionFromViewController, CATransition, TransitionAnimation三種轉(zhuǎn)場(chǎng)實(shí)現(xiàn)方式.
transitionFromViewController
我們可以先看UIViewController自帶的方法:
transitionFromViewController:toViewController:duration:options:animations:completion:
參數(shù)很多, 不過都非常直觀.
通常的使用場(chǎng)景是 在多個(gè)Child ViewController之間切換.
AViewController *a = self.childViewControllers[0];
BViewController *b = self.childViewControllers[1];
CViewController *c = self.childViewControllers[2];
// Curl 翻頁(yè)效果
// UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown
// Flip 翻轉(zhuǎn)效果
// UIViewAnimationOptionTransitionFlipFromLeft, UIViewAnimationOptionTransitionFlipFromRight
// UIViewAnimationOptionTransitionFlipFromTop, UIViewAnimationOptionTransitionFlipFromDown
[self transitionFromViewController:_currentViewController
toViewController:b
duration:0.5
options:UIViewAnimationOptionTransitionFlipFromRight
animations:^{
} completion:^(BOOL finished) {
}];
轉(zhuǎn)場(chǎng)的效果可以通過options和animations參數(shù)來控制.
NewsNavigationBar
這個(gè)demo是利用transitionFromViewController方法實(shí)現(xiàn)的類似網(wǎng)易新聞的導(dǎo)航欄樣式.
DemoNewsNavigationBar
CATransition
CATransition繼承自CALayer, 包含了一些場(chǎng)景的動(dòng)畫效果. 如Fade，Cube，Ripple，PageCurl，CameraIrilHollow等.
使用如下:
CATransition *animation = [CATransition animation];
animation.duration = 0.5;
animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;
animation.type = kCATransitionFade;
// 在當(dāng)前view上執(zhí)行CATransition動(dòng)畫
// [self.view.layer addAnimation:animation forKey:@"animation"];
// 在window上執(zhí)行CATransition, 即可在ViewController轉(zhuǎn)場(chǎng)時(shí)執(zhí)行動(dòng)畫。
[self.view.window.layer addAnimation:animation forKey:@"kTransitionAnimation"];
DemoCATransitionPresentedViewController *presentedVC = [[DemoCATransitionPresentedViewController alloc] init];
[self presentViewController:presentedVC animated:NO completion:nil];
如果僅僅在當(dāng)前view的layer上添加該動(dòng)畫, 則使用場(chǎng)景不在本文討論范圍之內(nèi).
而將該動(dòng)畫添加到window.layer上, 則會(huì)在執(zhí)行present或push操作時(shí), 呈現(xiàn)指定的轉(zhuǎn)場(chǎng)動(dòng)畫效果.
[self.navigationController.view.layer addAnimation:animation forKey:@"kTransitionAnimation"];
DemoCATransitionPushedViewController *pushedVC = [[DemoCATransitionPushedViewController alloc] init];
[self.navigationController pushViewController:pushedVC animated:NO];
Transition Animation
iOS中自定義的轉(zhuǎn)場(chǎng)動(dòng)畫, 通常需要兩個(gè)對(duì)象.
UIViewControllerTransitioningDelegate
繼承該協(xié)議的對(duì)象是transition的代理, 該協(xié)議中主要指定了present/dismiss的UIViewControllerAnimatedTransitioning對(duì)象.
DemoViewControllerTransitionPresentedViewController *presentedVC = [[DemoViewControllerTransitionPresentedViewController alloc] init];
presentedVC.transitionDelegate = self;
[self presentViewController:presentedVC animated:YES completion:nil];
該協(xié)議包含的方法：
// 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;
前兩個(gè)方法都返回的是繼承UIViewControllerAnimatedTransitioning協(xié)議的對(duì)象，其中即為轉(zhuǎn)場(chǎng)動(dòng)畫的細(xì)節(jié)實(shí)現(xiàn)。
UIViewControllerAnimatedTransitioning
實(shí)現(xiàn)該協(xié)議的對(duì)象中即包含了轉(zhuǎn)場(chǎng)動(dòng)畫的細(xì)節(jié)實(shí)現(xiàn)代碼, 因此, UIViewControllerTransitioningDelegate對(duì)象的作用主要是指定了包含轉(zhuǎn)場(chǎng)動(dòng)畫細(xì)節(jié)實(shí)現(xiàn)的對(duì)象.
UIViewControllerAnimatedTransitioning包含的方法主要有：
轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)間
// 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;
動(dòng)畫結(jié)束回調(diào)方法
@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;
轉(zhuǎn)場(chǎng)動(dòng)畫細(xì)節(jié)實(shí)現(xiàn)
該方法中則主要負(fù)責(zé)轉(zhuǎn)場(chǎng)動(dòng)畫細(xì)節(jié)的實(shí)現(xiàn).
// This method can only be a nop if the transition is interactive and not a percentDriven interactive transition.
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
轉(zhuǎn)場(chǎng)細(xì)節(jié)中的幾個(gè)關(guān)鍵變量：
_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即是轉(zhuǎn)場(chǎng)過程中呈現(xiàn)出來的View.
我們能夠從transitionContext中獲取到fromView和toView, 則用這兩個(gè)view的內(nèi)容對(duì)containerView進(jìn)行填充, 即可實(shí)現(xiàn)轉(zhuǎn)場(chǎng)細(xì)節(jié)了.
本文的Demo中實(shí)現(xiàn)了幾種常見的轉(zhuǎn)場(chǎng)動(dòng)畫, 包括present/dismiss, presentHalf, Bubble, Drawer，push/pop.
UINavigationControllerDelegate
在UINavigationController的轉(zhuǎn)場(chǎng)中, 要指定UINavigationControllerDelegate對(duì)象.
self.navigationController.delegate = self;
[self.navigationController pushViewController:itemVC animated:YES];
push/pop主要是如下兩個(gè)方法
//
- (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的轉(zhuǎn)場(chǎng)中, 同樣指定UITabBarControllerDelegate對(duì)象即可.
//
- (id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController
animationControllerForTransitionFromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC;
//
- (id <UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>)animationController;
使用情況都比較類似, 這里就不多說了.
Demo
本文的Demo地址:
iOS-TransitionAnimation
