快捷導(dǎo)航

IOS輕松幾步實(shí)現(xiàn)自定義轉(zhuǎn)場(chǎng)動(dòng)畫

更新時(shí)間：2016年09月06日 15:59:49 投稿：daisy

這篇文章將講述幾個(gè)步驟實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫的自定義方式，并且給出了示例代碼，畢竟代碼才是我們的語言，這樣比較容易上手。下面來一起看看吧。

一、系統(tǒng)提供的轉(zhuǎn)場(chǎng)動(dòng)畫

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

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

二、自定義轉(zhuǎn)場(chǎng)動(dòng)畫使用場(chǎng)景

系統(tǒng)給我們提供的轉(zhuǎn)場(chǎng)動(dòng)畫效果較少,并且有時(shí)想對(duì)系統(tǒng)的效果做一些修改.例如:我們使用淡入淡出的modal效果,系統(tǒng)的動(dòng)畫時(shí)間我們不滿意,希望讓動(dòng)畫快點(diǎn),或者慢點(diǎn).系統(tǒng)并沒有給我提供直接修改的屬性或者方法,那么,這時(shí)我們不得不考慮使用自定義轉(zhuǎn)場(chǎng)動(dòng)畫來實(shí)現(xiàn)我們想要的效果.

三、自定義轉(zhuǎn)場(chǎng)動(dòng)畫的實(shí)現(xiàn)步驟

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

 detailVc.modalPresentationStyle = UIModalPresentationCustom;

第2步:設(shè)置轉(zhuǎn)場(chǎng)代理

detailVc.transitioningDelegate = self

可以抽一個(gè)工具類,專門負(fù)責(zé)轉(zhuǎn)場(chǎng)動(dòng)畫

第3步:遵守UIViewControllerTransitioningDelegate代理實(shí)現(xiàn)兩個(gè)方法

確定誰負(fù)責(zé)彈出動(dòng)畫

-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
 self.isPresnted = YES;
 return self;
}

確定誰負(fù)責(zé)動(dòng)畫消失

- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
 self.isPresnted = NO;
 return self;
}

第4步:實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫

上面都返回self,說明當(dāng)前控制器即負(fù)責(zé)彈出動(dòng)畫又負(fù)責(zé)動(dòng)畫消失,所以具體的轉(zhuǎn)場(chǎng)動(dòng)畫在當(dāng)前控制器中進(jìn)行.

先確定轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)間間隔

- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
 return 1.0;
}

再實(shí)現(xiàn)具體動(dòng)畫(由于當(dāng)前控制器即負(fù)責(zé)彈出動(dòng)畫,又負(fù)責(zé)消失動(dòng)畫,所以定義一個(gè)Bool類型屬性isPresnted加以區(qū)分)

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {

 if (self.isPresnted == YES) {
  //這里做彈出動(dòng)畫

 } else {

 //這里做消失動(dòng)畫
 }
}

小結(jié):

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

下面來具體實(shí)現(xiàn)一個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫效果吧

由于實(shí)現(xiàn)動(dòng)畫的核心代碼在第四步,這里也就只看animateTransition:這一個(gè)方法啦!

從上往下的Modal效果

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {

 if (self.isPresnted == YES) {
  //1.取出view
  UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:presentedView];
  //3.設(shè)置基本屬性
  presentedView.frame = CGRectMake(0, -667, 375, 667);
  //4.動(dòng)畫
  [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.動(dòng)畫
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   dismissedView.frame =CGRectMake(0, -667, 375, 667);
  }completion:^(BOOL finished) {

   [transitionContext completeTransition:YES];
  }];

 }
}

模仿系統(tǒng)淡入淡出效果

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {

 if (self.isPresnted == YES) {
  //1.取出view
  UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:presentedView];
  //3.設(shè)置基本屬性
  presentedView.alpha = 0;
  //4.動(dòng)畫
  [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.設(shè)置基本屬性
  dismissedView.alpha = 1;
  //4.動(dòng)畫
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   dismissedView.alpha = 0;
  }completion:^(BOOL finished) {

   [transitionContext completeTransition:YES];
  }];
 }
}

動(dòng)畫的時(shí)間可以從ransitionDuration:方法獲取

通過UITransitionContextToViewKey和UITransitionContextFromViewKey兩個(gè)Key分別獲取彈出和消失動(dòng)畫的View(注意別混淆兩個(gè)Key)

要將做動(dòng)畫的View加入到專門用于動(dòng)畫的containerView中

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，這里只介紹怎樣實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫，至于其他好玩NB的效果，大家可以自己試著實(shí)現(xiàn)，小編以后也會(huì)分享其他更好的效果，希望這篇文章對(duì)大家能有一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: