一行代碼實(shí)現(xiàn)自定義轉(zhuǎn)場動畫

前言

系統(tǒng)自帶的presentViewControllerpushViewController已經(jīng)能夠很好的完成場景與場景之間的過渡了例获,而且提供的動畫視覺效果也很簡潔流暢踢故,稱之為iOS系統(tǒng)的標(biāo)志之一也不為過耍目。
但是如果能讓轉(zhuǎn)場過程根據(jù)業(yè)務(wù)情景做一些更豐富忠聚,或者說是更適合的動態(tài)表現(xiàn)钱慢,其實(shí)也不失為一種內(nèi)容表達(dá)上的點(diǎn)睛之筆疮绷。

通過拜讀兩位大神:KittenYangOneV's Den的系列文章盅安,逐漸嘗試唤锉、總結(jié),輸出了這套專注于自定義轉(zhuǎn)場動畫的工具:XTTransitionAnimations别瞭。
這里不再贅述轉(zhuǎn)場動畫的實(shí)現(xiàn)原理窿祥,有需要的小伙伴可以到兩位大神的文章學(xué)習(xí)下~ 也歡迎留言討論~

實(shí)現(xiàn)功能

一行代碼實(shí)現(xiàn)自定義轉(zhuǎn)場動畫
[self XT_PresentViewController:vc animatedType:XTSpringFromBottom interact:NO completion:nil];

[self.navigationController XT_PushViewController:vc animatedType:XTRoundExpand interact:YES];
  • 與系統(tǒng)原生的present和push轉(zhuǎn)場api極其相似,學(xué)習(xí)成本低蝙寨;
  • 支持動畫效果參數(shù)配置晒衩,如時(shí)長,阻尼系數(shù)墙歪,彈性曲線等听系;
  • 可配置轉(zhuǎn)場動畫是否可交互;
  • 侵入性很低虹菲,不對UI層干涉靠胜;
  • 默認(rèn)生成配套的dismiss/pop動畫,也可單獨(dú)配置届惋;
  • 可交互動畫中髓帽,彈性動畫與線性動畫自動切換。

工具目前內(nèi)置四類自定義動畫(后續(xù)會繼續(xù)拓展)脑豹,使用時(shí)通過枚舉類型參數(shù)設(shè)置即可郑藏;目前主要實(shí)現(xiàn)的動畫效果有以下四類:


Spring From Bottom(present,interact,XTSpringFromEdgeAnimation)

Spring From Right(push,interact,XTSpringFromEdgeAnimation)

Round Spring Expand(present,interact,XTRoundExpandAnimation)

Card Spring From Bottom(present,interact,XTCardPresentAnimation)

Cube Rotate From Right(push,interact,XTCubeAnimation)

Cube Rotate From Top(present,interact,XTCubeAnimation)
只需實(shí)現(xiàn)動畫對象就可以自定義你自己的轉(zhuǎn)場動畫

工具支持動畫種類擴(kuò)展。主要流程如下:

  1. 生成一個實(shí)現(xiàn)你想要的效果的服從UIViewControllerAnimatedTransitioning協(xié)議的動畫對象(例如Animations文件夾中的類)瘩欺;
  2. (可選)如果手勢滑動距離控制轉(zhuǎn)場動畫進(jìn)度的交互方式并不能滿足你的需求必盖,可以生成一個繼承于XTBaseInteractiveObj的子類,來定制交互方式(例如Interactive文件夾中的類)俱饿;
  3. 完成XTAnimationsConfig.plist中動畫的基本配置歌粥;
  4. 最后維護(hù)convertAnimationTypeEnumToStr:方法(將枚舉類型轉(zhuǎn)換為字符串)。

即可使用工具統(tǒng)一的api完成自定義轉(zhuǎn)場動畫的使用拍埠。

解釋一下XTAnimationsConfig.plist的用處:

除了之前說的阻尼系數(shù)等非普適性參數(shù)(不是每個動畫都需要的參數(shù))失驶,對于一些所有動畫都需要的基本參數(shù),例如枣购,實(shí)現(xiàn)類嬉探,實(shí)現(xiàn)交互的類擦耀,交互完成的標(biāo)志等等,就是通過XTAnimationsConfig.plist來配置的涩堤。 其中有多個字典眷蜓,每個字典對應(yīng)一個動畫類型(XTAnimationType)。下面具體來介紹一下胎围,其中各鍵的意義:

  • animationClass:實(shí)現(xiàn)該動畫需要的類的類名(Animations文件夾中的各個類)吁系;
  • interactiveClass:實(shí)現(xiàn)交互所需的配置;
    • className:該動畫實(shí)現(xiàn)交互所需的類的類名(Interactive文件夾中的各個類)白魂;
    • isVertical:由于一般的交互是通過手勢控制的汽纤,而且大多與手勢的移動距離有關(guān),因此該屬性配置當(dāng)前交互的進(jìn)度是與豎直方向還是水平方向的位移有關(guān)碧聪;
    • isAccordToCoordinate:動畫完成進(jìn)度的變化趨勢是否與屏幕的坐標(biāo)體系一致冒版,即位移為正值逐漸變大時(shí),是否完成進(jìn)度也在逐漸變大逞姿;
    • completePointNum:動畫完成所需要位移的點(diǎn)數(shù);
      • ScreenHorW:點(diǎn)數(shù)是基于屏幕的高還是寬來計(jì)算(W:寬捆等;H:高)滞造;
      • percent:點(diǎn)數(shù)占屏幕寬或高的百分比;(通過以上兩個參數(shù)計(jì)算完成過場動畫所需的位移點(diǎn)數(shù))
      • absolutePointNum:輸入具體的點(diǎn)數(shù)栋烤,位移距離達(dá)到指定點(diǎn)數(shù)則當(dāng)前動畫達(dá)到完成條件(優(yōu)先于以上兩個參數(shù)生效)

使用方法

引入頭文件

#import "UIViewController+XTTransitionAnimations.h"
#import "UINavigationController+XTTransitionAnimations.h"
Present
/**
 根據(jù)animatedType定制present時(shí)的轉(zhuǎn)場動畫谒养,默認(rèn)dismiss返回時(shí)有配套的轉(zhuǎn)場動畫。

 @param viewControllerToPresent 彈出的VC
 @param aniType 動畫種類
 @param isInteract 轉(zhuǎn)場動畫是否可交互
 @param completion 完成動畫時(shí)的回調(diào)
 */
-(void)XT_PresentViewController:(UIViewController *)viewControllerToPresent animatedType:(XTAnimationType)aniType interact:(BOOL)isInteract completion:(void (^)(void))completion;
定制Dismiss
/**
 如果不想使用present配套的轉(zhuǎn)場動畫 或 只需要dismiss時(shí)出現(xiàn)轉(zhuǎn)場動畫明郭,可使用該方法單獨(dú)定制dismiss時(shí)的轉(zhuǎn)場動畫买窟。
(1.建議在需要dismiss的VC初始化完成后,視圖展示之前薯定,例如viewWillAppear中調(diào)用該方法完成配置始绍,否則會出現(xiàn)交互部分仍按XT_PresentViewController中設(shè)置的配套動畫執(zhí)行的情況;
 2.不建議某些關(guān)聯(lián)性較強(qiáng)的present和dismiss動畫,例如XTCardSpringFromBottom等话侄,使用此方法定制動畫亏推,視覺效果會很差;
 3.在正確位置調(diào)用該方法完成配置后,需要dismiss時(shí)直接調(diào)用系統(tǒng)的popViewControllerAnimated:方法即可年堆。)
 
 @param aniType 動畫種類
 @param isInteract 轉(zhuǎn)場動畫是否可交互
 */
-(void)XT_ConfigureDismissWithAnimatedType:(XTAnimationType)aniType interact:(BOOL)isInteract;
Push
/**
 根據(jù)animatedType定制push時(shí)的轉(zhuǎn)場動畫吞杭,默認(rèn)pop返回時(shí)有配套的轉(zhuǎn)場動畫。

 @param viewController push到的VC
 @param aniType 動畫種類
 @param isInteract 轉(zhuǎn)場動畫是否可交互
 */
-(void)XT_PushViewController:(UIViewController *)viewController animatedType:(XTAnimationType)aniType interact:(BOOL)isInteract;

以上就是這套工具的大致介紹变丧,希望大家多多指正芽狗、討論!
如果覺得對你有一點(diǎn)用的話痒蓬,也希望你能動動你的小手童擎,來個贊啊滴劲、star啊什么的~
如果有小伙伴覺得這套框架的思路還行,更希望大家一起來實(shí)現(xiàn)更多的動畫效果柔昼!

Github地址


看把魄邸!這里有個坑捕透!

這里主要就是分享在寫轉(zhuǎn)場動畫過程中遇到的坑聪姿。

  1. layer層的全部動畫,類似于
[xxLayer addAnimation:pathAni forKey:[NSString stringWithFormat:@"%@",self.class]];)

的這種動畫乙嘀,在iOS11中末购,對進(jìn)度的控制全部無效!也就是說虎谢,在繼承于UIPercentDrivenInteractiveTransition的負(fù)責(zé)交互的對象中盟榴,使用updateInteractiveTransition:來更新動畫進(jìn)度,是不生效的婴噩,動畫只要一開始擎场,就正常執(zhí)行一直到結(jié)束,絲毫不受傳入的進(jìn)度參數(shù)影響几莽。同樣代碼迅办,在iOS10中測試,是沒有問題的章蚣。
而且站欺,即使在iOS10中,在交互過程中纤垂,如果交互程度沒有超過交互完成點(diǎn)矾策,最后通過cancelInteractiveTransition取消了交互,view層的動畫峭沦,可以讓動畫按照“原路”返回初始狀態(tài)贾虽,但layer層動畫并不能,直接瞬間填充熙侍;超過結(jié)束完成點(diǎn)榄鉴,但還有部分可視內(nèi)容時(shí),也直接瞬間消失蛉抓,而不是像view動畫那樣繼續(xù)動畫到最終完成狀態(tài)庆尘。
通過查閱資料,在iOS11中巷送,系統(tǒng)對view的動畫進(jìn)行了相當(dāng)多的擴(kuò)展驶忌,所以,我很大膽的猜想了一下,是不是Apple在引導(dǎo)開發(fā)者向view動畫進(jìn)行傾斜呢付魔?但就算真是這樣聊品,也不應(yīng)該直接就悄無聲息的改掉啊几苍?沒有任何書面的說明翻屈?
希望有大神能夠批評指正。
因此妻坝,在iOS11中伸眶,工具中的XTRoundExpandAnimation動畫類型,暫時(shí)不支持交互刽宪。厘贼。。(日后會爭取實(shí)現(xiàn)非layer動畫的實(shí)現(xiàn)方式)

  1. 動畫完成后圣拄,一定要還原view的所有形變嘴秸。實(shí)現(xiàn)轉(zhuǎn)場動畫時(shí),可能會對view的某些參數(shù)庇谆,例如anchorPoint岳掐、position等影響布局的參數(shù)進(jìn)行修改,因此饭耳,如果在動畫完成后岩四,如果不將其還原的話,會影響之后view上的UI展示層效果哥攘;而且,當(dāng)自定義的轉(zhuǎn)場動畫材鹦,相互疊加時(shí)逝淹,例如present一個navVC,navVC中再相互push桶唐,最后再其中某一個dismiss栅葡,那么影響將更明顯。

  2. 在動畫對象的- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext方法中實(shí)現(xiàn)動畫時(shí)尤泽,一定要使用根據(jù)transitionContext生產(chǎn)的frame等參數(shù)欣簇,不要使用屏幕大小等方式來獲取,不然的話在稍微復(fù)雜一點(diǎn)的動畫中坯约,就會出現(xiàn)無法準(zhǔn)確獲得view的關(guān)鍵節(jié)點(diǎn)狀態(tài)值的情況熊咽,造成動畫效果達(dá)不到預(yù)期。

  3. 在Present的轉(zhuǎn)場過程中闹丐,還有一個利器横殴,就是UIPresentationController。個人認(rèn)為卿拴,他是iOS8.0中出現(xiàn)的一個對animationControllerForPresentedControlleranimationControllerForDismissedController進(jìn)行簡易封裝的api衫仑,而且監(jiān)控的粒度更細(xì)梨与。大多數(shù)人都是將他與animationControllerForPresentedControlleranimationControllerForDismissedController結(jié)合著進(jìn)行使用,但是個人認(rèn)為文狱,他也可以獨(dú)立完成Present轉(zhuǎn)場動畫的實(shí)現(xiàn)粥鞋,而且這樣與Push轉(zhuǎn)場動畫的實(shí)現(xiàn)邏輯很相似。但是瞄崇,他無法獨(dú)立完成動畫的交互實(shí)現(xiàn)呻粹。
    如果真的要結(jié)合在一起使用的話,注意其和animationControllerForPresented/DismissedController之間對視圖的作用是同時(shí)生效的杠袱,因此要注意各司其職尚猿,不要出現(xiàn)反復(fù)添加、處理視圖之類的問題楣富。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末凿掂,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子纹蝴,更是在濱河造成了極大的恐慌庄萎,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件塘安,死亡現(xiàn)場離奇詭異糠涛,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)兼犯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進(jìn)店門忍捡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人切黔,你說我怎么就攤上這事砸脊。” “怎么了纬霞?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵凌埂,是天一觀的道長。 經(jīng)常有香客問我诗芜,道長瞳抓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任伏恐,我火速辦了婚禮孩哑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘脐湾。我一直安慰自己臭笆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著愁铺,像睡著了一般鹰霍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上茵乱,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天茂洒,我揣著相機(jī)與錄音,去河邊找鬼瓶竭。 笑死督勺,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的斤贰。 我是一名探鬼主播智哀,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼荧恍!你這毒婦竟也來了瓷叫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤送巡,失蹤者是張志新(化名)和其女友劉穎摹菠,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體骗爆,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡次氨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了摘投。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片煮寡。...
    茶點(diǎn)故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖犀呼,靈堂內(nèi)的尸體忽然破棺而出洲押,到底是詐尸還是另有隱情,我是刑警寧澤圆凰,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站体箕,受9級特大地震影響专钉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜累铅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一跃须、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧娃兽,春花似錦菇民、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阔馋。三九已至,卻和暖如春娇掏,著一層夾襖步出監(jiān)牢的瞬間呕寝,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工婴梧, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留下梢,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓塞蹭,卻偏偏與公主長得像孽江,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子番电,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容