iOS自定義轉(zhuǎn)場(chǎng)動(dòng)畫——自定義模態(tài)跳轉(zhuǎn)之Present

Modal

modal轉(zhuǎn)場(chǎng)方式即使用 presentViewController() 方法推出的方式分唾,默認(rèn)情況下膏潮,第二個(gè)視圖從屏幕下方彈出。下面就來(lái)介紹下 modal 方式轉(zhuǎn)場(chǎng)動(dòng)畫的自定義。

present

還是先來(lái)看一下完成的效果


準(zhǔn)備

  1. 創(chuàng)建一個(gè)新的工程舰绘,刪掉Main虱而,在AppDelegate中創(chuàng)建自定義UIWindow筏餐,設(shè)置rootVC為ViewController。
  2. 在ViewController中創(chuàng)建一個(gè)全屏的ImageView牡拇,并且指定一張圖片胖烛;新建一個(gè)按鈕用于present。
  3. 新建一個(gè)SecondViewController诅迷。同樣創(chuàng)建一個(gè)全屏的ImageView佩番,指定一張和ViewController不同的圖片,新建一個(gè)同于dismiss的按鈕

開始

  1. 創(chuàng)建一個(gè)文件繼承自 NSObject罢杉,取名為PresentTransition并在.h中遵守 UIViewControllerAnimatedTransitioning協(xié)議趟畏。
  2. 實(shí)現(xiàn)協(xié)議的兩個(gè)方法,并在其中編寫 Push 的動(dòng)畫滩租。 具體的動(dòng)畫實(shí)現(xiàn)過(guò)程都在代碼的注釋里:
// 返回動(dòng)畫的時(shí)間
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext{
    return 0.8;
}
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext{
    ViewController * fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    SecondViewController * toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView * container = [transitionContext containerView];
    
    [container addSubview:toVC.view];
    [container bringSubviewToFront:fromVC.view];
    
    // 改變m34
    CATransform3D transfrom = CATransform3DIdentity;
    transfrom.m34 = -0.002;
    container.layer.sublayerTransform = transfrom;
    
    // 設(shè)置archPoint和position
    CGRect initalFrame = [transitionContext initialFrameForViewController:fromVC];
    toVC.view.frame = initalFrame;
    fromVC.view.frame = initalFrame;
    fromVC.view.layer.anchorPoint = CGPointMake(0, 0.5);
    fromVC.view.layer.position = CGPointMake(0, initalFrame.size.height / 2.0);
    
    // 添加陰影效果
    CAGradientLayer * shadowLayer = [[CAGradientLayer alloc] init];
    shadowLayer.colors =@[
                         [UIColor colorWithWhite:0 alpha:1],
                         [UIColor colorWithWhite:0 alpha:0.5],
                         [UIColor colorWithWhite:1 alpha:0.5]
                         ];
    shadowLayer.startPoint = CGPointMake(0, 0.5);
    shadowLayer.endPoint = CGPointMake(1, 0.5);
    shadowLayer.frame = initalFrame;
    
    UIView * shadow = [[UIView alloc] initWithFrame:initalFrame];
    shadow.backgroundColor = [UIColor clearColor];
    [shadow.layer addSublayer:shadowLayer];
    [fromVC.view addSubview:shadow];
    shadow.alpha = 0;
    
    // 動(dòng)畫
    [UIView animateKeyframesWithDuration:[self transitionDuration:transitionContext] delay:0 options:2 animations:^{
        fromVC.view.layer.transform = CATransform3DMakeRotation(-M_PI_2, 0, 1, 0);
        shadow.alpha = 1.0;
    } completion:^(BOOL finished) {
        fromVC.view.layer.anchorPoint = CGPointMake(0.5, 0.5);
        fromVC.view.layer.position = CGPointMake(CGRectGetMidX(initalFrame), CGRectGetMidY(initalFrame));
        fromVC.view.layer.transform = CATransform3DIdentity;
        [shadow removeFromSuperview];
        
        [transitionContext completeTransition:YES];
    }];
}

使用動(dòng)畫

  1. 讓 FirstViewController 遵守 UIViewControllerTransitioningDelegate 協(xié)議赋秀,并將 self.transitioningDelegate 設(shè)置為 self。
self.transitioningDelegate = self;
  1. 實(shí)現(xiàn) UIViewControllerTransitioningDelegate 協(xié)議的兩個(gè)方法律想,用來(lái)指定動(dòng)畫類猎莲。
// present動(dòng)畫
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source{
    return [[PresentTransition alloc] init];
}
  1. 在present按鈕的點(diǎn)擊方法中,必須把SecondViewController的transitioningDelegate也設(shè)置為self技即,讓ViewController管理SecondViewController的動(dòng)畫
-(void)presentClick{
    SecondViewController * secondVC = [[SecondViewController alloc] init];
    secondVC.transitioningDelegate = self; // 必須second同樣設(shè)置delegate才有動(dòng)畫
    [self presentViewController:secondVC animated:YES completion:^{
    }];
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末著洼,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子而叼,更是在濱河造成了極大的恐慌身笤,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件葵陵,死亡現(xiàn)場(chǎng)離奇詭異液荸,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)脱篙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門娇钱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)伤柄,“玉大人,你說(shuō)我怎么就攤上這事文搂∠煊兀” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵细疚,是天一觀的道長(zhǎng)蔗彤。 經(jīng)常有香客問(wèn)我,道長(zhǎng)疯兼,這世上最難降的妖魔是什么然遏? 我笑而不...
    開封第一講書人閱讀 58,842評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮吧彪,結(jié)果婚禮上待侵,老公的妹妹穿的比我還像新娘。我一直安慰自己姨裸,他們只是感情好秧倾,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著傀缩,像睡著了一般那先。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上赡艰,一...
    開封第一講書人閱讀 51,679評(píng)論 1 305
  • 那天售淡,我揣著相機(jī)與錄音,去河邊找鬼慷垮。 笑死揖闸,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的料身。 我是一名探鬼主播汤纸,決...
    沈念sama閱讀 40,406評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼芹血!你這毒婦竟也來(lái)了贮泞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤祟牲,失蹤者是張志新(化名)和其女友劉穎隙畜,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體说贝,經(jīng)...
    沈念sama閱讀 45,767評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年慎颗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了乡恕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片言询。...
    茶點(diǎn)故事閱讀 40,090評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖傲宜,靈堂內(nèi)的尸體忽然破棺而出运杭,到底是詐尸還是另有隱情,我是刑警寧澤函卒,帶...
    沈念sama閱讀 35,785評(píng)論 5 346
  • 正文 年R本政府宣布辆憔,位于F島的核電站,受9級(jí)特大地震影響报嵌,放射性物質(zhì)發(fā)生泄漏虱咧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評(píng)論 3 331
  • 文/蒙蒙 一锚国、第九天 我趴在偏房一處隱蔽的房頂上張望腕巡。 院中可真熱鬧,春花似錦血筑、人聲如沸绘沉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)车伞。三九已至,卻和暖如春喻喳,著一層夾襖步出監(jiān)牢的瞬間帖世,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工沸枯, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留日矫,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,298評(píng)論 3 372
  • 正文 我出身青樓绑榴,卻偏偏與公主長(zhǎng)得像哪轿,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子翔怎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容