從iOS7開始颜曾,蘋果更新了自定義ViewController轉(zhuǎn)場(chǎng)的API褐健,這些新增的類和接口讓很多人困惑,望而卻步物蝙。本文就從這些API入口炎滞,讓讀者理清這些API錯(cuò)綜復(fù)雜的關(guān)系。
幾個(gè)protocol
講自定義轉(zhuǎn)場(chǎng)就離不開這幾個(gè)protocol:
UIViewControllerContextTransitioning
UIViewControllerAnimatedTransitioning
UIViewControllerInteractiveTransitioning
UIViewControllerTransitioningDelegate
UINavigationControllerDelegate
UITabBarControllerDelegate
乍一看很多诬乞,其實(shí)很簡(jiǎn)單册赛,我們可以將其分為三類:
- 描述ViewController轉(zhuǎn)場(chǎng)的:
UIViewControllerTransitioningDelegate
,UINavigationControllerDelegate
,UITabBarControllerDelegate
- 定義動(dòng)畫內(nèi)容的
UIViewControllerAnimatedTransitioning
,UIViewControllerInteractiveTransitioning
- 表示動(dòng)畫上下文的
UIViewControllerContextTransitioning
描述ViewController轉(zhuǎn)場(chǎng)的
細(xì)說之前先扯個(gè)蛋:
為什么蘋果要引入這一套API?因?yàn)樵趇OS7之前震嫉,做轉(zhuǎn)場(chǎng)動(dòng)畫很麻煩森瘪,要寫一大堆代碼在ViewController中。引入這一套API之后票堵,在豐富功能的同時(shí)極大程度地降低了代碼耦合扼睬,實(shí)現(xiàn)方式就是將之前在ViewController里面的代碼通過protocol分離了出來。
順著這個(gè)思路往下想悴势,實(shí)現(xiàn)自定義轉(zhuǎn)場(chǎng)動(dòng)畫首先需要找到ViewController的delegate
窗宇。蘋果告訴我們切換ViewController有三種形式:UITabBarController內(nèi)部切換,UINavigationController切換特纤,present modal ViewController军俊。這三種方式是不是需要不同的protocol呢?
我們分別來看下:
-
UIViewControllerTransitioningDelegate
自定義模態(tài)轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)使用捧存。
設(shè)置UIViewController的屬性transitioningDelegate粪躬。
@property (nullable, nonatomic, weak) id <UIViewControllerTransitioningDelegate> transitioningDelegate
-
UINavigationControllerDelegate
自定義navigation轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)使用。
設(shè)置UINavigationController的屬性delegate
@property(nullable, nonatomic, weak) id<UINavigationControllerDelegate> delegate
-
UITabBarControllerDelegate
自定義tab轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)使用昔穴。
設(shè)置UITabBarController的屬性delegate
@property(nullable, nonatomic,weak) id<UITabBarControllerDelegate> delegate
實(shí)際上這三個(gè)protocol干的事情是一樣的短蜕,就是我們“扯淡”的內(nèi)容,只不過他們的應(yīng)用場(chǎng)景不同罷了傻咖。我們下面以UINavigationControllerDelegate
為例朋魔,其他的類似。
定義動(dòng)畫內(nèi)容的
UINavigationControllerDelegate
主要包含這兩個(gè)方法:
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController NS_AVAILABLE_IOS(7_0);
- (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
animationControllerForOperation:(UINavigationControllerOperation)operation
fromViewController:(UIViewController *)fromVC
toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0);
兩個(gè)方法分別返回UIViewControllerInteractiveTransitioning
和UIViewControllerAnimatedTransitioning
卿操,它們的任務(wù)是描述動(dòng)畫行為(轉(zhuǎn)場(chǎng)動(dòng)畫如何執(zhí)行警检,就看它倆的)。
從名字可以看出害淤,這兩個(gè)protocol的區(qū)別在于是否是interactive的扇雕。如何理解?****interactive動(dòng)畫可以根據(jù)輸入信息的變化改變動(dòng)畫的進(jìn)程窥摄。****例如iOS系統(tǒng)為UINavigationController
提供的默認(rèn)右滑退出手勢(shì)就是一個(gè)interactive 動(dòng)畫镶奉,整個(gè)動(dòng)畫的進(jìn)程由用戶手指的移動(dòng)距離控制。
我們來看下相對(duì)簡(jiǎn)單的UIViewControllerAnimatedTransitioning
:
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
@optional
- (void)animationEnded:(BOOL) transitionCompleted;
transitionDuration返回動(dòng)畫的執(zhí)行時(shí)間,animateTransition處理具體的動(dòng)畫哨苛,animationEnded是optional鸽凶,大部分情況下不需要處理。
這里出現(xiàn)了我們要講的最后一個(gè)protocol:UIViewControllerContextTransitioning
建峭。
表示動(dòng)畫上下文的
UIViewControllerContextTransitioning
也是唯一一個(gè)不需要我們實(shí)現(xiàn)的protocol玻侥。
Do not adopt this protocol in your own classes, nor should you directly create objects that adopt this protocol.
UIViewControllerContextTransitioning
提供了一系列方法,為interactive和非interactive動(dòng)畫提供上下文:
//轉(zhuǎn)場(chǎng)動(dòng)畫發(fā)生在該View中
- (nullable UIView *)containerView;
//上報(bào)動(dòng)畫執(zhí)行完畢
- (void)completeTransition:(BOOL)didComplete;
//根據(jù)key返回一個(gè)ViewController亿蒸。我們通過UITransitionContextFromViewControllerKey找到將被替換掉的ViewController凑兰,通過UITransitionContextToViewControllerKey找到將要顯示的ViewController
- (nullable __kindof UIViewController *)viewControllerForKey:(NSString *)key;
還有一些其他的方法,我們以后用到再說边锁。
下面我們通過一個(gè)簡(jiǎn)單的Demo串聯(lián)理解下姑食。
DEMO
這是一個(gè)縮放同時(shí)修改透明度的動(dòng)畫,我們來看下如何實(shí)現(xiàn)茅坛。
在上面的講解中矢门,我們通過倒推的方式來理解轉(zhuǎn)場(chǎng)動(dòng)畫中用到的protocol,在Demo 中灰蛙,我們會(huì)從創(chuàng)建動(dòng)畫開始。
第一步:創(chuàng)建動(dòng)畫
由上面的解析得知隔躲,動(dòng)畫是在UIViewControllerAnimatedTransitioning
中定義的摩梧,所以我們首先創(chuàng)建實(shí)現(xiàn)UIViewControllerAnimatedTransitioning
的對(duì)象:JLScaleTransition
。
JLScaleTransition.h
@interface JLScaleTransition : NSObject<UIViewControllerAnimatedTransitioning>
@end
JLScaleTransition.m
@implementation JLScaleTransition
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext
{
return 0.5f;
}
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
UIViewController *toVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIViewController *fromVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIView * containerView = [transitionContext containerView];
UIView * fromView = fromVC.view;
UIView * toView = toVC.view;
[containerView addSubview:toView];
[[transitionContext containerView] bringSubviewToFront:fromView];
NSTimeInterval duration = [self transitionDuration:transitionContext];
[UIView animateWithDuration:duration animations:^{
fromView.alpha = 0.0;
fromView.transform = CGAffineTransformMakeScale(0.2, 0.2);
toView.alpha = 1.0;
} completion:^(BOOL finished) {
fromView.transform = CGAffineTransformMakeScale(1, 1);
[transitionContext completeTransition:YES];
}];
}
在animateTransition
中宣旱,我們分別獲取兩個(gè)ViewController的view仅父,將toView
添加到containerView
中,然后執(zhí)行動(dòng)畫浑吟。為了理解containerView
和fromView
,toView
的關(guān)系笙纤,我們添加幾個(gè)log來分析一下:
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{
UIViewController *toVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIViewController *fromVC = (UIViewController*)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIView * containerView = [transitionContext containerView];
UIView * fromView = fromVC.view;
UIView * toView = toVC.view;
NSLog(@"startAnimation! fromView = %@", fromView);
NSLog(@"startAnimation! toView = %@", toView);
for(UIView * view in containerView.subviews){
NSLog(@"startAnimation! list container subviews: %@", view);
}
[containerView addSubview:toView];
[[transitionContext containerView] bringSubviewToFront:fromView];
NSTimeInterval duration = [self transitionDuration:transitionContext];
[UIView animateWithDuration:duration animations:^{
fromView.alpha = 0.0;
fromView.transform = CGAffineTransformMakeScale(0.2, 0.2);
toView.alpha = 1.0;
} completion:^(BOOL finished) {
fromView.transform = CGAffineTransformMakeScale(1, 1);
[transitionContext completeTransition:YES];
for(UIView * view in containerView.subviews){
NSLog(@"endAnimation! list container subviews: %@", view);
}
}];
}
運(yùn)行l(wèi)og如下:
2016-06-29 13:50:48.512 JLTransition[1970:177922] startAnimation! fromView = <UIView: 0x7aaef4e0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x7aaef5a0>>
2016-06-29 13:50:48.513 JLTransition[1970:177922] startAnimation! toView = <UIView: 0x796ac5a0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x796ac050>>
2016-06-29 13:50:48.513 JLTransition[1970:177922] startAnimation! list container subviews: <UIView: 0x7aaef4e0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x7aaef5a0>>
2016-06-29 13:50:49.017 JLTransition[1970:177922] endAnimation! list container subviews: <UIView: 0x796ac5a0; frame = (0 0; 320 568); autoresize = W+H; layer = <CALayer: 0x796ac050>>
可見,轉(zhuǎn)場(chǎng)執(zhí)行的時(shí)候组力,containerView
中只包含fromView
省容,轉(zhuǎn)場(chǎng)動(dòng)畫執(zhí)行完畢之后,containerView
會(huì)將fromView
移除燎字。因?yàn)?code>containerView不負(fù)責(zé)toView
的添加腥椒,所以我們需要主動(dòng)將toView
添加到containerView
中。
注意候衍!非interactive轉(zhuǎn)場(chǎng)中笼蛛,動(dòng)畫結(jié)束之后需要執(zhí)行
[transitionContext completeTransition:YES];(如果動(dòng)畫被取消,傳NO)
蛉鹿;但是在interactive轉(zhuǎn)場(chǎng)中滨砍,動(dòng)畫是否結(jié)束是由外界控制的(用戶行為或者特定函數(shù)),需要在外部調(diào)用。
第二步:定義轉(zhuǎn)場(chǎng)
在第二部惋戏,我們需要實(shí)現(xiàn)UIViewControllerAnimatedTransitioning
领追,并將第一步創(chuàng)建的JLScaleTransition
對(duì)象返回。
JLScaleNavControlDelegate.h
@interface JLScaleNavControlDelegate : NSObject<UINavigationControllerDelegate>
@end
JLScaleNavControlDelegate.m
@implementation JLScaleNavControlDelegate
- (nullable id <UIViewControllerAnimatedTransitioning>) navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC
{
return [JLScaleTransition new];
}
@end
這一步很簡(jiǎn)單日川,實(shí)現(xiàn)UIViewControllerAnimatedTransitioning
對(duì)應(yīng)方法即可蔓腐。
第三步:設(shè)置轉(zhuǎn)場(chǎng)
設(shè)置轉(zhuǎn)場(chǎng)其實(shí)就是設(shè)置delegate(還記得我們“扯淡”的內(nèi)容吧)。
self.navigationController.delegate = id<UINavigationControllerDelegate>
self.transitioningDelegate = id<UIViewControllerTransitioningDelegate>
self.tabBarController.delegate = id<UITabBarControllerDelegate>
設(shè)置delegate有兩種方式:通過代碼龄句;通過StoryBoard回论。
通過代碼設(shè)置
@interface ViewController ()
@property (nonatomic, strong) JLScaleNavControlDelegate * scaleNavDelegate;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.scaleNavDelegate = [JLScaleNavControlDelegate new];
}
- (IBAction)triggerTransitionDelegate:(id)sender
{
self.navigationController.delegate = self.scaleNavDelegate;
[self.navigationController pushViewController:[TargetViewController new] animated:YES];
}
通過StoryBoard設(shè)置
在StoryBoard中為Navigation Bar
添加一個(gè)Object,并且聲明為JLScaleNavControlDelegate
(定義見上文)分歇。
按住control傀蓉,從navigation controller拖線置新添加的object,指定為delegate职抡。
NEXT
今天就到這里葬燎,源碼放在github,還包括一些復(fù)雜的動(dòng)畫缚甩,會(huì)持續(xù)更新谱净,后面有時(shí)間專門挑幾個(gè)效果牛逼的聊聊。