iOS 自定义转场动画初探

最近项目刚迭代，正好闲下来捣鼓了一下iOS的自定义转场的效果。闲话不多说，直接开始上代码吧。(ps：请忽略实际的转场效果，关注技术本身呢哦。pps：主要是转场的动画做的比较low啦！)

1、首先定义一个转场动画的类

第一步，咱们先定义一个管理转场动画的类。首先创建一个继承自NSObject的类，这里叫JTAnimatedTransition，并且让其遵循UIViewControllerAnimatedTransitioning这个协议。
      这个是.h文件代码。 我在这里定义了一个枚举，用来表示转场的类型。并且还遵循的CAAnimationDelegate协议，这个后面会说到。 再有呢，就是一个类方法了，这个是在使用的控制器中会用到的方法，具体的用法后续代码中会有体现。

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
typedef enum {JTAnimatedTransitionTypePush,JTAnimatedTransitionTypePop,JTAnimatedTransitionTypePresent,JTAnimatedTransitionTypeDismiss
}JTAnimatedTransitionType;@interface JTAnimatedTransition : NSObject<UIViewControllerAnimatedTransitioning, CAAnimationDelegate>
@property (assign, nonatomic) JTAnimatedTransitionType type;
@property (strong, nonatomic) id transitionContext;
+ (JTAnimatedTransition *)animatedTransitionWithType:(JTAnimatedTransitionType)type;
@end

接下来是.m中的代码了。 具体说明在代码中都有详细注释。

#import "JTAnimatedTransition.h"
@implementation JTAnimatedTransition+ (JTAnimatedTransition *)animatedTransitionWithType:(JTAnimatedTransitionType)type
{JTAnimatedTransition *animatedTransition = [[JTAnimatedTransition alloc] init];animatedTransition.type = type;return animatedTransition;
}#pragma mark - UIViewControllerAnimatedTransitioning
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext
{//返回动画执行的时间return 0.5;
}- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext
{//在这里设置自己想要的动画效果self.transitionContext = transitionContext;if (self.type == JTAnimatedTransitionTypePush) {// 获得即将消失的vc的vUIView *fromeView = [transitionContext viewForKey:UITransitionContextFromViewKey];// 获得即将出现的vc的vUIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];// 获得容器viewUIView *containerView = [transitionContext containerView];[containerView addSubview:fromeView];[containerView addSubview:toView];UIBezierPath *startBP = [UIBezierPath bezierPathWithOvalInRect:CGRectMake((containerView.frame.size.width-100)/2, 100, 100, 100)];CGFloat radius = 1000;UIBezierPath *finalBP = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(150 - radius, 150 -radius, radius*2, radius*2)];CAShapeLayer *maskLayer = [CAShapeLayer layer];maskLayer.path = finalBP.CGPath;toView.layer.mask = maskLayer;//执行动画CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];animation.delegate = self;animation.fromValue = (__bridge id _Nullable)(startBP.CGPath);animation.toValue = (__bridge id _Nullable)(finalBP.CGPath);animation.duration = [self transitionDuration:transitionContext];animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];[maskLayer addAnimation:animation forKey:@"path"];} else if (self.type == JTAnimatedTransitionTypePresent) {UIView *fromeView = [transitionContext viewForKey:UITransitionContextFromViewKey];UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];UIView *containerView = [transitionContext containerView];[containerView addSubview:fromeView];[containerView addSubview:toView];fromeView.frame = containerView.frame;toView.frame = containerView.frame;toView.layer.anchorPoint = CGPointMake(0.0f, 1.0f);toView.frame = containerView.frame;toView.transform = CGAffineTransformMakeRotation(-M_PI/2);[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{toView.transform = CGAffineTransformIdentity;} completion:^(BOOL finished) {[self.transitionContext completeTransition:YES];}];} else if (self.type == JTAnimatedTransitionTypeDismiss) {UIView *fromeView = [transitionContext viewForKey:UITransitionContextFromViewKey];UIView *toView = [transitionContext viewForKey:UITransitionContextToViewKey];UIView *containerView = [transitionContext containerView];[containerView addSubview:fromeView];[containerView addSubview:toView];fromeView.frame = containerView.frame;toView.frame = CGRectMake(containerView.frame.size.width, containerView.frame.origin.y, 0, containerView.frame.size.height);[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{fromeView.frame = CGRectMake(containerView.frame.origin.x, containerView.frame.origin.y, 0, containerView.frame.size.height);toView.frame = containerView.frame;} completion:^(BOOL finished) {[self.transitionContext completeTransition:YES];}];} else {}
}#pragma mark - CAAnimationDelegate
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{//告诉系统转场动画完成[self.transitionContext completeTransition:YES];//清除相应控制器视图的mask[self.transitionContext viewForKey:UITransitionContextFromViewKey].layer.mask = nil;[self.transitionContext viewForKey:UITransitionContextToViewKey].layer.mask = nil;
}@end

到这里转场动画管理者就写好了，后面我们只需要关注使用者的情况了。

2、怎么使用转场动画

现在我们创建一个使用者类。我这里就直接使用了ViewController了。下面是创建好之后的效果图。

首页.png

下面就是.m的具体实现代码了，一些简单的界面搭建代码就不贴出来了。下面的代码只是一些跟转场动画有关的代码哦。

这是点击cell之后的逻辑

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{[tableView deselectRowAtIndexPath:indexPath animated:YES];ViewControllerTwo *vc = [[ViewControllerTwo alloc]init];UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];CGRect rectInTableView = [tableView rectForRowAtIndexPath:indexPath];CGRect rect = [tableView convertRect:rectInTableView toView:[tableView superview]];cell.imageView.hidden = YES;self.selectImageView.image = cell.imageView.image;self.selectImageView.frame = CGRectMake(cell.imageView.frame.origin.x, rect.origin.y, cell.imageView.frame.size.width, cell.imageView.frame.size.height);vc.img = self.selectImageView.image;vc.row = indexPath.row;[UIView animateWithDuration:0.5 animations:^{self.selectImageView.frame = CGRectMake(0, 2, self.view.bounds.size.width/2, self.view.bounds.size.width/2);self.selectImageView.center = CGPointMake(self.view.bounds.size.width/2, 200);} completion:^(BOOL finished) {[self.navigationController pushViewController:vc animated:YES];}];
}

要实现自定义的转场，还需要使用者必须遵循UINavigationControllerDelegate协议或者, UIViewControllerTransitioningDelegate协议。根据需要的专场类型，实现自己的协议方法。

#pragma mark - pop / push
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{if (operation == UINavigationControllerOperationPush) {JTAnimatedTransition *animatedTransition = [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypePush];return animatedTransition;}return nil;
}- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{if (viewController != self) {self.selectImageView.frame = CGRectNull;}
}#pragma mark - present / dismiss
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{return [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypePresent];
}- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{return [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypeDismiss];
}

首页push效果图.gif

3、模态跳转

模态跳转效果图.gif

调用跳转的代码

-(void)click:(UIButton *)sender
{ViewControllerThree *vc = [[ViewControllerThree alloc]init];[self presentViewController:vc animated:YES completion:^{}];
}调用者 ViewController 内实现了协议方法

在返回时 在 ViewControllerThree 内需要遵循 UIViewControllerTransitioningDelegate 并实现其协议方法

#import "ViewControllerThree.h"
#import "JTAnimatedTransition.h"
@interface ViewControllerThree ()<UIViewControllerTransitioningDelegate>@end@implementation ViewControllerThree- (void)viewDidLoad {[super viewDidLoad];self.transitioningDelegate = self;self.title = @"模态";self.view.backgroundColor = [UIColor lightGrayColor];UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];btn.backgroundColor = [UIColor redColor];[btn setTitle:@"点我返回" forState:UIControlStateNormal];[btn addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:btn];
}
-(void)back
{[self dismissViewControllerAnimated:YES completion:^{}];
}#pragma mark - UIViewControllerTransitioningDelegate- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{return [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypePresent];
}- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{return [JTAnimatedTransition animatedTransitionWithType:JTAnimatedTransitionTypeDismiss];
}@end

结束语

写到这转场动画就自定义完成了。其实转场动画主要就是两个协议：1、在动画管理类内遵循UIViewControllerAnimatedTransitioning 2、在动画使用的类内遵循, UIViewControllerTransitioningDelegate以及UINavigationControllerDelegate协议，并实现其协议方法。
      如果你有什么更加炫酷的动画，只需要在JTAnimatedTransition内设置动画的位置写上自己想要的动画即可。