正文
Transition 过渡/转场动画(一)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
UIViewController 的转场效果
当viewController通过push 或 present 进行转场时, 系统自带的动画是从右侧push进来一个新的viewControler (或从下面present 一个新的ViewController), 接下来我们要做的就是要自定义系统的这个动画效果.
原理: 比如当viewController 调用 dismiss 后, 系统会检查当前 vc 是否实现<UIViewControllerTransitioningDelegate> 协议, 该协议会返回 自定义 的转场动画
例: 通过pan手势, dismiss 当前viewController
1. 在调用dimiss的 VC 中实现 <UIViewControllerTransitioningDelegate> 协议
#import "SecondViewController.h"
#import "CustomInteractiveTransition.h"
#import "CustomDissmissAnimation.h" @interface SecondViewController () <UIViewControllerTransitioningDelegate> @property (nonatomic, strong) CustomInteractiveTransition *interactiveAnimator;
@property (nonatomic, strong) CustomDissmissAnimation *dismissAnimator; @end @implementation SecondViewController - (instancetype)init {
if (self = [super init]) {
self.transitioningDelegate = self;
}
return self;
} - (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor = [UIColor cyanColor]; UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
[button setTitle:@"dismiss" forState:UIControlStateNormal];
button.frame = CGRectMake(, , , );
[button addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button]; self.interactiveAnimator = [[CustomInteractiveTransition alloc] initWithViewController:self]; self.dismissAnimator = [[CustomDissmissAnimation alloc] init]; UIPanGestureRecognizer *panGestureRecognizer =[[UIPanGestureRecognizer alloc] initWithTarget:self.interactiveAnimator action:@selector(panGestureAction:)];
[self.view addGestureRecognizer:panGestureRecognizer]; [self.transitionCoordinator notifyWhenInteractionEndsUsingBlock:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) { }];
} - (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated]; [self.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
UIView *view = [context viewForKey:UITransitionContextFromViewKey];
view.transform = CGAffineTransformMakeScale(0.7, 0.7); } completion:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
// UIView *view = [context viewForKey:UITransitionContextFromViewKey];
// view.transform = CGAffineTransformIdentity;
}];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated]; [self.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
UIView *view = [context viewForKey:UITransitionContextToViewKey];
view.transform = CGAffineTransformMakeScale(, ); } completion:^(id<UIViewControllerTransitionCoordinatorContext> _Nonnull context) {
// UIView *view = [context viewForKey:UITransitionContextToViewKey];
// view.transform = CGAffineTransformIdentity;
}];
} - (void)dealloc
{
self.interactiveAnimator = nil;
self.dismissAnimator = nil;
} - (void)btnClick:(UIButton *)sender {
[self dismissViewControllerAnimated:YES completion:nil];
} #pragma mark - UIViewControllerTransitioningDelegate
// return 动画对象，该动画对象符合 UIViewControllerAnimatedTransitioning 协议，负责显示 present 动画。
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
return nil;
}
// return 动画对象，负责显示 dismiss 动画。
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
return self.dismissAnimator;
}
// return 交互式动画对象，该动画符合 UIViewControllerInteractiveTransitioning 协议，采用触摸手势或手势识别器作为动画的驱动，显示 present 动画。
- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id<UIViewControllerAnimatedTransitioning>)animator {
return nil;
}
// return 交互式动画，显示 dismiss 动画
- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator {
// 如果直接返回 interactive 会与系统的 dismiss 动画有冲突，导致点击 button 无法 dismiss 界面。
// 同时如果返回 interactiveAnimator，那么 animationControllerForDismissedController: 则必须实现
return self.interactiveAnimator.isInteractive? self.interactiveAnimator: nil;
// return self.interactiveAnimator;
} // return UIPresentationController，系统已经提供了各个演示样式。
//- (nullable UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source NS_AVAILABLE_IOS(8_0); @end
2. 实现一个动画对象, 实现 <UIViewControllerAnimatedTransitioning>协议
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
return 0.35f;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
UIViewController *srcVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIViewController *secondVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIView *containerView = [transitionContext containerView];
[containerView addSubview:srcVC.view];
[containerView addSubview:secondVC.view];
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
secondVC.view.frame = CGRectMake(, [UIScreen mainScreen].bounds.size.height, secondVC.view.bounds.size.width, secondVC.view.bounds.size.height);
} completion:^(BOOL finished) {
[transitionContext completeTransition:!transitionContext.transitionWasCancelled];
}];
}
3. 交互式动画效果, 需要实现<UIViewControllerInteractiveTransitioning>协议 ; 或者继承UIPercentDrivenInteractiveTransition 类
* 可选实现. 在本例中, 通过pan手势下滑跟随dismiss, 需要通过交互式动画来实现
#import "CustomInteractiveTransition.h"
@interface CustomInteractiveTransition : UIPercentDrivenInteractiveTransition @property (nonatomic, assign, readonly) BOOL isInteractive; - (instancetype)initWithViewController:(UIViewController *)viewController; - (void)panGestureAction:(UIPanGestureRecognizer *)gestureRecognizer; @end
//.m
@interface CustomInteractiveTransition () @property (nonatomic, weak) UIViewController *viewController; @property (nonatomic, assign) CGFloat startScale; @property (nonatomic, assign, readwrite) BOOL isInteractive; @end @implementation CustomInteractiveTransition - (instancetype)initWithViewController:(UIViewController *)viewController {
if (self = [super init]) {
_isInteractive = NO;
_viewController = viewController;
}
return self;
} - (void)panGestureAction:(UIPanGestureRecognizer *)recognizer {
CGFloat progress = [recognizer translationInView:self.viewController.view].y / (self.viewController.view.bounds.size.height * 1.0);
progress = MIN(1.0, MAX(0.0, progress)); self.isInteractive = YES; if (recognizer.state == UIGestureRecognizerStateBegan) { [self.viewController dismissViewControllerAnimated:YES completion:^{ }];
}
else if (recognizer.state == UIGestureRecognizerStateChanged) {
[self updateInteractiveTransition:progress];
}
else if (recognizer.state == UIGestureRecognizerStateEnded || recognizer.state == UIGestureRecognizerStateCancelled) {
if (progress > 0.5) {
[self finishInteractiveTransition];
}
else {
[self cancelInteractiveTransition];
} self.isInteractive = NO;
}
} @end
在 iOS中，可以取消一个过渡。这意味着，第二个视图的-viewWillApear被调用，但-viewDidApear不一定被调用。
如果代码写的假定-viewDidAppear总是在-viewWillAppear之后执行则需要重新考虑逻辑实现。
这种情况下UIViewControllerTransitionCoordinator就有用了。在交互式过渡结束的时候，会在 block 中收到通知。
参考:
present: https://www.jianshu.com/p/aed8a3a15c82
push/pop: https://www.jianshu.com/p/28b9523d70a9
