iOS高仿微信相冊(cè)界面翻轉(zhuǎn)過渡動(dòng)畫效果
點(diǎn)開微信相冊(cè)的時(shí)候,想要在相冊(cè)圖片界面跳轉(zhuǎn)查看點(diǎn)贊和評(píng)論時(shí),微信會(huì)采用界面翻轉(zhuǎn)的過渡動(dòng)畫來跳轉(zhuǎn)到評(píng)論界面,好像是在圖片界面的背面一樣,點(diǎn)擊完成又會(huì)翻轉(zhuǎn)回到圖片界面,這不同于一般的導(dǎo)航界面滑動(dòng)動(dòng)畫,覺得很有意思,于是自己學(xué)著做了一下,其實(shí)也很簡(jiǎn)單,下面是實(shí)現(xiàn)的類似的效果圖:
在圖片界面點(diǎn)擊右下角的查看評(píng)論會(huì)翻轉(zhuǎn)到評(píng)論界面,評(píng)論界面點(diǎn)擊左上角的返回按鈕會(huì)反方向翻轉(zhuǎn)回圖片界面,真正的實(shí)現(xiàn)方法,與傳統(tǒng)的導(dǎo)航欄過渡其實(shí)只有一行代碼的區(qū)別,讓我們來看看整體的實(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í)都沒什么特別的,現(xiàn)在來看看查看評(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)畫為從右邊翻上來 [UIView transitionWithView:self.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromRight animations:nil completion:nil]; }
可以看到,就是比普通的push多了一行代碼而已,原本的push部分我們的animated參數(shù)要設(shè)為NO,然后再行設(shè)置翻轉(zhuǎn)的動(dòng)畫即可,這里options的參數(shù)可以看出,動(dòng)畫是從右邊開始翻轉(zhuǎn)的,duration表示動(dòng)畫時(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è)界面,這里我們要用我們自己的按鈕來取代它:
- (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)畫:
// 返回上一頁(yè) - (void)back { // 設(shè)置翻轉(zhuǎn)動(dòng)畫為從左邊翻上來 [UIView transitionWithView:self.navigationController.view duration:1 options:UIViewAnimationOptionTransitionFlipFromLeft animations:nil completion:nil]; [self.navigationController popViewControllerAnimated:NO]; }
還是一樣的,不過這次要先設(shè)置動(dòng)畫,再進(jìn)行pop,否則沒有效果,而且pop的動(dòng)畫參數(shù)也要設(shè)為NO,可以看到這次的options的參數(shù)是從左邊開始翻轉(zhuǎn),在視覺上就有一個(gè)反方向翻回去的效果。
以上,就是該過渡動(dòng)畫的全部實(shí)現(xiàn)過程了,其實(shí)無非就是加了兩行代碼而已,非常簡(jiǎn)單,但是偶爾用一下,還是能帶來非常好的效果的~
這里有我的示例工程:https://github.com/Cloudox/ReverseDemo
以上所述是小編給大家介紹的iOS高仿微信相冊(cè)界面翻轉(zhuǎn)過渡動(dòng)畫效果,實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 總結(jié)IOS界面間跳轉(zhuǎn)的幾種方法
- iOS圖片界面翻頁(yè)切換效果
- iOS仿微信圖片分享界面實(shí)現(xiàn)代碼
- IOS 聊天界面(自適應(yīng)文字)的實(shí)現(xiàn)
- iOS中使用UItableviewcell實(shí)現(xiàn)團(tuán)購(gòu)和微博界面的示例
- iOS實(shí)現(xiàn)電商購(gòu)物車界面示例
- IOS實(shí)現(xiàn)微信朋友圈相冊(cè)評(píng)論界面的翻轉(zhuǎn)過渡動(dòng)畫
- Unity iOS混合開發(fā)界面切換思路解析
- iOS開發(fā)之級(jí)聯(lián)界面(推薦界面)搭建原理
- iOS制作帶彈跳動(dòng)畫發(fā)布界面
相關(guān)文章
設(shè)計(jì)模式中的迭代器模式在Cocoa Touch框架中的使用
這篇文章主要介紹了設(shè)計(jì)模式中的迭代器模式在Cocoa Touch框架中的使用,示例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03使用設(shè)計(jì)模式中的Singleton單例模式來開發(fā)iOS應(yīng)用程序
這篇文章主要介紹了使用設(shè)計(jì)模式中的Singleton單例模式來開發(fā)iOS應(yīng)用程序的例子,示例代碼為傳統(tǒng)的Objective-C語(yǔ)言,需要的朋友可以參考下2016-03-03iOS開發(fā)之UIKeyboardTypeNumberPad數(shù)字鍵盤自定義按鍵
這篇文章主要介紹了iOS開發(fā)之UIKeyboardTypeNumberPad數(shù)字鍵盤自定義按鍵 的相關(guān)資料,需要的朋友可以參考下2016-08-08iOS獲取設(shè)備唯一標(biāo)識(shí)的實(shí)現(xiàn)步驟
這篇文章主要介紹了iOS獲取設(shè)備唯一標(biāo)識(shí)的實(shí)現(xiàn)步驟,幫助大家更好的理解和學(xué)習(xí)ios開發(fā),感興趣的朋友可以了解下2021-04-04iOS UIScrollView滾動(dòng)視圖/無限循環(huán)滾動(dòng)/自動(dòng)滾動(dòng)的實(shí)例代碼
這篇文章主要介紹了iOS UIScrollView滾動(dòng)視圖/無限循環(huán)滾動(dòng)/自動(dòng)滾動(dòng),需要的朋友可以參考下2017-02-02iOS開發(fā)中UIImageView控件的常用操作整理
這篇文章主要介紹了iOS開發(fā)中UIImageView控件的常用操作整理,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-01-01