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的參數是從左邊開始翻轉，在視覺上就有一個反方向翻回去的效果。

以上，就是該過渡動畫的全部實現過程了，其實無非就是加了兩行代碼而已，非常簡單，但是偶爾用一下，還是能帶來非常好的效果的~

這裡有我的樣本工程：https://github.com/Cloudox/ReverseDemo

以上所述是小編給大家介紹的iOS高仿微信相簿介面翻轉過渡動畫效果,實現一個類比後台資料登入的效果，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！