你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> IOS完成微信同伙圈相冊評論界面的翻轉過渡動畫

IOS完成微信同伙圈相冊評論界面的翻轉過渡動畫

編輯:IOS開發綜合

先來看看完成的相似後果圖:

在圖片界面點擊右下角的檢查評論會翻轉到評論界面,評論界面點擊左上角的前往按鈕會反偏向翻轉回圖片界面,真實的完成辦法,與傳統的導航欄過渡其實只要一行代碼的差別,讓我們來看看全體的完成。

起首我們完成圖片界面,這個界面上有黑色的配景,一張圖片和一個檢查評論的按鈕:

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

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

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

到這裡其實都沒甚麼特殊的,如今來看看檢查評論文字的點擊呼應,也就是跳轉的完成:

// 檢查評論
- (void)viewComment {
  CommentViewController *commentVC = [[CommentViewController alloc] init];
  [self.navigationController pushViewController:commentVC animated:NO];
  // 設置翻頁動畫為從左邊翻下去
  [UIView transitionWithView:self.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromRight animations:nil completion:nil];
}

可以看到,就是比通俗的push多了一行代碼罷了,本來的push部門我們的animated參數要設為NO,然後再行設置翻轉的動畫便可,這裡options的參數可以看出,動畫是從左邊開端翻轉的,duration表現動畫時光,很簡略地就完成了翻轉到評論界面。

我們再看看評論界面的代碼,界面元素上有一個前往按鈕,一個圖片,一行文字,然則這個前往按鈕的特別在於,我們從新界說了導航欄的前往按鈕,假如甚麼都不做,導航欄其實會自帶一個帶箭頭的前往按鈕,點擊後就是正常的滑動回上一個界面,這裡我們要用我們本身的按鈕來代替它:

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

  // 自界說導航欄按鈕
  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個贊,100條評論";
  label.textAlignment = NSTextAlignmentCenter;
  [self.view addSubview:label];
}

可以看到,我們自界說了一個UIBarButtonItem按鈕,然後用它放在導航欄的leftBarButtonItem的地位,如許就代替了本來的前往按鈕了,然後在按鈕點擊呼應中去設置翻遷移轉變畫:

// 前往上一頁
- (void)back {
  // 設置翻遷移轉變畫為從右邊翻下去
  [UIView transitionWithView:self.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromLeft animations:nil completion:nil];
  [self.navigationController popViewControllerAnimated:NO];
}

照樣一樣的,不外此次要先設置動畫,再停止pop,不然沒有用果,並且pop的動畫參數也要設為NO,可以看到此次的options的參數是從右邊開端翻轉,在視覺上就有一個反偏向翻歸去的後果。

總結

以上,就是該過渡動畫的全體完成進程了,其實不過就是加了兩行代碼罷了,異常簡略,然則偶然用一下,照樣能帶來異常好的後果的~願望這篇文章的內容對年夜家的進修和任務能帶來一些贊助,假如有疑問可以留言交換。

【IOS完成微信同伙圈相冊評論界面的翻轉過渡動畫】的相關資料介紹到這裡,希望對您有所幫助! 提示:不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦!

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved