深圳藝虎文(wen)化傳播有限(xian)公(gong)司(si)
地址:深圳市-羅(luo)湖區(qu)-怡景路1080號(hao)
電話:400-804-9112
價格咨詢:1076576968
動畫制作: 849500115
業務郵箱:service@yihoo.sh
有錢(qian)人(ren)捧(peng)個(ge)錢(qian)場,沒錢(qian)捧(peng)個(ge)人(ren)場,看一看。
在(zai)(zai)寫這個demo以前(qian)覺得(de)轉(zhuan)場動畫(hua)就像(xiang)女(nv)神,離我(wo)很(hen)遠,日(ri)常項目根本(ben)接(jie)觸不(bu)到。畢竟系(xi)統自(zi)帶的就好(hao)用(yong),身體輕,容易推倒。但是好(hao)的動畫(hua)效果就像(xiang)電(dian)影(ying)彩蛋,不(bu)經(jing)意間給用(yong)戶一個驚喜,這對App拉新傳播很(hen)有幫助。而且程序員寫完(wan)之后(hou),不(bu)僅可以在(zai)(zai)測(ce)試女(nv)神面(mian)前(qian)展示自(zi)己的操作,還可以讓(rang)老板在(zai)(zai)投資(zi)(zi)人面(mian)前(qian)炫耀(yao)自(zi)己的團隊質量,吸引更多的資(zi)(zi)金,從而在(zai)(zai)彎道(dao)超車,讓(rang)自(zi)己升職加薪,達到人生(sheng)
中國有很(hen)多公司在互動方面做得(de)很(hen)好,比(bi)如(ru)騰訊和字節跳動。demo主要(yao)是寫AppStore所以我研(yan)究(jiu)了(le)跳轉和抖音(yin)評論(lun)【AppStore】、【抖音(yin)】、【QQ這三種產品:音(yin)樂。
接(jie)下(xia)來,我簡潔全面(mian),就(jiu)樣demo在實(shi)現過程中,產品相互比較,對比問題進(jin)行描述。
轉(zhuan)場動畫主要由(you)轉(zhuan)場動畫、跳轉(zhuan)協議、手勢交互三部分(fen)組(zu)成(cheng)。
轉場動畫是對動畫效果的代碼描述,并遵守UIViewControllerAni ** tedTransitioning協議。
跳轉協議在push,press等協議的相關方法里,返回動畫對象。
手勢(shi)(shi)交互(hu)是用手勢(shi)(shi)來控制動畫(hua)的進度,通常是建立的UIPercentDrivenInteractiveTransition的子類(lei)。
這里我就不描述(shu)轉場動(dong)畫的基本概(gai)念了,網上有很多相關(guan)資料。
AppStore主頁(ye)的(de)動畫主頁(ye)分為這些部分。
長按,視圖縮小,松開后,視圖擴展到下一個界面,具有輕微的彈簧效果。
點擊,縮小視圖,松開后,將視圖擴展到下一個界面,并具有輕微的彈簧效果。
長按后滑(hua)動,先縮(suo)小視(shi)圖(tu),再恢復(fu)原狀。
這(zhe)里直(zhi)接(jie)用(yong)我UIButton處理(li)這(zhe)些(xie)手勢,touchesBegan處理(li)視(shi)圖縮(suo)小,touchesEnded點(dian)擊回調處理(li)。所以這(zhe)里加了一個。bool屬性(xing)endTouchesBegan用(yong)于(yu)判(pan)斷視(shi)圖是(shi)否已縮(suo)小。如(ru)果縮(suo)小,直(zhi)接(jie)回調,如(ru)果沒(mei)有,則先進行縮(suo)小載回調。
AppStore動畫(hua)第一(yi)界(jie)面(mian)statusBar為顯(xian)(xian)示,第二(er)個(ge)界(jie)面(mian)隱藏,第三個(ge)界(jie)面(mian)恢復顯(xian)(xian)示。我(wo)們使用它bool屬性hideStatus判斷顯(xian)(xian)示隱藏。
第一個界(jie)面,默認self.hideStatus =NO,顯示(shi)。點(dian)擊圖片時,調用strongSelf.hideStatus =YES隱藏(zang);這樣(yang)做的目的是通過第二個界(jie)面pop回來時,statusBar先(xian)隱藏(zang),然后采用以下方法進行statusBar動畫顯示(shi)。
同(tong)樣(yang),第二(er)個界(jie)(jie)面也是如此(ci),但(dan)第二(er)個界(jie)(jie)面不(bu)知道push進去還是pop所以增加了push屬性。
tabBar開始想用(yong)動(dong)畫hidesBottomBarWhenPushed隱藏(zang),但和AppStore轉(zhuan)場動(dong)畫不太合適(shi),就像AppStore的(de)tabBar的(de)動(dong)畫在UINavigationControllerDelegate處理(li)協議方法。
AppStore轉場pop手勢的上下(xia)滑動與(yu)抖音(yin)評(ping)論的效果(guo)非常相似(si),但下(xia),AppStore頁面還增加了左滑pop手勢。
一(yi)開始,我想用蘋果自(zi)己(ji)(ji)的(de)邊緣手勢(shi)UIScreenEdgePanGestureRecognizer來進行處理,但發現這(zhe)樣只能解決(jue)橫向側(ce)滑pop,垂直滑動無法解決(jue)pop的(de)問題。干脆自(zi)己(ji)(ji)寫一(yi)套手勢(shi),可以橫向豎(shu)向支(zhi)撐。橫向滑動還(huan)支(zhi)持全屏(ping)、半屏(ping)等(deng)距離屬(shu)性(xing)的(de)設(she)置,寫全局宏TLPanEdgeInside來控制。
自認比較手(shou)勢(shi)(shi)處理AppStore評(ping)論抖(dou)音的效果很好。因為不管怎樣AppStore或者抖(dou)音評(ping)論只(zhi)能改變(bian)上下方向之一,或者改變(bian)UIScrollView要么改變(bian)控制器(qi)的偏(pian)移(yi)量(liang)pop進度。我包裝的這(zhe)套手(shou)勢(shi)(shi)可以自由上下改變(bian),可以監控開始的手(shou)勢(shi)(shi),從上下滑動到左右滑動,或者基于上下。
因為push轉場時間為0.8秒,我在第一個(ge)控制器中添(tian)加了以下內容userEnabled屬性用(yong)于防止重(zhong)復點擊。demo的代碼。
AppStore轉移主要涉及三種方法:
-(NSArray*_Nonnull)tl_transitionUIViewFrameViews;
-(NSString *_Nonnull)tl_transitionUIViewI ** ge;
-(void)setContainScrollView:(UIScrollView *)scrollView isPush:(BOOL)isPush;
第一種方法是回調前一個視圖和后一個視圖中的動畫控件。
二是圖片資源的回調。
三(san)是防止手勢(shi)沖(chong)突,避免沖(chong)突UIScrollView視圖進入。
導航欄(lan)隱(yin)藏的判(pan)斷(duan)(duan)是(shi)在UINavigationControllerDelegate協議中判(pan)斷(duan)(duan),但(dan)考慮到項目中的一些頁(ye)面并(bing)(bing)非所(suo)有頁(ye)面都(dou)需(xu)要轉移動畫,因此UINavigationControllerDelegate協議在兩個地方重寫。并(bing)(bing)且(qie)還在UIViewController在分類(lei)中重寫viewWillAppear判(pan)斷(duan)(duan)方便常規(gui)push和(he)轉場push自由(you)切(qie)換。
處理抖音評論(lun)手勢和AppStore的一模一樣。只不過AppStore是push,抖音評論(lun)是press。
這(zhe)里的鏈(lian)接和抖音完全一(yi)樣,DouYinComment。這(zhe)個demo是(shi)基于視圖層級彈(dan)(dan)窗,而(er)我寫的是(shi)彈(dan)(dan)出控制器。
同時,為了避免快(kuai)速掃描引起的閃光,我在手勢結(jie)束(shu)時做出了判斷。當速度(du)過快(kuai),掃描距(ju)離過短(duan)時,直接進行pop或者di ** iss。
研究轉場動(dong)畫時要注意QQ音(yin)樂界面(mian)有一(yi)個小問題(ti),就是(shi)(shi)當加(jia)藤鷹手速上下滑動(dong)時,界面(mian)和(he)(he)頂部(bu)之間的(de)間隙(xi)會越(yue)來越(yue)大。應(ying)該是(shi)(shi)手勢和(he)(he)界面(mian)偏移(yi)之間的(de)問題(ti)。
這種效(xiao)果很好看,處(chu)理(li)起(qi)來(lai)也很簡單。只(zhi)需將相應的控制器(qi)傳輸到轉(zhuan)移動(dong)畫中即(ji)可。圖片瀏覽功(gong)能也可以這樣包(bao)裝。
這(zhe)也很簡單,但通常(chang)用于(yu)沒(mei)有(you)導航欄的界面,否則看起來會(hui)很丑。
因為一(yi)些(xie)小(xiao)伙伴提議(yi)模仿(fang)AppStore在動畫中,當我(wo)點擊X時(shi),過渡點不自然(ran),我(wo)優化了一(yi)些(xie)代碼,具體參(can)考TLAni ** tionAppStoreStyle文件(jian)。
同時對(dui)AppStore動畫里面的statusBar部分(fen)和tabBar進(jin)一步處理了部分(fen)。
、
上一篇:制作MG動畫會用到哪個軟件?
下一篇:mg二維動畫設計的應用范圍研究
- 深圳工業動畫制作崛起,為數字文化創新注入了強大的動力 2025/07/02
- 深圳三維動畫企業未來發展前景必將充滿無限可能 2025/07/01
- Flash動畫制作是什么? 2025/06/30
- 深圳動畫視頻制作公司簡介 2025/06/29
- 深圳MG動畫制作的發展歷程及其在行業內的角色 2025/06/28
- 深圳MG動畫制作公司簡介 2025/06/27
- 深圳三維動畫制作助推中國數字創意產業發展 2025/06/26
- 深圳產品三維動畫制作是一個必不可少的宣傳手段 2025/06/25
- 深圳三維動畫設計所呈現的并不僅是個視覺盛宴 2025/06/24
- 探秘深圳工業動畫制作這個新興產業 2025/06/23