先來看看完成的相似後果圖:
在圖片界面點擊右下角的檢查評論會翻轉到評論界面,評論界面點擊左上角的前往按鈕會反偏向翻轉回圖片界面,真實的完成辦法,與傳統的導航欄過渡其實只要一行代碼的差別,讓我們來看看全體的完成。
起首我們完成圖片界面,這個界面上有黑色的配景,一張圖片和一個檢查評論的按鈕:
- (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完成微信同伙圈相冊評論界面的翻轉過渡動畫】的相關資料介紹到這裡,希望對您有所幫助! 提示:不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦!