iOS-4步搞定自定義轉場動畫

1.系統提供的轉場動畫

目前,系統給我們提供了push/pops和present/dismiss兩種控制器之間跳轉方.當然,通過設置UIModalTransitionStyle屬性,可以實現下面4種modal效果,相信大家都比較熟悉了,這里就不再展示效果圖.

 UIModalTransitionStyleCoverVertical         // 從下往上,
 UIModalTransitionStyleFlipHorizontal        // 水平翻轉
 UIModalTransitionStyleCrossDissolve         // 淡入淡出
 UIModalTransitionStylePartialCurl           // 卷角翻頁

2.自定義轉場動畫使用場景

系統給我們提供的轉場動畫效果較少,并且有時想對系統的效果做一些修改.例如:我們使用淡入淡出的modal效果,系統的動畫時間我們不滿意,希望讓動畫快點,或者慢點.系統并沒有給我提供直接修改的屬性或者方法,那么,這時我們不得不考慮使用自定義轉場動畫來實現我們想要的效果.


3.自定義轉場動畫的實現步驟

第1步:設置需要彈出控制器的modalPresentationStyle為UIModalPresentationCustom

  detailVc.modalPresentationStyle = UIModalPresentationCustom;

第2步:設置轉場代理

detailVc.transitioningDelegate = self
  • 可以抽一個工具類,專門負責轉場動畫

第3步:遵守UIViewControllerTransitioningDelegate代理實現兩個方法

  • 確定誰負責彈出動畫

-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
    self.isPresnted = YES;
    return self;
}
  • 確定誰負責動畫消失
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
    self.isPresnted = NO;
    return self;
}

第4步:實現轉場動畫

上面都返回self,說明當前控制器即負責彈出動畫又負責動畫消失,所以具體的轉場動畫在當前控制器中進行.

  • 先確定轉場動畫時間間隔
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
    return 1.0;
}
  • 再實現具體動畫(由于當前控制器即負責彈出動畫,又負責消失動畫,所以定義一個Bool類型屬性isPresnted加以區(qū)分)
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
    
    if (self.isPresnted == YES) {
       //這里做彈出動畫
        
    } else {
     
   //這里做消失動畫
    }
}

小結:

也可以讓不同的控制器分別負責彈出和消失動畫,這樣就不需要定義一個專門用于區(qū)分的屬性.個人建議最好是抽取一個專門負責轉場動畫的工具類,讓該工具類負責所有轉場動畫,這樣,不管是從業(yè)務邏輯上還是代碼的復用性上都更加好.當然,這樣做存在的一個弊端就是,轉場動畫中需要用到的一些屬性必須通過定義變量,代理和Block等方式傳遞進來,而使用不同的控制器來管理彈出和消失動畫在獲取屬性上更加方便.具體怎樣做,也就仁者見仁,智者見智了.


下面來具體實現一個轉場動畫效果吧

** 由于實現動畫的核心代碼在第四步,這里也就只看animateTransition:這一個方法啦!**

  • 從上往下的Modal效果
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
    
    if (self.isPresnted == YES) {
        //1.取出view
        UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
        //2.放入containerView
        [[transitionContext containerView]addSubview:presentedView];
        //3.設置基本屬性
        presentedView.frame = CGRectMake(0, -667, 375, 667);
        //4.動畫
        [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
          presentedView.frame = CGRectMake(0, 0, 375, 667);
        }completion:^(BOOL finished) {
            [transitionContext completeTransition:YES];
        }];
        
    } else {
        //1.取出view
        UIView *dismissedView = [transitionContext viewForKey:UITransitionContextFromViewKey];
        //2.放入containerView
        [[transitionContext containerView]addSubview:dismissedView];
 
        //3.動畫
        [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
            dismissedView.frame =CGRectMake(0, -667, 375, 667);
        }completion:^(BOOL finished) {
            
            [transitionContext completeTransition:YES];
        }];
        
    }
}
modal1.gif
  • 模仿系統淡入淡出效果
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
    
    if (self.isPresnted == YES) {
        //1.取出view
        UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
        //2.放入containerView
        [[transitionContext containerView]addSubview:presentedView];
        //3.設置基本屬性
        presentedView.alpha = 0;
        //4.動畫
        [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
            presentedView.alpha = 1.0;
        }completion:^(BOOL finished) {
            [transitionContext completeTransition:YES];
            
        }];
        
    } else {
        //1.取出view
        UIView *dismissedView = [transitionContext viewForKey:UITransitionContextFromViewKey];
        //2.放入containerView
        [[transitionContext containerView]addSubview:dismissedView];
        //3.設置基本屬性
        dismissedView.alpha = 1;
        //4.動畫
        [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
            dismissedView.alpha = 0;
        }completion:^(BOOL finished) {
            
            [transitionContext completeTransition:YES];
        }];
    }
}

淡入淡出.gif

小結:

  • 動畫的時間可以從ransitionDuration:方法獲取
  • 通過UITransitionContextToViewKey和UITransitionContextFromViewKey兩個Key分別獲取彈出和消失動畫的View(注意別混淆兩個Key)
  • 要將做動畫的View加入到專門用于動畫的containerView中
    這里只介紹怎樣實現轉場動畫,至于其他好玩NB的效果,大家可以自己試著實現,后面我也會抽時間研究其他效果
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市桐智,隨后出現的幾起案子,更是在濱河造成了極大的恐慌啊片,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件玖像,死亡現場離奇詭異紫谷,居然都是意外死亡,警方通過查閱死者的電腦和手機捐寥,發(fā)現死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門笤昨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人握恳,你說我怎么就攤上這事瞒窒。” “怎么了乡洼?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵根竿,是天一觀的道長。 經常有香客問我就珠,道長,這世上最難降的妖魔是什么醒颖? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任妻怎,我火速辦了婚禮,結果婚禮上泞歉,老公的妹妹穿的比我還像新娘逼侦。我一直安慰自己匿辩,他們只是感情好,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布榛丢。 她就那樣靜靜地躺著铲球,像睡著了一般。 火紅的嫁衣襯著肌膚如雪晰赞。 梳的紋絲不亂的頭發(fā)上稼病,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機與錄音掖鱼,去河邊找鬼然走。 笑死,一個胖子當著我的面吹牛戏挡,可吹牛的內容都是我干的芍瑞。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼褐墅,長吁一口氣:“原來是場噩夢啊……” “哼拆檬!你這毒婦竟也來了?” 一聲冷哼從身側響起妥凳,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤竟贯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后猾封,有當地人在樹林里發(fā)現了一具尸體澄耍,經...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年晌缘,在試婚紗的時候發(fā)現自己被綠了齐莲。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡磷箕,死狀恐怖选酗,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情岳枷,我是刑警寧澤芒填,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站空繁,受9級特大地震影響殿衰,放射性物質發(fā)生泄漏。R本人自食惡果不足惜盛泡,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一闷祥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧傲诵,春花似錦凯砍、人聲如沸箱硕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽剧罩。三九已至,卻和暖如春座泳,著一層夾襖步出監(jiān)牢的瞬間惠昔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工钳榨, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留舰罚,地道東北人。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓薛耻,卻偏偏與公主長得像营罢,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子饼齿,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內容