效果展示
自定义转场动画效果
实现思路
- 实现UINavigationControllerDelegate，利用一个类去定义我们的转场动画
- 利用贝塞尔话两个圆，一个小圆一个大圆，他们的中心都是一样的，然后根据不同的界面做对应的放大和缩小动画
总结 : 1.实现相关转场动画协议 2.就是添加转场动画
准备工作
#import "DNCircleTransition.h"
@interface ViewController ()<UINavigationControllerDelegate>
需要实现的控制器需要实现的协议和注意点
- 需要创建一个类来实现一个UIViewControllerAnimatedTransitioning 这个协议
- 当前的控制器需要遵从UINavigationControllerDelegate 协议
- 需要在控制器将要显示的时候设置代理，不然不会走代理方法
补充:DNCircleTransition 这个类是NSObject类 里面遵从了UIViewControllerAnimatedTransitioning这个协议
- (void)viewWillAppear:(BOOL)animated{
self.navigationController.delegate = self;
}
实现的代理方法
#pragma mark - UINavigationControllerDelegate
//就是告诉nav，我不需要自带的转场动画了，我想自定义转场动画
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
if (operation == UINavigationControllerOperationPush) {
DNCircleTransition *trans = [DNCircleTransition new];
trans.isPush = YES;
return trans;
}else{
return nil;
}
}
- 重点:
就是告诉nav，我不需要自带的转场动画了，我想自定义转场动画
DNCircleTransition 需要实现的事情
-
Mark - UIViewControllerContextTransitioning
//转场动画的时间
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
return .8f;
}
- 这个是转场动画的时间设置
-
核心代码
//在此方法中实现具体的转场动画
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
/*
拆分：
1.2个圆（重点：半径，中心点）
2.添加动画
*/
//1.持有上下文
_context = transitionContext;
//2.获取一个view的容器
UIView *containerView = [transitionContext containerView];
//3.获取tovc的view，然后添加到容器里面
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
// [containerView addSubview:toVC.view];
//4.添加动画
UIButton *btn;
ViewController *VC1;
DNBlackViewController *VC2;
if (_isPush) {
VC1 = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
VC2 = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
btn = VC1.blackBtn;
}else{
VC2 = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
VC1 = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
btn = VC2.redBtn;
}
[containerView addSubview:VC1.view];
[containerView addSubview:VC2.view];
// ViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
// UIButton *btn = fromVC.blackBtn;
//5.画一个小圆(大小圆的中心点是一样)
UIBezierPath *smallPath = [UIBezierPath bezierPathWithOvalInRect:btn.frame];
//6.中心点
CGPoint centerP;
centerP = btn.center;
//7.求大圆的半径
CGFloat radius;
//8.判断按钮在哪个象限
CGFloat y = CGRectGetHeight(toVC.view.frame)-btn.center.y;
CGFloat x = CGRectGetWidth(toVC.view.frame) - btn.center.x;
if (btn.frame.origin.x > CGRectGetWidth(toVC.view.frame)/2) {
if (btn.frame.origin.y < CGRectGetHeight(toVC.view.frame)/2) {
//1
radius = sqrtf(btn.center.x*btn.center.x + y*y);
}else{
//4
radius = sqrtf(btn.center.x*btn.center.x + btn.center.y*btn.center.y);
}
}else{
if (CGRectGetMaxY(btn.frame) < CGRectGetHeight(toVC.view.frame)/2) {
//2
radius = sqrtf(x*x + y*y);
}else{
//3
radius = sqrtf(btn.center.y*btn.center.y + x*x);
}
}
//9.用贝塞尔画大圆
UIBezierPath *bigPath = [UIBezierPath bezierPathWithArcCenter:centerP radius:radius startAngle:0 endAngle:M_PI*2 clockwise:YES];
//10.把path添加到layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
if (_isPush) {
shapeLayer.path = bigPath.CGPath;
}else{
shapeLayer.path = smallPath.CGPath;
}
// [toVC.view.layer addSublayer:shapeLayer];
//11.蒙板
UIViewController *VC;
if (_isPush) {
VC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
}else{
VC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
}
VC.view.layer.mask = shapeLayer;
//12.动画
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"path";
if (_isPush) {
anim.fromValue = (id)smallPath.CGPath;
}else{
anim.fromValue = (id)bigPath.CGPath;
}
// anim.toValue = bigPath;
anim.delegate = self;
[shapeLayer addAnimation:anim forKey:nil];
}
-
动画结束
#pragma mark - CAAnimationDelegate
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
[_context completeTransition:YES];
UIViewController *VC;
if (_isPush) {
VC = [_context viewControllerForKey:UITransitionContextToViewControllerKey];
}else{
VC = [_context viewControllerForKey:UITransitionContextFromViewControllerKey];
}
VC.view.layer.mask = nil;
}
-
要点说明
- 这里的重点是需要判断是push还是pop,来处理需要哪个控制器做动画处理
- layer不是添加在视图的layer上面，而是要添加在蒙版上面
- 蒙版的获取和移除
- 如果已经指定了最后的路径就没必要在写了，不然还要添加两个方法，remove 最后动画不移除
- 画圆的时候需要注意一个象限的判断，因为获取大圆的半径是不同计算的
- 动画是在容器里面处理的
- 需要记录是push还是pop类型，需要处理的控制器对象不同（_isPush）
-
关于象限的演示和说明
利用勾股定律计算出大圆半径
交互点在第一象限
注意不同象限计算的方法
