有錢人捧個錢場,沒錢捧個人場,看一看。
在寫這個demo以前覺得轉場動畫就像女神,離我很遠,日常項目根本接觸不到。畢竟系統(tǒng)自帶的就好用,身體輕,容易推倒。但是好的動畫效果就像電影彩蛋,不經意間給用戶一個驚喜,這對App拉新傳播很有幫助。而且程序員寫完之后,不僅可以在測試女神面前展示自己的操作,還可以讓老板在投資人面前炫耀自己的團隊質量,吸引更多的資金,從而在彎道超車,讓自己升職加薪,達到人生
中國有很多公司在互動方面做得很好,比如騰訊和字節(jié)跳動。demo主要是寫AppStore所以我研究了跳轉和抖音評論【AppStore】、【抖音】、【QQ這三種產品:音樂。
接下來,我簡潔全面,就樣demo在實現(xiàn)過程中,產品相互比較,對比問題進行描述。
轉場動畫主要由轉場動畫、跳轉協(xié)議、手勢交互三部分組成。
轉場動畫是對動畫效果的代碼描述,并遵守UIViewControllerAni ** tedTransitioning協(xié)議。
跳轉協(xié)議在push,press等協(xié)議的相關方法里,返回動畫對象。
手勢交互是用手勢來控制動畫的進度,通常是建立的UIPercentDrivenInteractiveTransition的子類。
這里我就不描述轉場動畫的基本概念了,網上有很多相關資料。
AppStore主頁的動畫主頁分為這些部分。
長按,視圖縮小,松開后,視圖擴展到下一個界面,具有輕微的彈簧效果。
點擊,縮小視圖,松開后,將視圖擴展到下一個界面,并具有輕微的彈簧效果。
長按后滑動,先縮小視圖,再恢復原狀。
這里直接用我UIButton處理這些手勢,touchesBegan處理視圖縮小,touchesEnded點擊回調處理。所以這里加了一個。bool屬性endTouchesBegan用于判斷視圖是否已縮小。如果縮小,直接回調,如果沒有,則先進行縮小載回調。
AppStore動畫第一界面statusBar為顯示,第二個界面隱藏,第三個界面恢復顯示。我們使用它bool屬性hideStatus判斷顯示隱藏。
第一個界面,默認self.hideStatus =NO,顯示。點擊圖片時,調用strongSelf.hideStatus =YES隱藏;這樣做的目的是通過第二個界面pop回來時,statusBar先隱藏,然后采用以下方法進行statusBar動畫顯示。
同樣,第二個界面也是如此,但第二個界面不知道push進去還是pop所以增加了push屬性。
tabBar開始想用動畫hidesBottomBarWhenPushed隱藏,但和AppStore轉場動畫不太合適,就像AppStore的tabBar的動畫在UINavigationControllerDelegate處理協(xié)議方法。
AppStore轉場pop手勢的上下滑動與抖音評論的效果非常相似,但下,AppStore頁面還增加了左滑pop手勢。
一開始,我想用蘋果自己的邊緣手勢UIScreenEdgePanGestureRecognizer來進行處理,但發(fā)現(xiàn)這樣只能解決橫向側滑pop,垂直滑動無法解決pop的問題。干脆自己寫一套手勢,可以橫向豎向支撐。橫向滑動還支持全屏、半屏等距離屬性的設置,寫全局宏TLPanEdgeInside來控制。
自認比較手勢處理AppStore評論抖音的效果很好。因為不管怎樣AppStore或者抖音評論只能改變上下方向之一,或者改變UIScrollView要么改變控制器的偏移量pop進度。我包裝的這套手勢可以自由上下改變,可以監(jiān)控開始的手勢,從上下滑動到左右滑動,或者基于上下。
因為push轉場時間為0.8秒,我在第一個控制器中添加了以下內容userEnabled屬性用于防止重復點擊。demo的代碼。
AppStore轉移主要涉及三種方法:
-(NSArray*_Nonnull)tl_transitionUIViewFrameViews;
-(NSString *_Nonnull)tl_transitionUIViewI ** ge;
-(void)setContainScrollView:(UIScrollView *)scrollView isPush:(BOOL)isPush;
第一種方法是回調前一個視圖和后一個視圖中的動畫控件。
二是圖片資源的回調。
三是防止手勢沖突,避免沖突UIScrollView視圖進入。
導航欄隱藏的判斷是在UINavigationControllerDelegate協(xié)議中判斷,但考慮到項目中的一些頁面并非所有頁面都需要轉移動畫,因此UINavigationControllerDelegate協(xié)議在兩個地方重寫。并且還在UIViewController在分類中重寫viewWillAppear判斷方便常規(guī)push和轉場push自由切換。
處理抖音評論手勢和AppStore的一模一樣。只不過AppStore是push,抖音評論是press。
這里的鏈接和抖音完全一樣,DouYinComment。這個demo是基于視圖層級彈窗,而我寫的是彈出控制器。
同時,為了避免快速掃描引起的閃光,我在手勢結束時做出了判斷。當速度過快,掃描距離過短時,直接進行pop或者di ** iss。
研究轉場動畫時要注意QQ音樂界面有一個小問題,就是當加藤鷹手速上下滑動時,界面和頂部之間的間隙會越來越大。應該是手勢和界面偏移之間的問題。
這種效果很好看,處理起來也很簡單。只需將相應的控制器傳輸?shù)睫D移動畫中即可。圖片瀏覽功能也可以這樣包裝。
這也很簡單,但通常用于沒有導航欄的界面,否則看起來會很丑。
因為一些小伙伴提議模仿AppStore在動畫中,當我點擊X時,過渡點不自然,我優(yōu)化了一些代碼,具體參考TLAni ** tionAppStoreStyle文件。
同時對AppStore動畫里面的statusBar部分和tabBar進一步處理了部分。
、
上一篇:制作MG動畫會用到哪個軟件?
下一篇:mg二維動畫設計的應用范圍研究
- 深圳Flash動畫制作帶給我們什么 2024/11/26
- 在深圳,越來越多的學生會在這種生動有趣、自由創(chuàng)造的學習中茁壯 2024/11/25
- 深圳機械動畫制作在各方面都顯得異常突出 2024/11/24
- 深圳視頻動畫產業(yè)的發(fā)展現(xiàn)狀、需求趨勢及未來發(fā)展方向 2024/11/23
- 深圳三維動畫制作公司將用戶體驗視為根本 2024/11/22
- 深圳MG動畫的歷史、現(xiàn)狀和未來發(fā)展方向 2024/11/21
- 深圳MG動畫制作有限公司 2024/11/20
- 深圳動畫設計制作行業(yè)有著廣闊的前景 2024/11/19
- 深圳MG動畫的核心業(yè)務 2024/11/19
- 深圳三維動畫制作行業(yè)必將繼續(xù)拓寬創(chuàng)作領域 2024/11/18