更新,更簡(jiǎn)單的自定義轉(zhuǎn)場(chǎng)集成或链！
幾句代碼快速集成自定義轉(zhuǎn)場(chǎng)效果+ 全手勢(shì)驅(qū)動(dòng)
寫在前面
這兩天閑下來(lái)好好的研究了一下自定義轉(zhuǎn)場(chǎng)，關(guān)于這方面的文章網(wǎng)絡(luò)上已經(jīng)很多了榛搔，作為新手鹰服，我想通過(guò)這篇文章把自己這幾天的相關(guān)學(xué)習(xí)心得記錄一下，方便加深印響和以后的回顧锈候，這是我第一寫技術(shù)文章薄料，不好之處請(qǐng)諒解，通過(guò)這幾天的學(xué)習(xí)泵琳，我嘗試實(shí)現(xiàn)了四個(gè)效果，廢話不多說(shuō)誊役，先上效果圖：
DEMO ONE：一個(gè)彈性的present動(dòng)畫获列，支持手勢(shì)present和dismiss
彈性pop
DEMO TWO：一個(gè)類似于KeyNote的神奇移動(dòng)效果push動(dòng)畫，支持手勢(shì)pop
神奇移動(dòng)
DEMO THREE：一個(gè)翻頁(yè)push效果蛔垢，支持手勢(shì)PUSH和POP
翻頁(yè)效果
DEMO FOUR：一個(gè)小圓點(diǎn)擴(kuò)散present效果击孩，支持手勢(shì)dimiss
擴(kuò)散效果
動(dòng)手前
大家都知道從iOS7開(kāi)始，蘋果就提供了自定義轉(zhuǎn)場(chǎng)的API鹏漆，模態(tài)推送present和dismiss巩梢、導(dǎo)航控制器push和pop、標(biāo)簽控制器的控制器切換都可以自定義轉(zhuǎn)場(chǎng)了艺玲，關(guān)于過(guò)多的理論我就不太多說(shuō)明了括蝠，大家可以先參照onevcat大神的這篇博客：WWDC 2013 Session筆記 - iOS7中的ViewController切換，我想把整個(gè)自定義轉(zhuǎn)場(chǎng)的步驟做個(gè)總結(jié)：
-
我們需要自定義一個(gè)遵循的
<UIViewControllerAnimatedTransitioning>協(xié)議的動(dòng)畫過(guò)渡管理對(duì)象饭聚，并實(shí)現(xiàn)兩個(gè)必須實(shí)現(xiàn)的方法：//返回動(dòng)畫事件 - (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext; //所有的過(guò)渡動(dòng)畫事務(wù)都在這個(gè)方法里面完成 - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext; 我們還需要自定義一個(gè)繼承于
UIPercentDrivenInteractiveTransition的手勢(shì)過(guò)渡管理對(duì)象忌警，我把它成為百分比手勢(shì)過(guò)渡管理對(duì)象，因?yàn)閯?dòng)畫的過(guò)程是通過(guò)百分比控制的-
成為相應(yīng)的代理秒梳，實(shí)現(xiàn)相應(yīng)的代理方法法绵，返回我們前兩步自定義的對(duì)象就OK了 ！
模態(tài)推送需要實(shí)現(xiàn)如下4個(gè)代理方法酪碘，iOS8新的那個(gè)方法我暫時(shí)還沒(méi)有發(fā)現(xiàn)它的用處朋譬，所以暫不討論
//返回一個(gè)管理prenent動(dòng)畫過(guò)渡的對(duì)象 - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source; //返回一個(gè)管理pop動(dòng)畫過(guò)渡的對(duì)象 - (nullable id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed; //返回一個(gè)管理prenent手勢(shì)過(guò)渡的對(duì)象 - (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id <UIViewControllerAnimatedTransitioning>)animator; //返回一個(gè)管理pop動(dòng)畫過(guò)渡的對(duì)象 - (nullable id <UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id <UIViewControllerAnimatedTransitioning>)animator;導(dǎo)航控制器實(shí)現(xiàn)如下2個(gè)代理方法
//返回轉(zhuǎn)場(chǎng)動(dòng)畫過(guò)渡管理對(duì)象 - (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController NS_AVAILABLE_IOS(7_0); //返回手勢(shì)過(guò)渡管理對(duì)象 - (nullable id <UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0);標(biāo)簽控制器也有相應(yīng)的兩個(gè)方法
//返回轉(zhuǎn)場(chǎng)動(dòng)畫過(guò)渡管理對(duì)象 - (nullable id <UIViewControllerInteractiveTransitioning>)tabBarController:(UITabBarController *)tabBarController interactionControllerForAnimationController: (id <UIViewControllerAnimatedTransitioning>)animationController NS_AVAILABLE_IOS(7_0); //返回手勢(shì)過(guò)渡管理對(duì)象 - (nullable id <UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController animationControllerForTransitionFromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC NS_AVAILABLE_IOS(7_0); 如果看著這些常常的代理方法名頭疼的話，沒(méi)關(guān)系兴垦，先在demo中用起來(lái)吧徙赢，慢慢就習(xí)慣了庭呜，其實(shí)哪種自定義轉(zhuǎn)場(chǎng)都只需要這3個(gè)步驟，如果不需要手勢(shì)控制犀忱，步驟2還可以取消募谎，現(xiàn)在就讓我們動(dòng)手來(lái)實(shí)現(xiàn)效果吧
動(dòng)手吧！
demo one
1阴汇、我們首先創(chuàng)建2個(gè)控制器数冬，為了方便我稱做present操作的為vc1、被present的為vc2搀庶，點(diǎn)擊一個(gè)控制器上的按鈕可以push出另一個(gè)控制器
2拐纱、 然后我們創(chuàng)建一個(gè)過(guò)渡動(dòng)畫管理的類,遵循<UIViewControllerAnimatedTransitioning>協(xié)議，我這里是XWPresentOneTransition,由于我們要同時(shí)管理present和dismiss2個(gè)動(dòng)畫哥倔，你可以實(shí)現(xiàn)相應(yīng)的兩個(gè)類分別管理兩個(gè)動(dòng)畫秸架，但是我覺(jué)得用一個(gè)類來(lái)管理就好了，看著比較舒服咆蒿，邏輯也比較緊密东抹，因?yàn)閜resent和dismiss的動(dòng)畫邏輯很類似，寫在一起沃测，可以相互參考缭黔，所以我定義了一個(gè)枚舉和兩個(gè)初始化方法：
XWPresentOneTransition.h
typedef NS_ENUM(NSUInteger, XWPresentOneTransitionType) {
XWPresentOneTransitionTypePresent = 0,//管理present動(dòng)畫
XWPresentOneTransitionTypeDismiss//管理dismiss動(dòng)畫
};
@interface XWPresentOneTransition : NSObject<UIViewControllerAnimatedTransitioning>
//根據(jù)定義的枚舉初始化的兩個(gè)方法
+ (instancetype)transitionWithTransitionType:(XWPresentOneTransitionType)type;
- (instancetype)initWithTransitionType:(XWPresentOneTransitionType)type;
3、 然后再.m文件里面實(shí)現(xiàn)必須實(shí)現(xiàn)的兩個(gè)代理方法
@implementation XWPresentOneTransition
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
return 0.5;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
//為了將兩種動(dòng)畫的邏輯分開(kāi)蒂破，變得更加清晰馏谨，我們分開(kāi)書寫邏輯，
switch (_type) {
case XWPresentOneTransitionTypePresent:
[self presentAnimation:transitionContext];
break;
case XWPresentOneTransitionTypeDismiss:
[self dismissAnimation:transitionContext];
break;
}
}
//實(shí)現(xiàn)present動(dòng)畫邏輯代碼
- (void)presentAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
}
//實(shí)現(xiàn)dismiss動(dòng)畫邏輯代碼
- (void)dismissAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
}
4附迷、 設(shè)置vc2的transitioningDelegate惧互，我就設(shè)為它自己咯，我實(shí)在vc2的init方法中設(shè)置的喇伯，并實(shí)現(xiàn)代理方法
- (instancetype)init
{
self = [super init];
if (self) {
self.transitioningDelegate = self;
//為什么要設(shè)置為Custom喊儡，在最后說(shuō)明.
self.modalPresentationStyle = UIModalPresentationCustom;
}
return self;
}
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
//這里我們初始化presentType
return [XWPresentOneTransition transitionWithTransitionType:XWPresentOneTransitionTypePresent];
}
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed{
//這里我們初始化dismissType
return [XWPresentOneTransition transitionWithTransitionType:XWPresentOneTransitionTypeDismiss];
}
5、 至此我們所有的準(zhǔn)備工作就做好了,下面只需要專心在presentAnimation:方法和dismissAnimation方法中實(shí)現(xiàn)動(dòng)畫邏輯就OK了艘刚，先看presentAnimation:
- (void)presentAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{`
//通過(guò)viewControllerForKey取出轉(zhuǎn)場(chǎng)前后的兩個(gè)控制器管宵，這里toVC就是vc1、fromVC就是vc2
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
//snapshotViewAfterScreenUpdates可以對(duì)某個(gè)視圖截圖攀甚，我們采用對(duì)這個(gè)截圖做動(dòng)畫代替直接對(duì)vc1做動(dòng)畫箩朴，因?yàn)樵谑謩?shì)過(guò)渡中直接使用vc1動(dòng)畫會(huì)和手勢(shì)有沖突， 如果不需要實(shí)現(xiàn)手勢(shì)的話秋度，就可以不是用截圖視圖了炸庞，大家可以自行嘗試一下
UIView *tempView = [fromVC.view snapshotViewAfterScreenUpdates:NO];
tempView.frame = fromVC.view.frame;
//因?yàn)閷?duì)截圖做動(dòng)畫，vc1就可以隱藏了
fromVC.view.hidden = YES;
//這里有個(gè)重要的概念containerView荚斯，如果要對(duì)視圖做轉(zhuǎn)場(chǎng)動(dòng)畫埠居，視圖就必須要加入containerView中才能進(jìn)行查牌，可以理解containerView管理著所有做轉(zhuǎn)場(chǎng)動(dòng)畫的視圖
UIView *containerView = [transitionContext containerView];
//將截圖視圖和vc2的view都加入ContainerView中
[containerView addSubview:tempView];
[containerView addSubview:toVC.view];
//設(shè)置vc2的frame，因?yàn)檫@里vc2present出來(lái)不是全屏滥壕，且初始的時(shí)候在底部纸颜，如果不設(shè)置frame的話默認(rèn)就是整個(gè)屏幕咯，這里containerView的frame就是整個(gè)屏幕
toVC.view.frame = CGRectMake(0, containerView.height, containerView.width, 400);
//開(kāi)始動(dòng)畫吧绎橘，使用產(chǎn)生彈簧效果的動(dòng)畫API
[UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0 usingSpringWithDamping:0.55 initialSpringVelocity:1.0 / 0.55 options:0 animations:^{
//首先我們讓vc2向上移動(dòng)
toVC.view.transform = CGAffineTransformMakeTranslation(0, -400);
//然后讓截圖視圖縮小一點(diǎn)即可
tempView.transform = CGAffineTransformMakeScale(0.85, 0.85);
} completion:^(BOOL finished) {
//使用如下代碼標(biāo)記整個(gè)轉(zhuǎn)場(chǎng)過(guò)程是否正常完成[transitionContext transitionWasCancelled]代表手勢(shì)是否取消了胁孙，如果取消了就傳NO表示轉(zhuǎn)場(chǎng)失敗，反之亦然称鳞，如果不用手勢(shì)present的話直接傳YES也是可以的涮较，但是無(wú)論如何我們都必須標(biāo)記轉(zhuǎn)場(chǎng)的狀態(tài)，系統(tǒng)才知道處理轉(zhuǎn)場(chǎng)后的操作冈止，否者認(rèn)為你一直還在轉(zhuǎn)場(chǎng)中狂票，會(huì)出現(xiàn)無(wú)法交互的情況，切記熙暴！
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
//轉(zhuǎn)場(chǎng)失敗后的處理
if ([transitionContext transitionWasCancelled]) {
//失敗后闺属，我們要把vc1顯示出來(lái)
fromVC.view.hidden = NO;
//然后移除截圖視圖，因?yàn)橄麓斡|發(fā)present會(huì)重新截圖
[tempView removeFromSuperview];
}
}];
}
再看dismissAnimation 方法
- (void)dismissAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
//注意在dismiss的時(shí)候fromVC就是vc2了怨咪，toVC才是VC1了屋剑，注意這個(gè)關(guān)系
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//參照present動(dòng)畫的邏輯，present成功后诗眨，containerView的最后一個(gè)子視圖就是截圖視圖，我們將其取出準(zhǔn)備動(dòng)畫
UIView *tempView = [transitionContext containerView].subviews[0];
//動(dòng)畫吧
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
//因?yàn)閜resent的時(shí)候都是使用的transform孕讳，這里的動(dòng)畫只需要將transform恢復(fù)就可以了
fromVC.view.transform = CGAffineTransformIdentity;
tempView.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
if ([transitionContext transitionWasCancelled]) {
//失敗了標(biāo)記失敗
[transitionContext completeTransition:NO];
}else{
//如果成功了匠楚，我們需要標(biāo)記成功，同時(shí)讓vc1顯示出來(lái)厂财，然后移除截圖視圖芋簿，
[transitionContext completeTransition:YES];
toVC.view.hidden = NO;
[tempView removeFromSuperview];
}
}];
}
6、如果不需要手勢(shì)控制璃饱，這個(gè)轉(zhuǎn)場(chǎng)就算完成了与斤，下面我們來(lái)添加手勢(shì)，首先創(chuàng)建一個(gè)手勢(shì)過(guò)渡管理的類荚恶，我這里是XWInteractiveTransition,因?yàn)闊o(wú)論哪一種轉(zhuǎn)場(chǎng)撩穿，手勢(shì)控制的實(shí)質(zhì)都是一樣的，我干脆就把這個(gè)手勢(shì)過(guò)渡管理的類封裝了一下谒撼，具體可以在.h文件里面查看食寡，在接下來(lái)的三個(gè)轉(zhuǎn)場(chǎng)效果中我們都可以便捷的是使用它 .m文件說(shuō)明
//通過(guò)這個(gè)方法給控制器的View添加相應(yīng)的手勢(shì)
- (void)addPanGestureForViewController:(UIViewController *)viewController{
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)];
//將傳入的控制器保存，因?yàn)橐盟|發(fā)轉(zhuǎn)場(chǎng)操作
self.vc = viewController;
[viewController.view addGestureRecognizer:pan];
}
//關(guān)鍵的手勢(shì)過(guò)渡的過(guò)程
- (void)handleGesture:(UIPanGestureRecognizer *)panGesture{
//persent是根據(jù)panGesture的移動(dòng)距離獲取的廓潜，這里就不說(shuō)明了抵皱，可具體去代碼中查看
switch (panGesture.state) {
case UIGestureRecognizerStateBegan:
//手勢(shì)開(kāi)始的時(shí)候標(biāo)記手勢(shì)狀態(tài)善榛，并開(kāi)始相應(yīng)的事件，它的作用在使用這個(gè)類的時(shí)候說(shuō)明
self.interation = YES;
//手勢(shì)開(kāi)始是觸發(fā)對(duì)應(yīng)的轉(zhuǎn)場(chǎng)操作呻畸，方法代碼在后面
[self startGesture];
break;
case UIGestureRecognizerStateChanged:{
//手勢(shì)過(guò)程中移盆，通過(guò)updateInteractiveTransition設(shè)置轉(zhuǎn)場(chǎng)過(guò)程進(jìn)行的百分比，然后系統(tǒng)會(huì)根據(jù)百分比自動(dòng)布局控件伤为，不用我們控制了
[self updateInteractiveTransition:persent];
break;
}
case UIGestureRecognizerStateEnded:{
//手勢(shì)完成后結(jié)束標(biāo)記并且判斷移動(dòng)距離是否過(guò)半咒循，過(guò)則finishInteractiveTransition完成轉(zhuǎn)場(chǎng)操作，否者取消轉(zhuǎn)場(chǎng)操作钮呀，轉(zhuǎn)場(chǎng)失敗
self.interation = NO;
if (persent > 0.5) {
[self finishInteractiveTransition];
}else{
[self cancelInteractiveTransition];
}
break;
}
default:
break;
}
}
//觸發(fā)對(duì)應(yīng)轉(zhuǎn)場(chǎng)操作的代碼如下剑鞍，根據(jù)type(type是我自定義的枚舉值)我們?nèi)ヅ袛嗍怯|發(fā)哪種操作，對(duì)于push和present由于要傳入需要push和present的控制器爽醋，為了解耦蚁署，我用block把這個(gè)操作交個(gè)控制器去做了，讓這個(gè)手勢(shì)過(guò)渡管理者可以充分被復(fù)用
- (void)startGesture{
switch (_type) {
case XWInteractiveTransitionTypePresent:{
if (_presentConifg) {
_presentConifg();
}
}
break;
case XWInteractiveTransitionTypeDismiss:
[_vc dismissViewControllerAnimated:YES completion:nil];
break;
case XWInteractiveTransitionTypePush:{
if (_pushConifg) {
_pushConifg();
}
}
break;
case XWInteractiveTransitionTypePop:
[_vc.navigationController popViewControllerAnimated:YES];
break;
}
}
7蚂四、 手勢(shì)過(guò)渡管理者就算完畢了光戈，這個(gè)手勢(shì)管理者可以用到其他任何的模態(tài)和導(dǎo)航控制器轉(zhuǎn)場(chǎng)中，以后都不用在寫了遂赠，現(xiàn)在把他用起來(lái)久妆，在vc2和vc1中創(chuàng)建相應(yīng)的手勢(shì)過(guò)渡管理者，并放到相應(yīng)的代理方法去返回它
//創(chuàng)建dismiss手勢(shì)過(guò)渡管理者跷睦，present的手勢(shì)過(guò)渡要在vc1中創(chuàng)建筷弦，因?yàn)閜resent的手勢(shì)是加載vc1的view上的，我選擇通過(guò)代理吧vc1中創(chuàng)建的手勢(shì)過(guò)渡管理者傳過(guò)來(lái)
self.interactiveDismiss = [XWInteractiveTransition interactiveTransitionWithTransitionType:XWInteractiveTransitionTypeDismiss GestureDirection:XWInteractiveTransitionGestureDirectionDown];
[self.interactiveDismiss addPanGestureForViewController:self];
[_interactivePush addPanGestureForViewController:self.navigationController];
//返回dissmiss的手勢(shì)過(guò)渡管理
- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal: (id<UIViewControllerAnimatedTransitioning>)animator{
//在沒(méi)有用手勢(shì)觸發(fā)的dismiss的時(shí)候需要傳nil抑诸，否者無(wú)法點(diǎn)擊dimiss烂琴，所以interation就是用來(lái)判斷是否是手勢(shì)觸發(fā)轉(zhuǎn)場(chǎng)的
return _interactiveDismiss.interation ? _interactiveDismiss : nil;
}
//返回present的手勢(shì)管理，這個(gè)手勢(shì)管理者是在vc1中創(chuàng)建的蜕乡，我用代理傳過(guò)來(lái)的
- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation: (id<UIViewControllerAnimatedTransitioning>)animator{
XWInteractiveTransition *interactivePresent = [_delegate interactiveTransitionForPresent];
return interactivePresent.interation ? interactivePresent : nil;
}
8奸绷、 終于完成了，再來(lái)看一下效果层玲，是不是還不錯(cuò)号醉！
彈性pop
DEMO TWO
1、 創(chuàng)建動(dòng)畫過(guò)渡管理者的代碼就不重復(fù)說(shuō)明了辛块，我仿造demo1畔派，利用枚舉創(chuàng)建了一個(gè)同時(shí)管理push和pop的管理者，然后動(dòng)畫的邏輯代碼集中在doPushAnimation和doPopAnimation中憨降，很多內(nèi)容都在demo1中說(shuō)明了父虑，下面的注釋就比較簡(jiǎn)單了，來(lái)看看
//Push動(dòng)畫邏輯
- (void)doPushAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
XWMagicMoveController *fromVC = (XWMagicMoveController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
XWMagicMovePushController *toVC = (XWMagicMovePushController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//拿到當(dāng)前點(diǎn)擊的cell的imageView
XWMagicMoveCell *cell = (XWMagicMoveCell *)[fromVC.collectionView cellForItemAtIndexPath:fromVC.currentIndexPath];
UIView *containerView = [transitionContext containerView];
//snapshotViewAfterScreenUpdates 對(duì)cell的imageView截圖保存成另一個(gè)視圖用于過(guò)渡授药，并將視圖轉(zhuǎn)換到當(dāng)前控制器的坐標(biāo)
UIView *tempView = [cell.imageView snapshotViewAfterScreenUpdates:NO];
tempView.frame = [cell.imageView convertRect:cell.imageView.bounds toView: containerView];
//設(shè)置動(dòng)畫前的各個(gè)控件的狀態(tài)
cell.imageView.hidden = YES;
toVC.view.alpha = 0;
toVC.imageView.hidden = YES;
//tempView 添加到containerView中士嚎，要保證在最前方呜魄，所以后添加
[containerView addSubview:toVC.view];
[containerView addSubview:tempView];
//開(kāi)始做動(dòng)畫
[UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0 usingSpringWithDamping:0.55 initialSpringVelocity:1 / 0.55 options:0 animations:^{
tempView.frame = [toVC.imageView convertRect:toVC.imageView.bounds toView:containerView];
toVC.view.alpha = 1;
} completion:^(BOOL finished) {
//tempView先隱藏不銷毀，pop的時(shí)候還會(huì)用
tempView.hidden = YES;
toVC.imageView.hidden = NO;
//如果動(dòng)畫過(guò)渡取消了就標(biāo)記不完成莱衩，否則才完成爵嗅，這里可以直接寫YES，如果有手勢(shì)過(guò)渡才需要判斷笨蚁，必須標(biāo)記睹晒，否則系統(tǒng)不會(huì)中動(dòng)畫完成的部署膜毁，會(huì)出現(xiàn)無(wú)法交互之類的bug
[transitionContext completeTransition:YES];
}];
}
//Pop動(dòng)畫邏輯
- (void)doPopAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
XWMagicMovePushController *fromVC = (XWMagicMovePushController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
XWMagicMoveController *toVC = (XWMagicMoveController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
XWMagicMoveCell *cell = (XWMagicMoveCell *)[toVC.collectionView cellForItemAtIndexPath:toVC.currentIndexPath];
UIView *containerView = [transitionContext containerView];
//這里的lastView就是push時(shí)候初始化的那個(gè)tempView
UIView *tempView = containerView.subviews.lastObject;
//設(shè)置初始狀態(tài)
cell.imageView.hidden = YES;
fromVC.imageView.hidden = YES;
tempView.hidden = NO;
[containerView insertSubview:toVC.view atIndex:0];
[UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0 usingSpringWithDamping:0.55 initialSpringVelocity:1 / 0.55 options:0 animations:^{
tempView.frame = [cell.imageView convertRect:cell.imageView.bounds toView:containerView];
fromVC.view.alpha = 0;
} completion:^(BOOL finished) {
//由于加入了手勢(shì)必須判斷
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
if ([transitionContext transitionWasCancelled]) {//手勢(shì)取消了嗜逻，原來(lái)隱藏的imageView要顯示出來(lái)
//失敗了隱藏tempView启上，顯示fromVC.imageView
tempView.hidden = YES;
fromVC.imageView.hidden = NO;
}else{//手勢(shì)成功悔详，cell的imageView也要顯示出來(lái)
//成功了移除tempView，下一次pop的時(shí)候又要?jiǎng)?chuàng)建闻察，然后顯示cell的imageView
cell.imageView.hidden = NO;
[tempView removeFromSuperview];
}
}];
}
2纬纪、 然后將這個(gè)動(dòng)畫過(guò)渡管理者和demo1中創(chuàng)建的手勢(shì)過(guò)渡管理者分別放到正確的代理方法中揍移，用起來(lái)就可以了
神奇移動(dòng)
DEMO THREE
1览濒、 直接看看doPushAnimation和doPopAnimation的動(dòng)畫邏輯呆盖，這次使用了CAGradientLayer給動(dòng)畫的過(guò)程增加了陰影
//Push動(dòng)畫邏輯
- (void)doPushAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//還是使用截圖大法來(lái)完成動(dòng)畫，不然還是會(huì)有奇妙的bug;
UIView *tempView = [fromVC.view snapshotViewAfterScreenUpdates:NO];
tempView.frame = fromVC.view.frame;
UIView *containerView = [transitionContext containerView];
//將將要?jiǎng)赢嫷囊晥D加入containerView
[containerView addSubview:toVC.view];
[containerView addSubview:tempView];
fromVC.view.hidden = YES;
[containerView insertSubview:toVC.view atIndex:0];
//設(shè)置AnchorPoint贷笛，并增加3D透視效果
[tempView setAnchorPointTo:CGPointMake(0, 0.5)];
CATransform3D transfrom3d = CATransform3DIdentity;
transfrom3d.m34 = -0.002;
containerView.layer.sublayerTransform = transfrom3d;
//增加陰影
CAGradientLayer *fromGradient = [CAGradientLayer layer];
fromGradient.frame = fromVC.view.bounds;
fromGradient.colors = @[(id)[UIColor blackColor].CGColor,
(id)[UIColor blackColor].CGColor];
fromGradient.startPoint = CGPointMake(0.0, 0.5);
fromGradient.endPoint = CGPointMake(0.8, 0.5);
UIView *fromShadow = [[UIView alloc]initWithFrame:fromVC.view.bounds];
fromShadow.backgroundColor = [UIColor clearColor];
[fromShadow.layer insertSublayer:fromGradient atIndex:1];
fromShadow.alpha = 0.0;
[tempView addSubview:fromShadow];
CAGradientLayer *toGradient = [CAGradientLayer layer];
toGradient.frame = fromVC.view.bounds;
toGradient.colors = @[(id)[UIColor blackColor].CGColor,
(id)[UIColor blackColor].CGColor];
toGradient.startPoint = CGPointMake(0.0, 0.5);
toGradient.endPoint = CGPointMake(0.8, 0.5);
UIView *toShadow = [[UIView alloc]initWithFrame:fromVC.view.bounds];
toShadow.backgroundColor = [UIColor clearColor];
[toShadow.layer insertSublayer:toGradient atIndex:1];
toShadow.alpha = 1.0;
[toVC.view addSubview:toShadow];
//動(dòng)畫吧
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
//翻轉(zhuǎn)截圖視圖
tempView.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 1, 0);
//給陰影效果動(dòng)畫
fromShadow.alpha = 1.0;
toShadow.alpha = 0.0;
} completion:^(BOOL finished) {
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
if ([transitionContext transitionWasCancelled]) {
//失敗后記得移除截圖应又，下次push又會(huì)創(chuàng)建
[tempView removeFromSuperview];
fromVC.view.hidden = NO;
}
}];
}}
//Pop動(dòng)畫邏輯
- (void)doPopAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *containerView = [transitionContext containerView];
//拿到push時(shí)候的的截圖視圖
UIView *tempView = containerView.subviews.lastObject;
[containerView addSubview:toVC.view];
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
//把截圖視圖翻轉(zhuǎn)回來(lái)
tempView.layer.transform = CATransform3DIdentity;
fromVC.view.subviews.lastObject.alpha = 1.0;
tempView.subviews.lastObject.alpha = 0.0;
} completion:^(BOOL finished) {
if ([transitionContext transitionWasCancelled]) {
[transitionContext completeTransition:NO];
}else{
[transitionContext completeTransition:YES];
[tempView removeFromSuperview];
toVC.view.hidden = NO;
}
}];}
2、 最后用上去在加上手勢(shì)就是這個(gè)樣子啦
翻頁(yè)效果
DEMO FOUR
1乏苦、 直接看看doPresentAnimation和doDismissAnimation的動(dòng)畫邏輯株扛，這次使用了CASharpLayer和UIBezierPath
//Present動(dòng)畫邏輯
- (void)presentAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//拿到控制器獲取button的frame來(lái)設(shè)置動(dòng)畫的開(kāi)始結(jié)束的路徑
UINavigationController *fromVC = (UINavigationController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
XWCircleSpreadController *temp = fromVC.viewControllers.lastObject;
UIView *containerView = [transitionContext containerView];
[containerView addSubview:toVC.view];
//畫兩個(gè)圓路徑
UIBezierPath *startCycle = [UIBezierPath bezierPathWithOvalInRect:temp.buttonFrame];
//通過(guò)如下方法計(jì)算獲取在x和y方向按鈕距離邊緣的最大值，然后利用勾股定理即可算出最大半徑
CGFloat x = MAX(temp.buttonFrame.origin.x, containerView.frame.size.width - temp.buttonFrame.origin.x);
CGFloat y = MAX(temp.buttonFrame.origin.y, containerView.frame.size.height - temp.buttonFrame.origin.y);
//勾股定理計(jì)算半徑
CGFloat radius = sqrtf(pow(x, 2) + pow(y, 2));
//以按鈕中心為圓心汇荐，按鈕中心到屏幕邊緣的最大距離為半徑席里，得到轉(zhuǎn)場(chǎng)后的path
UIBezierPath *endCycle = [UIBezierPath bezierPathWithArcCenter:containerView.center radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:YES];
//創(chuàng)建CAShapeLayer進(jìn)行遮蓋
CAShapeLayer *maskLayer = [CAShapeLayer layer];
//設(shè)置layer的path保證動(dòng)畫后layer不會(huì)回彈
maskLayer.path = endCycle.CGPath;
//將maskLayer作為toVC.View的遮蓋
toVC.view.layer.mask = maskLayer;
//創(chuàng)建路徑動(dòng)畫
CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
maskLayerAnimation.delegate = self;
//動(dòng)畫是加到layer上的，所以必須為CGPath拢驾，再將CGPath橋接為OC對(duì)象
maskLayerAnimation.fromValue = (__bridge id)(startCycle.CGPath);
maskLayerAnimation.toValue = (__bridge id)((endCycle.CGPath));
maskLayerAnimation.duration = [self transitionDuration:transitionContext];
maskLayerAnimation.delegate = self;
//設(shè)置淡入淡出
maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[maskLayerAnimation setValue:transitionContext forKey:@"transitionContext"];
[maskLayer addAnimation:maskLayerAnimation forKey:@"path"];
}
//Dismiss動(dòng)畫邏輯
- (void)dismissAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UINavigationController *toVC = (UINavigationController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
XWCircleSpreadController *temp = toVC.viewControllers.lastObject;
UIView *containerView = [transitionContext containerView];
//畫兩個(gè)圓路徑
CGFloat radius = sqrtf(containerView.frame.size.height * containerView.frame.size.height + containerView.frame.size.width * containerView.frame.size.width) / 2;
UIBezierPath *startCycle = [UIBezierPath bezierPathWithArcCenter:containerView.center radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:YES];
UIBezierPath *endCycle = [UIBezierPath bezierPathWithOvalInRect:temp.buttonFrame];
//創(chuàng)建CAShapeLayer進(jìn)行遮蓋
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.fillColor = [UIColor greenColor].CGColor;
maskLayer.path = endCycle.CGPath;
fromVC.view.layer.mask = maskLayer;
//創(chuàng)建路徑動(dòng)畫
CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
maskLayerAnimation.delegate = self;
maskLayerAnimation.fromValue = (__bridge id)(startCycle.CGPath);
maskLayerAnimation.toValue = (__bridge id)((endCycle.CGPath));
maskLayerAnimation.duration = [self transitionDuration:transitionContext];
maskLayerAnimation.delegate = self;
maskLayerAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[maskLayerAnimation setValue:transitionContext forKey:@"transitionContext"];
[maskLayer addAnimation:maskLayerAnimation forKey:@"path"];
}
2、最后在animationDidStop的代理方法中處理到動(dòng)畫的完成邏輯改基，處理方式都類似
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
switch (_type) {
case XWCircleSpreadTransitionTypePresent:{
id<UIViewControllerContextTransitioning> transitionContext = [anim valueForKey:@"transitionContext"];
[transitionContext completeTransition:YES];
[transitionContext viewControllerForKey:UITransitionContextToViewKey].view.layer.mask = nil;
}
break;
case XWCircleSpreadTransitionTypeDismiss:{
id<UIViewControllerContextTransitioning> transitionContext = [anim valueForKey:@"transitionContext"];
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
if ([transitionContext transitionWasCancelled]) {
[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
}
}
break;
}
}
3繁疤、 最后用上去在加上手勢(shì)就是這個(gè)樣子啦
擴(kuò)散效果
總結(jié)
1、關(guān)于：self.modalPresentationStyle = UIModalPresentationCustom;我查看了視圖層級(jí)后發(fā)現(xiàn)秕狰，如果使用了Custom稠腊，在present動(dòng)畫完成的時(shí)候，presentingView也就是demo one中的vc1的view會(huì)從containerView中移除鸣哀，只是移除架忌，并未銷毀，此時(shí)還被持有著(dismiss后還得回來(lái)呢我衬！)叹放，如果設(shè)置custom饰恕，那么present完成后，它一直都在containerView中井仰，只是在最后面埋嵌，所以需不需要設(shè)置custom可以看動(dòng)畫完成后的情況，是否還需要看見(jiàn)presentingViewController俱恶，但是記住如果沒(méi)有設(shè)置custom雹嗦，在disMiss的動(dòng)畫邏輯中，要把它加回containerView中合是，不然就不在咯~了罪！
2、感覺(jué)寫了好多東西聪全，其實(shí)只要弄懂了轉(zhuǎn)場(chǎng)的邏輯泊藕，其實(shí)就只需要寫動(dòng)畫的邏輯就行了，其他東西都是固定的荔烧，而且蘋果提供的這種控制轉(zhuǎn)場(chǎng)的方式可充分解耦吱七，除了寫的手勢(shì)過(guò)渡管理可以拿到任何地方使用，所有的動(dòng)畫過(guò)渡管理者都可以很輕松的復(fù)用到其他轉(zhuǎn)場(chǎng)中鹤竭，都不用分是何種轉(zhuǎn)場(chǎng)踊餐，demo沒(méi)有寫標(biāo)簽控制器的轉(zhuǎn)場(chǎng)，實(shí)現(xiàn)方法也是完全類似的臀稚，大家可以嘗試一下吝岭，四個(gè)demo的github地址：自定義轉(zhuǎn)場(chǎng)動(dòng)畫demo
