快捷導(dǎo)航

IOS實(shí)現(xiàn)微信朋友圈相冊(cè)評(píng)論界面的翻轉(zhuǎn)過(guò)渡動(dòng)畫(huà)

更新時(shí)間：2016年08月29日 10:58:26 投稿：daisy

現(xiàn)在很多人幾乎每天都離不開(kāi)微信，大家有沒(méi)有發(fā)現(xiàn)在點(diǎn)開(kāi)微信相冊(cè)的時(shí)候，想要在相冊(cè)圖片界面跳轉(zhuǎn)查看點(diǎn)贊和評(píng)論時(shí)，微信會(huì)采用界面翻轉(zhuǎn)的過(guò)渡動(dòng)畫(huà)來(lái)跳轉(zhuǎn)到評(píng)論界面，點(diǎn)擊完成又會(huì)翻轉(zhuǎn)回到圖片界面，這不同于一般的導(dǎo)航界面滑動(dòng)動(dòng)畫(huà)，于是學(xué)著做了一下，有需要一起看看。

先來(lái)看看實(shí)現(xiàn)的類(lèi)似效果圖：

在圖片界面點(diǎn)擊右下角的查看評(píng)論會(huì)翻轉(zhuǎn)到評(píng)論界面，評(píng)論界面點(diǎn)擊左上角的返回按鈕會(huì)反方向翻轉(zhuǎn)回圖片界面，真正的實(shí)現(xiàn)方法，與傳統(tǒng)的導(dǎo)航欄過(guò)渡其實(shí)只有一行代碼的區(qū)別，讓我們來(lái)看看整體的實(shí)現(xiàn)。

首先我們實(shí)現(xiàn)圖片界面，這個(gè)界面上有黑色的背景，一張圖片和一個(gè)查看評(píng)論的按鈕：

- (void)viewDidLoad {
  [super viewDidLoad];
  self.view.backgroundColor = [UIColor blackColor];// 背景設(shè)為黑色

  // 圖片
  UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, (SCREENHEIGHT - SCREENWIDTH + 100) / 2, SCREENWIDTH, SCREENWIDTH - 100)];
  myImage.image = [UIImage imageNamed:@"image.jpg"];
  [self.view addSubview:myImage];

  // 右下角查看評(píng)論的按鈕
  UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(SCREENWIDTH - 100, SCREENHEIGHT - 50, 80, 30)];
  label.text = @"查看評(píng)論";
  label.textColor = [UIColor whiteColor];
  label.userInteractionEnabled = YES;
  UITapGestureRecognizer *labelTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewComment)];
  [label addGestureRecognizer:labelTap];
  [self.view addSubview:label];
}

到這里其實(shí)都沒(méi)什么特別的，現(xiàn)在來(lái)看看查看評(píng)論文字的點(diǎn)擊響應(yīng)，也就是跳轉(zhuǎn)的實(shí)現(xiàn)：

// 查看評(píng)論
- (void)viewComment {
  CommentViewController *commentVC = [[CommentViewController alloc] init];
  [self.navigationController pushViewController:commentVC animated:NO];
  // 設(shè)置翻頁(yè)動(dòng)畫(huà)為從右邊翻上來(lái)
  [UIView transitionWithView:self.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromRight animations:nil completion:nil];
}

可以看到，就是比普通的push多了一行代碼而已，原本的push部分我們的animated參數(shù)要設(shè)為NO，然后再行設(shè)置翻轉(zhuǎn)的動(dòng)畫(huà)即可，這里options的參數(shù)可以看出，動(dòng)畫(huà)是從右邊開(kāi)始翻轉(zhuǎn)的，duration表示動(dòng)畫(huà)時(shí)間，很簡(jiǎn)單地就實(shí)現(xiàn)了翻轉(zhuǎn)到評(píng)論界面。

我們?cè)倏纯丛u(píng)論界面的代碼，界面元素上有一個(gè)返回按鈕，一個(gè)圖片，一行文字，但是這個(gè)返回按鈕的特殊在于，我們重新定義了導(dǎo)航欄的返回按鈕，如果什么都不做，導(dǎo)航欄其實(shí)會(huì)自帶一個(gè)帶箭頭的返回按鈕，點(diǎn)擊后就是正常的滑動(dòng)回上一個(gè)界面，這里我們要用我們自己的按鈕來(lái)取代它：

- (void)viewDidLoad {
  [super viewDidLoad];
  self.view.backgroundColor = [UIColor whiteColor];// 背景色設(shè)為白色

  // 自定義導(dǎo)航欄按鈕
  UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"返回" style:UIBarButtonItemStyleBordered target:self action:@selector(back)];
  self.navigationItem.leftBarButtonItem = backButton;

  // 圖片
  UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake((SCREENWIDTH - 300)/2, (SCREENHEIGHT - 200)/2 - 100, 300, 200)];
  myImage.image = [UIImage imageNamed:@"image.jpg"];
  [self.view addSubview:myImage];

  // 一條文本
  UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake((SCREENWIDTH - 200)/2, myImage.frame.origin.y + myImage.frame.size.height + 20, 200, 30)];
  label.text = @"100個(gè)贊，100條評(píng)論";
  label.textAlignment = NSTextAlignmentCenter;
  [self.view addSubview:label];
}

可以看到，我們自定義了一個(gè)UIBarButtonItem按鈕，然后用它放在導(dǎo)航欄的leftBarButtonItem的位置，這樣就取代了原本的返回按鈕了，然后在按鈕點(diǎn)擊響應(yīng)中去設(shè)置翻轉(zhuǎn)動(dòng)畫(huà)：

// 返回上一頁(yè)
- (void)back {
  // 設(shè)置翻轉(zhuǎn)動(dòng)畫(huà)為從左邊翻上來(lái)
  [UIView transitionWithView:self.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromLeft animations:nil completion:nil];
  [self.navigationController popViewControllerAnimated:NO];
}

還是一樣的，不過(guò)這次要先設(shè)置動(dòng)畫(huà)，再進(jìn)行pop，否則沒(méi)有效果，而且pop的動(dòng)畫(huà)參數(shù)也要設(shè)為NO，可以看到這次的options的參數(shù)是從左邊開(kāi)始翻轉(zhuǎn)，在視覺(jué)上就有一個(gè)反方向翻回去的效果。

總結(jié)

以上，就是該過(guò)渡動(dòng)畫(huà)的全部實(shí)現(xiàn)過(guò)程了，其實(shí)無(wú)非就是加了兩行代碼而已，非常簡(jiǎn)單，但是偶爾用一下，還是能帶來(lái)非常好的效果的~希望這篇文章的內(nèi)容對(duì)大家的學(xué)習(xí)和工作能帶來(lái)一些幫助，如果有疑問(wèn)可以留言交流。

您可能感興趣的文章: