HYBControllerTransitionsiOS自定義轉(zhuǎn)場(chǎng)動(dòng)畫庫(kù)
HYBControllerTransitions是自定義圍場(chǎng)動(dòng)畫API封裝類庫(kù)，使用簡(jiǎn)便。使用者不需要了解太多轉(zhuǎn)場(chǎng)動(dòng)畫知識(shí)，即可輕松接入項(xiàng)目使用。
這是一個(gè)給開發(fā)者們提供自定義push、pop、dismiss和present轉(zhuǎn)場(chǎng)動(dòng)畫的開源組件。現(xiàn)在庫(kù)中支持泡泡放大縮小圍場(chǎng)、模態(tài)半屏轉(zhuǎn)場(chǎng) 和移動(dòng)切換轉(zhuǎn)場(chǎng)（KeyNote某轉(zhuǎn)場(chǎng)效果）。對(duì)于開發(fā)者們來(lái)說(shuō)，這是一個(gè)很不錯(cuò)的開源庫(kù)。開發(fā)者不需要了解轉(zhuǎn)場(chǎng)知識(shí)，只需要簡(jiǎn)單一個(gè)API就可以實(shí)現(xiàn)對(duì) 應(yīng)的功能。
如果想要更深入地學(xué)習(xí)，請(qǐng)?jiān)谠创a中查看對(duì)應(yīng)的注釋說(shuō)明！
開源目標(biāo)
在設(shè)計(jì)此類庫(kù)時(shí)，希望以最簡(jiǎn)潔的API來(lái)實(shí)現(xiàn)轉(zhuǎn)場(chǎng)功能。如果不懂任何轉(zhuǎn)場(chǎng)知識(shí)的人，也能輕松使用，那才算達(dá)到目標(biāo)。
因此，如果您沒有學(xué)習(xí)過(guò)相關(guān)轉(zhuǎn)場(chǎng)方面的知識(shí)，請(qǐng)不要擔(dān)心，這個(gè)類庫(kù)不需要您掌握太多轉(zhuǎn)場(chǎng)的知識(shí)，只需要懂基本的OC語(yǔ)法即可輕松接入項(xiàng)目使用。
公共的屬性及API都封裝在HYBBaseTransition類型中，它遵守了需要實(shí)現(xiàn)轉(zhuǎn)場(chǎng)的所有協(xié)議并實(shí)現(xiàn)之。如果目前類庫(kù)中所提供的效果不滿足您的需求，您可以直接繼承于HYBBaseTransition于實(shí)現(xiàn)您希望得到的效果。
版本變化
Version 1.0.1
完善文檔及去掉部分demo無(wú)關(guān)代碼
Version 1.1.0
解決push/pop模式下，在push后，進(jìn)入后臺(tái)再進(jìn)入前臺(tái)時(shí)，會(huì)出現(xiàn)異常。原因是導(dǎo)航的代理交給了轉(zhuǎn)場(chǎng)對(duì)象后，一直持有，因此才出現(xiàn)此問(wèn) 題。現(xiàn)在在poped的時(shí)候，會(huì)自動(dòng)清除掉導(dǎo)航代理。如果在使用轉(zhuǎn)場(chǎng)之前，已經(jīng)有其它對(duì)象持有導(dǎo)航代理，應(yīng)該在poped之后，交代理交還給原來(lái)的代理對(duì) 象！
支持彈簧動(dòng)畫效果
默認(rèn)轉(zhuǎn)場(chǎng)動(dòng)畫使用的不是彈簧動(dòng)畫效果，如果覺得彈簧動(dòng)畫效果更佳，僅需要設(shè)置為YES即可。
/** * Default is NO, if set to YES, it will be presented and dismissed with * spring animation. */ @property (nonatomic, assign) BOOL animatedWithSpring;
當(dāng)然，使用到彈簧自然需要設(shè)置其參數(shù)。不過(guò)作者都提供有默認(rèn)值，都是經(jīng)過(guò)調(diào)試過(guò)得到的值。如果覺得默認(rèn)值所得到的效果不夠好，請(qǐng)自行調(diào)整參數(shù)：
/** * The initial Spring velocity, Only when animatedWithSpring is YES, it will take effect. * Default is 1.0 / 0.5. If you don't know, just use the default value. */ @property (nonatomic, assign) CGFloat initialSpringVelocity; /** * The Spring damp, Only when animatedWithSpring is YES, it will take effect. * * Default is 0.5. If you don't know, just use the default value. */ @property (nonatomic, assign) CGFloat damp;
轉(zhuǎn)場(chǎng)類型動(dòng)畫
目前所支持的動(dòng)畫效果有以下：
Bubble Effect Transition：泡泡放大、縮小的動(dòng)畫效果，僅支持模態(tài)呈現(xiàn)present/dismiss。
Modal Effect Transition：半屏呈現(xiàn)轉(zhuǎn)場(chǎng)，支持設(shè)置縮放系數(shù)、呈現(xiàn)高度等，僅支持模態(tài)呈現(xiàn)present/dismiss。
Move Push/Pop Transition：移動(dòng)切換轉(zhuǎn)場(chǎng)效果，僅支持push/pop模式。
Buble Effect Transition
present時(shí)，以泡泡圓形放大；dismiss時(shí)，以泡泡圓形縮小至起點(diǎn)。當(dāng)需要實(shí)現(xiàn)此轉(zhuǎn)場(chǎng)效果時(shí)，請(qǐng)使用HYBBubbleTransition類型。效果圖如下：
如何使用
使用起來(lái)非常簡(jiǎn)單，只需要一個(gè)API且只在一處調(diào)用即可。比如，現(xiàn)在有HYBModalBubbleViewController，它有一個(gè)點(diǎn)擊事件，在點(diǎn)擊后會(huì)回調(diào)onPresent函數(shù)，然后配置如下即可實(shí)現(xiàn)轉(zhuǎn)場(chǎng)：
- (void)onPresent {
HYBBubbleFromBottomController *vc = [[HYBBubbleFromBottomController alloc] init];
vc.modalPresentationStyle = UIModalPresentationCustom;
// Remember to own it strongly
// Because delegate is weak reference, and it will be released after out of the function body.
self.bubbleTransition = [[HYBBubbleTransition alloc] initWithPresented:^(UIViewController *presented, UIViewController *presenting, UIViewController *source, HYBBaseTransition *transition) {
// You need to cast type to the real subclass type.
HYBBubbleTransition *bubble = (HYBBubbleTransition *)transition;
// If you want to use Spring animation, set to YES.
// Default is NO.
// bubble.animatedWithSpring = YES;
bubble.bubbleColor = presented.view.backgroundColor;
// 由于一個(gè)控制器有導(dǎo)航，一個(gè)沒有，導(dǎo)致會(huì)有64的誤差，所以要記得處理這種情況
CGPoint center = [self.view viewWithTag:1010].center;
center.y += 64;
bubble.bubbleStartPoint = center;
} dismissed:^(UIViewController *dismissed, HYBBaseTransition *transition) {
// Do nothing and it is ok here.
// If you really want to do something, here you can set the mode.
// But inside the super class, it is set to be automally.
// So you do this has no meaning.
transition.transitionMode = kHYBTransitionDismiss;
}];
vc.transitioningDelegate = self.bubbleTransition;
[self presentViewController:vc animated:YES completion:NULL];
}
這里會(huì)present HYBBubbleFromBottomController這個(gè)控制器類，但是HYBBubbleFromBottomController對(duì)象什么也不需要做，就可以直接實(shí)現(xiàn)了轉(zhuǎn)場(chǎng)。
是不是真的很簡(jiǎn)單呢？
如果想要了解更多功能功能，請(qǐng)?jiān)谠创a中查看類中所提供的所有公開屬性，幾乎都有默認(rèn)值，若不需要修改，直接使用默認(rèn)值就可以了。
注意事項(xiàng)：一定要將代理設(shè)置為對(duì)應(yīng)的轉(zhuǎn)場(chǎng)類對(duì)象。而且一定要在當(dāng)前控制器強(qiáng)引用該轉(zhuǎn)場(chǎng)類對(duì)象，因?yàn)樵O(shè)置為轉(zhuǎn)場(chǎng)代理，只是弱使用，如果沒有強(qiáng)引用，它就會(huì)被釋放掉：
// 代理不再是設(shè)置為self，而是設(shè)置為轉(zhuǎn)場(chǎng)對(duì)象 vc.transitioningDelegate = self.bubbleTransition;
Modal Effect Transition
當(dāng)需要實(shí)現(xiàn)半屏呈現(xiàn)且?guī)Эs放效果的轉(zhuǎn)場(chǎng)動(dòng)畫時(shí)，可以使用此HYBModalTransition類。它僅支持present/dismiss模式。它提供了更多的屬性設(shè)置，稍候講解。效果如下：
如何使用
使用非常簡(jiǎn)單。假設(shè)在HYBModalHalfController有一個(gè)點(diǎn)擊事件，點(diǎn)擊后會(huì)回調(diào)onPresent函數(shù)，只需要在此函數(shù)中實(shí)現(xiàn)即可：
- (void)onPresent {
HYBModalHalfDetailController *vc = [[HYBModalHalfDetailController alloc] init];
self.transition = [[HYBModalTransition alloc] initWithPresented:^(UIViewController *presented, UIViewController *presenting, UIViewController *source, HYBBaseTransition *transition) {
HYBModalTransition *modal = (HYBModalTransition *)transition;
modal.scale = (CGPoint){0.95, 0.95};
// If you don't specify, it will use default value
// modal.presentedHeight = 350.0;
// If you don't want to, set to YES or do no set.
modal.shouldDismissOnTap = YES;
// Default is NO, if set to YES, it will use spring animation.
modal.animatedWithSpring = YES;
// Default is YES. including navigation bar when take snapshots.
// When has navigation bar, if set to NO, it looks not so good.
// modal.scapshotIncludingNavigationBar = NO;
} dismissed:^(UIViewController *dismissed, HYBBaseTransition *transition) {
// do nothing
// 注釋掉也沒有關(guān)系，內(nèi)部已經(jīng)自動(dòng)設(shè)置了。
transition.transitionMode = kHYBTransitionDismiss;
}];
vc.transitioningDelegate = self.transition;
[self presentViewController:vc animated:YES completion:NULL];
}
對(duì)于HYBModalHalfDetailController控制器類，什么也不需要操作。這是不是有點(diǎn)太過(guò)于簡(jiǎn)單了？對(duì)于dismissed這個(gè)block，其實(shí)這里完全可以設(shè)置為nil，因?yàn)椴恍枰鋈魏尾僮鳎J(rèn)就自動(dòng)設(shè)置了mode。
支持帶導(dǎo)航截圖
如果當(dāng)前控制器類有導(dǎo)航，最好還是連導(dǎo)航條也一起生成截圖，這樣效果會(huì)好很多。默認(rèn)就是YES。如果不希望如此，請(qǐng)手動(dòng)設(shè)置為N：
/** * Whether to include navigation bar when take snapshots. * Default is YES. If NO, it has only the presenting view. */ @property (nonatomic, assign) BOOL scapshotIncludingNavigationBar;
支持手勢(shì)點(diǎn)擊自動(dòng)Dismiss
在彈出來(lái)之后，默認(rèn)是添加了點(diǎn)擊手勢(shì)，可以自動(dòng)dismiss。默認(rèn)為YES,如果不希望如此，請(qǐng)手動(dòng)設(shè)置為NO：
/** * When tap on the presenting view, should it automatically is dismissed. * * Default is YES. */ @property (nonatomic, assign) BOOL shouldDismissOnTap;
支持設(shè)置縮放、高度
都提供了默認(rèn)值，但是如果想要調(diào)整到一個(gè)讓您滿意的效果，也許這些屬性就可以幫助您實(shí)現(xiàn)：
/** * Make the from view scale to the specified scale. * * Default is (0.9, 0.9) */ @property (nonatomic, assign) CGPoint scale; /** * The height for destination view to present. * * Default is half of destination view, it means desView.frame.size.height / 2 */ @property (nonatomic, assign) CGFloat presentedHeight;
Move Push/Pop Transition
類似于KeyNote的神奇移動(dòng)效果push、pop動(dòng)畫。效果圖如下：
使用起來(lái)也是很簡(jiǎn)單的，不同于present/dismiss模式，由于push的時(shí)候還不能得到轉(zhuǎn)場(chǎng)過(guò)去的目標(biāo)視圖，比如效果圖中的切換過(guò)去后看到的圖片控件。在創(chuàng)建控制器類的時(shí)候，控件是不存在的，因此只能使用其它的辦法來(lái)實(shí)現(xiàn)。
這里所采用的方案是通過(guò)給UIViewController添加擴(kuò)展屬性，如此就可以在創(chuàng)建UI的地方，將目標(biāo)控件賦值。擴(kuò)展所添加的屬性為：
/** * Set a target view to show. When push, it will transition to * the target view. and when poped, it will pop from the target view. */ @property (nonatomic, strong, nonnull) UIView *hyb_toTargetView;
如何使用
假設(shè)當(dāng)前控制器類為HYBMoveViewController，它有一個(gè)collectionview，呈風(fēng)格布局顯示一個(gè)圖片列表。當(dāng)點(diǎn)擊cell的時(shí)候，就切換（push）到HYBMoveDetailController控制器中顯示更多內(nèi)容。
實(shí)現(xiàn)如下：
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
HYBMoveDetailController *vc = [[HYBMoveDetailController alloc] init];
HYBGridModel *model = self.datasource[indexPath.item];
vc.image = model.clipedImage;
self.transition = [[HYBMoveTransition alloc] initWithPushed:^(UIViewController *fromVC, UIViewController *toVC, HYBBaseTransition *transition) {
HYBMoveTransition *move = (HYBMoveTransition *)transition;
HYBGridCell *cell = (HYBGridCell *)[collectionView cellForItemAtIndexPath:indexPath];
move.targetClickedView = cell.imageView;
move.animatedWithSpring = YES;
} poped:^(UIViewController *fromVC, UIViewController *toVC, HYBBaseTransition *transition) {
// Do nothing, unless you really need to.
}];
self.navigationController.delegate = self.transition;
[self.navigationController pushViewController:vc animated:YES];
}
在點(diǎn)擊的時(shí)候，需要?jiǎng)?chuàng)建一個(gè)轉(zhuǎn)場(chǎng)對(duì)象，然后我們將導(dǎo)航類的代理設(shè)置為這個(gè)轉(zhuǎn)場(chǎng)對(duì)象，如下：
self.navigationController.delegate = self.transition;
這樣就可以實(shí)現(xiàn)內(nèi)部自動(dòng)處理了。當(dāng)push的時(shí)候，會(huì)回調(diào)pushed閉包，在這里返回了轉(zhuǎn)場(chǎng)對(duì)象，需要提供相關(guān)屬性設(shè)置，才能實(shí)現(xiàn)。一定要傳targetClickedView屬性，這是被點(diǎn)擊的控件，也是用于切換效果用的。
注意：如果導(dǎo)航的代理原來(lái)是其它類對(duì)象持有，在poded閉包中應(yīng)該要設(shè)置成原來(lái)的導(dǎo)航代理。
在HYBMoveDetailController控制器中，在viewDidLoad這里創(chuàng)建UI的地方，創(chuàng)建了一個(gè)圖片控件，然后如些設(shè)置：
// You must specify a target view with this. self.hyb_toTargetView = imgView;
OK，到此就實(shí)現(xiàn)好功能了！
是否足夠簡(jiǎn)單？
如何安裝
支持pod，可直接使用pod添加以下代碼到Podfile中：
pod 'HYBControllerTransitions', '~> 1.0.0'
如果您的工程不支持Pod，呆直接將HYBControllerTransitions目錄放到您的工程中即可！
源代碼
如果不想使用pod來(lái)安裝，或者想要看看demo，請(qǐng)到此處下載：HYBControllerTransitions
致謝
非常感謝andreamazz，學(xué)習(xí)了很多他的開源作品！