IOS實現(xiàn)微信朋友圈相冊評論界面的翻轉過渡動畫
先來看看實現(xiàn)的類似效果圖：
在圖片界面點擊右下角的查看評論會翻轉到評論界面，評論界面點擊左上角的返回按鈕會反方向翻轉回圖片界面，真正的實現(xiàn)方法，與傳統(tǒng)的導航欄過渡其實只有一行代碼的區(qū)別，讓我們來看看整體的實現(xiàn)。
首先我們實現(xiàn)圖片界面，這個界面上有黑色的背景，一張圖片和一個查看評論的按鈕：
- (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];
}
到這里其實都沒什么特別的，現(xiàn)在來看看查看評論文字的點擊響應，也就是跳轉的實現(xiàn)：
// 查看評論
- (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參數(shù)要設為NO，然后再行設置翻轉的動畫即可，這里options的參數(shù)可以看出，動畫是從右邊開始翻轉的，duration表示動畫時間，很簡單地就實現(xiàn)了翻轉到評論界面。
我們再看看評論界面的代碼，界面元素上有一個返回按鈕，一個圖片，一行文字，但是這個返回按鈕的特殊在于，我們重新定義了導航欄的返回按鈕，如果什么都不做，導航欄其實會自帶一個帶箭頭的返回按鈕，點擊后就是正常的滑動回上一個界面，這里我們要用我們自己的按鈕來取代它：
- (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的動畫參數(shù)也要設為NO，可以看到這次的options的參數(shù)是從左邊開始翻轉，在視覺上就有一個反方向翻回去的效果。
總結
以上，就是該過渡動畫的全部實現(xiàn)過程了，其實無非就是加了兩行代碼而已，非常簡單，但是偶爾用一下，還是能帶來非常好的效果的~希望這篇文章的內容對大家的學習和工作能帶來一些幫助，如果有疑問可以留言交流。
相關文章
iOS開發(fā)使用GDataXML框架解析網絡數(shù)據(jù)
GDataXML是Google開發(fā)的一個XML解析庫，輕便，特點使用非常簡單，支持XPath。今天把前兩天弄的IOS XML解析記錄下來，也供大家參考。2016-02-02
這篇文章主要介紹了ios 使用xcode11 新建項目工程 （值得注意的問題）,本文分步驟通過圖文的形式給大家展示，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要為大家介紹了移動web開發(fā)技能之touch事件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了iOS?RN啟動中?Native?Module?是如何被管理的，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
使用objc runtime實現(xiàn)iOS閉環(huán)的懶加載功能
利用objc runtime的動態(tài)性實現(xiàn)懶加載可以實現(xiàn)即可增加又可刪除功能，也可以避免污染類型。這篇文章主要介紹了使用objc runtime實現(xiàn)iOS閉環(huán)的懶加載功能,需要的朋友可以參考下2019-06-06
本文通過實例代碼向大家演示在IOS中如何實現(xiàn)展開二級列表的效果，這個功能效果很好，對于日常開發(fā)APP中很有幫助，下面一起來看看如何實現(xiàn)吧。2016-08-08
IOS 陀螺儀開發(fā)(CoreMotion框架)實例詳解
這篇文章主要介紹了IOS 陀螺儀開發(fā)實例詳解的相關資料,介紹了螺旋儀參數(shù)意義及CoreMotion框架，需要的朋友可以參考下2016-10-10
iOS獲取當前網絡環(huán)境的實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猧OS獲取當前網絡環(huán)境的實現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細介紹了iOS開發(fā)之適配iOS10以及Xcode8的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
IOS開發(fā)仿微信消息長按氣泡菜單實現(xiàn)效果
這篇文章主要介紹了IOS開發(fā)仿微信消息長按氣泡菜單實現(xiàn)效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07