iOS頁面翻轉
-
前言
專案中遇到一個頁面翻轉的需求,完成之後寫出來希望能幫助到需要的人。 - 說說思路
- 首先我們需要翻轉的是整個window,而不是某個控制器。因為,如果只翻轉控制器。那麼你下一層的控制器在你翻轉的時候回顯示出來。
- 翻轉多少呢?180度。然後你就錯了。當翻轉到180 度的時候你會發現vc中的所有空間都反了。。所以要轉個圈,也就是360度。
- 然後翻轉的時候在什麼時候載入下個vc 呢?我這邊是在第一個控制器翻轉到90度的時候,初始化。然後設定alpha。
- 最後翻轉到90度之後,顯示下一個控制器。
廢話不多說直接上程式碼,比較簡單。
// 來吧旋轉動畫
__weak typeof(self) weakSelf = self;
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
weakSelf.view.layer.transform = CATransform3DMakeRotation(M_PI/2.0, 0, 1, 0); // 當前view,這句程式碼可以不要。這是我的需求
UIWindow *window = [UIApplication sharedApplication].keyWindow;
window.layer.transform = CATransform3DMakeRotation(M_PI/2.0, 0, 1, 0);
} completion:^(BOOL finished) {
NewInfoViewController *newVC =[NewInfoViewController new];
[weakSelf presentViewController:newVC animated:NO completion:nil];
}];
在第二個介面中
- (void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
[UIView animateWithDuration:0 animations:^{
self.view.layer.transform = CATransform3DMakeRotation(3*M_PI/2, 0, 1, 0);// 先將頁面翻轉270度。此時是你看不見這個控制器的,設定了alpha
} completion:^(BOOL finished) {
self.view.alpha = 1;
[UIView animateWithDuration:0.5 animations:^{
// 先將window 翻轉270.
UIWindow *window = [UIApplication sharedApplication].keyWindow;
window.layer.transform = CATransform3DRotate(window.layer.transform,M_PI*3/2.0, 0, 1, 0);
self.view.layer.transform = CATransform3DRotate(self.view.layer.transform, M_PI/2, 0, 1, 0);
} completion:^(BOOL finished) {
}];
}];
}
}
OK, 就這樣搞定了需求。不要的有沒有小夥伴還有更好的解決辦法。希望小夥伴給點建議。
這裡主要用到了 CATransform3DRotate 和 CATransform3DMakeRotation這2個方法。對x.y.z軸的翻轉。
希望能幫助到需要的人。。
---來自濤胖子的工作筆記
相關文章
- ios跳轉到通用頁面iOS
- [分享]iOS開發-頁面間跳轉iOS
- iOS——使用StroryBoard頁面跳轉及傳值iOS
- js頁面跳轉的問題(跳轉到父頁面、最外層頁面、本頁面)JS
- iOS多重巢狀頁面iOS巢狀
- iOS 頁面效能優化iOS優化
- Flutter頁面跳轉到IOS原生介面 如何實現?FlutteriOS
- vue頁面跳轉Vue
- Flutter頁面跳轉Flutter
- javascript 跳轉頁面JavaScript
- js頁面跳轉JS
- 從頁面底部回到頂部+動畫效果 & 翻頁後從按鈕處回到頁面頂部動畫
- react跳轉url,跳轉外鏈,新頁面開啟頁面React
- js跳轉頁面方法(轉)JS
- Flutter頁面保活及保持頁面跳轉位置Flutter
- iOS如何提高頁面流暢度iOS
- iOS 預載入 Web 頁面方案iOSWeb
- iOS 頁面起始座標的變化iOS
- nginx 設定 404 500 頁面跳轉到指定頁面Nginx
- Asp.Net中動態頁面轉靜態頁面ASP.NET
- Flutter:如何跳轉頁面?Flutter
- JavaScript 頁面跳轉效果JavaScript
- iOS進階之頁面效能優化iOS優化
- Xamarin iOS教程之頁面控制元件iOS控制元件
- [禁止chrome頁面翻譯程式碼塊]chrome外掛Chrome
- 使用electron進行子頁面全文翻譯--【Foam番茄】
- iOS專案開發實戰——使用程式碼實現頁面跳轉iOS
- html頁面轉PDF的功能HTML
- JavaScript頁面跳轉程式碼JavaScript
- 設定頁面認證(轉)
- 將經典頁面轉換成現代客戶端頁面客戶端
- 用資料島生成翻頁程式 (轉)
- iOS效能優化之頁面載入速率iOS優化
- iOS UITableView資料為空時提示頁面iOSUIView
- 解決頁面在ios機器上卡頓iOS
- iOS開發之微信聊天頁面實現iOS
- iOS實現超酷頁面切換動畫特效iOS動畫特效
- 微信小程式攜帶引數跳轉頁面/獲取頁面棧微信小程式