VUE 這個(gè) App 里弄诲，有一個(gè) UIView 之間的轉(zhuǎn)場(chǎng)動(dòng)效做的挺不錯(cuò)抄瓦，是參照 iOS 系統(tǒng) UINavigationController 的 push 和 pop 動(dòng)畫威始，對(duì)兩個(gè) UIView 之間的切換實(shí)現(xiàn)了和 系統(tǒng)的 push富蓄、pop 類似的動(dòng)效眷蚓，如下：
iOS 里實(shí)現(xiàn)一個(gè)這樣的動(dòng)效還是比較容易的澳骤，只需要用 CAAnimation 的子類 CATransition 即可歧强。
簡(jiǎn)單版本
原理很簡(jiǎn)單：封裝一個(gè) PageView ，初始化時(shí)傳入一個(gè) fromView为肮，然后提供一個(gè)接口可以 動(dòng)畫的 push 到 toView 摊册，以及動(dòng)畫的移除 toView 的 pop 方法，以下是個(gè)簡(jiǎn)單的實(shí)現(xiàn)的接口：
// 具體實(shí)現(xiàn)見 Demo 鏈接
#import <UIKit/UIKit.h>
@interface PageView : UIView
@property (nonatomic, assign, readonly, getter=isInPushing) BOOL inPushing;
// PageA 必須和 self frame 一致
- (void)setupPageA:(UIView *)view1;
// PageB 必須和 self frame 一致
- (void)pushToPageB:(UIView *)view2;
- (void)pop;
@end
用法示例：
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.pageView];
[self.pageView setupPageA:self.view1];
}
- (void)demo1Action {
if (self.pageView.isInPushing) {
[self.pageView pop];
} else {
[self.pageView pushToPageB:self.view2];
}
}
進(jìn)階版本
當(dāng)然颊艳，這樣的實(shí)現(xiàn)和系統(tǒng)的 UINavigationController 比茅特，還是難用了太多，可以借助 OC 的 Category 機(jī)制棋枕，對(duì) UIView 做個(gè) page able 的擴(kuò)展白修，這樣，任何 UIView 就都能夠 push 和 pop 了重斑，這里是進(jìn)階版的簡(jiǎn)單實(shí)現(xiàn)：
// UIView (Pageable).h
#import <UIKit/UIKit.h>
@interface UIView (Pageable)
@property (nonatomic, assign, readonly) BOOL yh_inPushing;
- (void)yh_pushView:(UIView *)toView;
- (void)yh_pop;
@end
// UIView (Pageable).m
#import "UIView+Pageable.h"
#import <objc/runtime.h>
static NSString* const kPageAnimateKey = @"YHPageable";
@interface UIView ()
@property (nonatomic, weak) UIView *yh_toView;
@property (nonatomic, assign, readwrite) BOOL yh_inPushing;
@end
@implementation UIView (Pageable)
- (void)yh_pushView:(UIView *)toView {
NSAssert(CGSizeEqualToSize(toView.frame.size, self.frame.size), @"toView.frame.size != self.frame.size");
// 不支持連續(xù) push 同一個(gè) view
if ([self.subviews containsObject:self.yh_toView]) {
return;
}
self.yh_toView = toView;
[self yh_switchAnimation];
self.yh_inPushing = YES;
}
- (void)yh_pop {
// 無 toView 可 pop
if (![self.subviews containsObject:self.yh_toView]) {
return;
}
[self yh_switchAnimation];
self.yh_inPushing = NO;
}
#pragma mark - private
- (void)yh_switchAnimation {
if (self.yh_inPushing) { // pop
[self yh_addTransitionWithType:kCATransitionMoveIn
subtype:kCATransitionFromLeft
duration:0.25];
[self.yh_toView removeFromSuperview];
} else { // push
[self yh_addTransitionWithType:kCATransitionMoveIn
subtype:kCATransitionFromRight
duration:0.5];
[self addSubview:self.yh_toView];
}
}
- (void)yh_addTransitionWithType:(CATransitionType)type
subtype:(CATransitionSubtype)subtype
duration:(CFTimeInterval)duration {
[self.layer removeAnimationForKey:kPageAnimateKey];
CATransition *transition = [CATransition animation];
transition.duration = duration;
transition.type = type;
transition.subtype = subtype;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:transition forKey:kPageAnimateKey];
}
#pragma mark - associate
- (UIView *)yh_toView {
return objc_getAssociatedObject(self, _cmd);
}
- (void)setYh_toView:(UIView *)view {
objc_setAssociatedObject(self, @selector(yh_toView), view, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (BOOL)yh_inPushing {
return [objc_getAssociatedObject(self, _cmd) boolValue];
}
- (void)setYh_inPushing:(BOOL)inPushing {
objc_setAssociatedObject(self, @selector(yh_inPushing), @(inPushing), OBJC_ASSOCIATION_RETAIN);
}
@end
用法示例：
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.view1];
}
- (void)demoAction {
if (self.view1.yh_inPushing) {
[self.view1 yh_pop];
} else {
[self.view1 yh_pushView:self.view2];
}
}
效果如下：
動(dòng)畫實(shí)現(xiàn)原理
- 通過給 view.layer 加自定義的
CAAnimation兵睛，以替換掉[view addSubview:]和[view removeFromSuperview]時(shí)的默認(rèn)動(dòng)畫。 - 按照這個(gè)思路窥浪，只需要修改這里的
CATransitionType即可實(shí)現(xiàn)各種轉(zhuǎn)場(chǎng)動(dòng)畫祖很； - 更多的
CATransitionType效果示例，可以參見 @青玉伏案 的 iOS開發(fā)之各種動(dòng)畫各種頁面切面效果
參照 UINavigationController 的版本
以上兩種實(shí)現(xiàn)漾脂，其實(shí)都沒有真正做到像 UINavigationController 一樣假颇，能隨意的 push 和 pop。如果要完全實(shí)現(xiàn)一套能像 UINavigationController 一樣使用的 UIView骨稿，用法上的限制會(huì)增大很多：
首先笨鸡，假定我們最終的可導(dǎo)航的 UIView 的類為 UIViewNavigationController
1、 UIViewController 持有一個(gè) UINavigationController 類型的屬性啊终；
所以镜豹，我們就不能直接使用 UIView, 而需要封裝一個(gè) UINavigationView, 持有一個(gè) UIViewNavigationController 屬性，便于 UIView 調(diào)用 [self.navigationView popView]
2蓝牲、 UINavigationController 是繼承自 UIViewController 的趟脂。
所以，UINavigationController 需要繼承自 UIView, 至少有 initWithRootView:, pushView:(UINavigationView *)view, popView 等接口例衍，內(nèi)部還需要維護(hù)一個(gè) stack昔期，管理一層一層 push 入的 views
3、由于很少有這么復(fù)雜的使用場(chǎng)景佛玄，這里僅提供簡(jiǎn)單的 API 接口硼一，需要的可以自行實(shí)現(xiàn)
#import <UIKit/UIKit.h>
@class UIViewNavigationController;
@interface UINavigationView : UIView
@property (nonatomic, strong, readonly) UIViewNavigationController *viewNavigation;
@end
@interface UIViewNavigationController : UIView
@property(nonatomic,readonly,strong) UINavigationView *topView; // The top view on the stack.
@property(nonatomic,readonly,strong) UINavigationView *visibleView;
@property(nonatomic,copy) NSArray<__kindof UINavigationView *> *subNavigationViews; // The current navview stack.
- (instancetype)initWithRootView:(UINavigationView *)rootView;
- (void)pushView:(UINavigationView *)view animated:(BOOL)animated;
- (UINavigationView *)popView:(BOOL)animated;
- (NSArray<__kindof UINavigationView *> *)popToView:(UINavigationView *)view animated:(BOOL)animated;
- (NSArray<__kindof UINavigationView *> *)popToRootView:(BOOL)animated;
@end
keyword：
UIView 轉(zhuǎn)場(chǎng)、UIView轉(zhuǎn)場(chǎng)動(dòng)畫梦抢、UIView push pop般贼、UIView CATransition
