IOS 导航动画之转场效果
2017-08-19 本文已影响490人
损失了成吨智商的小海Jy
今天卓爷感触颇深的说：我现在才发现时间才是最宝贵的。虽然还没有这么深的感触，但也让我意识到不能再这么浪费了。
是时候继续学习总结之路了。
先开个贴，后续补全，结束导航栏动画效果相关的内容。
导航栏自定义动画的方案：
1.我们可以实现navigationController的delegate协议方法：
//这个代理方法是自定义 push／pop 方法时转场的动画效果的
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC;
//这个方法是看名字大概就是自定义 侧滑返回时 的转场动画效果的了
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController;
2.这两个协议方法都需要返回一个实现了UIViewControllerAnimatedTransitioning／UIViewControllerInteractiveTransitioning的id类。所以我们专门建一个NSObject类声明实现上述协议。
//这几个方法是Transitioning协议里面必须实现的方法
#pragma mark UIViewControllerAnimatedTransitioning
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext;
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext ;
#pragma mark UIViewControllerInteractiveTransitioning
- (void)startInteractiveTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
3.上述几个方法都提到了一个<UIViewControllerContextTransitioning>协议，到这里也许我们还需要创建一个NSObject<UIViewControllerContextTransitioning >类，而这个类里面有几个熟悉的方法：
//侧滑返回的动画应该就是在这里面定制了吧！
- (void)updateInteractiveTransition:(CGFloat)percentComplete;
- (void)finishInteractiveTransition;
- (void)cancelInteractiveTransition;
这里用了很多也许大概之类的词，因为还只是在浏览UINavigaionController类里面的内容时做的猜测。待代码写出来我再po出来
8.23 更新代码
定制push与pop动画
- 声明UINavigationControllerDelegate协议，给UINavigationController设置代理(略)，实现下面这个协议方法。该协议方法返回一个实现了UIViewControllerAnimatedTransitioning协议的对象。
#pragma mark UINavigationControllerDelegate
//通过push/pop方法跳转界面调用该协议方法
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
self.transition.isPop = (operation == UINavigationControllerOperationPop);
return self.transition;
}
2.创建实现<UIViewControllerAnimatedTransitioning>协议的类：
(了解CATransform3D与position,anchorPoint)
#pragma mark UIViewControllerAnimatedTransitioning
//设置动画的时间
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
return 0.35;
}
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
UIView *fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];
//需要完成的动画在这里对fromView和toView作用即可完成push／pop自定义动画。
//这里写的动画以是push动画。
CATransform3D toTranslation = CATransform3DMakeRotation(M_PI_2, 0, 0, 1);;
CATransform3D fromTranslation = CATransform3DIdentity;//CATransform3DMakeTranslation(-375 * 0.33, 0, 0);
//判断是否为pop，如果是pop需要把toView加在fromView的下面，如果是push则把toView加在fromView的上面
NSLog(@"position:%@, anchorPoint:%@", NSStringFromCGPoint(fromView.layer.position), NSStringFromCGPoint(fromView.layer.anchorPoint));
if (self.isPop) {
[transitionContext.containerView insertSubview:toView atIndex:0];
fromView.layer.anchorPoint = CGPointMake(1, 1);
fromView.layer.position = CGPointMake(fromView.bounds.size.width, fromView.bounds.size.height);
//pop动画与push动画相反，交换toTransition/fromTransition即可做到
CATransform3D exchange = toTranslation;
toTranslation = fromTranslation;
fromTranslation = exchange;
}else {
[transitionContext.containerView addSubview:toView];
toView.layer.anchorPoint = CGPointMake(1, 1);
toView.layer.position = CGPointMake(toView.bounds.size.width, toView.bounds.size.height);
}
//如果不清楚fromView和toView具体是哪个，可以设置背景色观察
toView.layer.transform = toTranslation;
// fromView.backgroundColor = [UIColor cyanColor];
[UIView animateWithDuration:0.35 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
fromView.layer.transform = fromTranslation;
toView.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
[transitionContext completeTransition:YES];
fromView.layer.transform = CATransform3DIdentity;
// fromView.backgroundColor = [UIColor whiteColor];
}];
}
到这里自定义push／pop动画就已经完成了效果如下
push/pop.gif
定制交互动画(侧滑返回手势的动画)
1.同样还是实现navigationController的delegate协议方法：
//通过交互手势(侧滑返回)返回调用该协议方法
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController{
return self.interactive;
}
2.创建实现了<UIViewControllerInteractiveTransitioning>协议的类。这里苹果建议用UIPercentDrivenInteractiveTransition，在它的基础上做我们需要的动画定制即可。
#import <UIKit/UIKit.h>
@interface YHHTransitionAnimation : UIPercentDrivenInteractiveTransition <UIViewControllerInteractiveTransitioning>
@end
#import "YHHTransitionAnimation.h"
@implementation YHHTransitionAnimation {
id<UIViewControllerContextTransitioning> _transitionContext;
UIView *_toView;
UIView *_fromView;
CATransform3D _toTranslation;
CATransform3D _fromTranslation;
}
// 交互动画开启时会调用，在这里完成一些动画初始化操作
- (void)startInteractiveTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
_transitionContext = transitionContext;
_toView = [transitionContext viewForKey:UITransitionContextToViewKey];
_fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
[transitionContext.containerView insertSubview:_toView atIndex:0];
// 定制自己想要的动画，这里只有pop动画
_toTranslation = CATransform3DMakeTranslation(0, -667*0.33, 0);
_fromTranslation = CATransform3DMakeTranslation(0, 667, 0);
NSLog(@"%f",_fromTranslation.m42);
NSLog(@"动画响应");
}
/*
*手指滑动过程中会不断调用updateInteractiveTransition方法，更新toView/fromView的位置
*@prama percentComplete: 动画完成百分比
**/
- (void)updateInteractiveTransition:(CGFloat)percentComplete {
[super updateInteractiveTransition:percentComplete];
CATransform3D toTranslation = CATransform3DMakeTranslation(_toTranslation.m41 * (1-percentComplete), _toTranslation.m42 * (1-percentComplete), _toTranslation.m43 * (1-percentComplete));
CATransform3D fromTranslation = CATransform3DMakeTranslation(_fromTranslation.m41 * percentComplete, _fromTranslation.m42 * percentComplete, _fromTranslation.m43 * percentComplete);
NSLog(@"%f",_fromTranslation.m42);
_toView.layer.transform = toTranslation;
_fromView.layer.transform = fromTranslation;
}
// 松手时动画完成pop动画调用finishInteractiveTransition
- (void)finishInteractiveTransition {
[super finishInteractiveTransition];
[UIView animateWithDuration:0.35 * (1-self.percentComplete) delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
_fromView.layer.transform = _fromTranslation;
_toView.layer.transform = CATransform3DIdentity;
} completion:^(BOOL finished) {
[_transitionContext completeTransition:YES];
NSLog(@"finish");
}];
}
// 松手时动画取消pop动画调用cancelInteractiveTransition
- (void)cancelInteractiveTransition {
[super cancelInteractiveTransition];
[UIView animateWithDuration:0.35 * self.percentComplete delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
_fromView.layer.transform = CATransform3DIdentity;
_toView.layer.transform = _toTranslation;
} completion:^(BOOL finished) {
[_transitionContext completeTransition:NO];
NSLog(@"cancel");
}];
}
- (void)dealloc {
NSLog(@"动画销毁");
}
@end
3.创建手势
_screenEdgePanGesture = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(panView:)];
_screenEdgePanGesture.edges = UIRectEdgeLeft;
_screenEdgePanGesture.delegate = self;
[self.view addGestureRecognizer:_screenEdgePanGesture];
- (void)panView:(UIPanGestureRecognizer *)pan {
CGFloat xTranslation = [pan translationInView:self.view].x - 20;
CGFloat xVelocity = [pan velocityInView:pan.view].x;
if (pan.state == UIGestureRecognizerStateBegan) {
self.interactive = [[YHHTransitionAnimation alloc] init];
[self popViewControllerAnimated:YES];
NSLog(@"手势开始");
}else if (pan.state == UIGestureRecognizerStateChanged) {
// 设置一个起触点，防止误触。
if (xTranslation > 0) {
[self.interactive updateInteractiveTransition:(xTranslation + 10)/Screen_Width];
}
// NSLog(@"%f",xTranslation);
}else if (pan.state == UIGestureRecognizerStateEnded) {
// 设置阻力加速度f，通过速度与阻力作出最终位置的预测
CGFloat f = 2.0;
CGFloat preXTranslation = (xTranslation + 10) + (0.5 * xVelocity / f);
if (preXTranslation >= 375 * 0.5) {
[self.interactive finishInteractiveTransition];
}else {
[self.interactive cancelInteractiveTransition];
}
self.interactive = nil;
NSLog(@"手势结束");
}
}
这里的关键在于：为什么要self.interactive要在手势开始时创建，手势结束时销毁：（这里可以分别在下列方法里打上断点调试一下）A在B之前调用，而如果B return的不为nil则不会响应A。
意思是：如果self.interactive在pop完成后不销毁，则无法完成之后的pop/push动画了。
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC;
2-----方法A.
- (nullable id <UIViewControllerInteractiveTransitioning>)navigationController:(UINavigationController *)navigationController
interactionControllerForAnimationController:(id <UIViewControllerAnimatedTransitioning>) animationController;
3-----方法B.
- (void)panView:(UIPanGestureRecognizer *)pan;-----1
-----？表示调用顺序
交互手势.gif
这里只讲解了UINavigationController的转场动画定制。但是UITabBarController切换childController、ViewController的Present动画都可以通过分别实现UITabBarControllerDelegate、UIViewControllerTransitioningDelegate里对应的协议方法实现。
