整体结构##
封装一个基本转场动画的公共父类LZBBaseTransition.h,用于实现一些基本共同的操作 以及封装block回调,子类继承LZBBaseTransition，重写- (void)animateTransition:(id)transitionContext实现动画效果
LZBPageTransition.h 翻页效果
LZBBubbleTransition.h 气泡效果
LZBQQPhoneTransition.h 模拟QQ电话
LZBCustomModalTransition.h 自定义模态动画
LZBPresentDismissTransition.h 模拟系统的模态动画
LZBPushPopTransition.h 模拟系统的导航切换动画
这些可以直接分块使用，耦合性不高，代码包也不大
下载地址：各种转场动画github下载链接
自定义转场动画.gif
基本原理分析##
我们都应该了解一个基本的知识是为什么我们的push/pop以及模态动画能实现系统的转场视图切换？
原因：与转场代理有关。
模态切换视图与控制器的transitioningDelegate有关
导航切换与navigationController.delegate 有光
所以我们可以改变代理对象，并且重写转场的协议方法就可以实现自定义转场动画
以下这三个协议很重要，我是重写协议方法，转换为block回调（个人习惯而已）
UIViewControllerAnimatedTransitioning //转场动画协议
UIViewControllerTransitioningDelegate //转场代理协议
UINavigationControllerDelegate //导航代理协议
一般的实现步骤####
第一步：重写方法
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;
第二步：通过转场上下文拿到容器containerView
UIView *containerView = [transitionContext containerView];
第三步：拿到源控制器的View(A ->B,A是源控制器)，拿到目的控制器（B是目的控制器）的View,并增加到容器containerView中，注意顺序（一定是目的控制器的View在顶层），并都要设置frame
- (UIView *)fromView:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIView *fromView = nil;
//源控制器
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
if([transitionContext respondsToSelector:@selector(viewForKey:)])
{
fromView = [transitionContext viewForKey:UITransitionContextFromViewKey];
}
else
fromView = fromVC.view;
//初始位置的frame
fromView.frame = [transitionContext initialFrameForViewController:fromVC];
return fromView;
}
第四步：设置转场动画
功能实现详解析####
功能之高仿QQ电话切换效果#####
方法使用
twoQQPhoneViewController *twoVC = [[twoQQPhoneViewController alloc]init];
twoVC.modalPresentationStyle = UIModalPresentationCustom;
__weak typeof(self) weakSelf = self;
self.QQPhoneTransition = [[LZBQQPhoneTransition alloc]initWithPresent:^(UIViewController *presented, UIViewController *presenting, UIViewController *sourceVC, LZBBaseTransition *transition) {
LZBQQPhoneTransition *modalQQ = (LZBQQPhoneTransition*)transition;
modalQQ.targetView = weakSelf.presentButton;
} Dismiss:^(UIViewController *dismissVC, LZBBaseTransition *transition) {
}];
twoVC.transitioningDelegate = self.QQPhoneTransition;
[self presentViewController:twoVC animated:YES completion:nil];
由此可以见，自定义转场动画，只是改变了控制器的转场代理，其实我只是把操作都封装在了LZBQQPhoneTransition里面，所以看起来简单。现在就来看看LZBQQPhoneTransition这里面都在干什么。
第一步：LZBQQPhoneTransition 设置参数的初始化值
-(instancetype)initWithPresent:(LZBBaseTransitionPresent)presentCallBack Dismiss:(LZBBaseTransitionDismiss)dismissCallBack
{
if(self = [super initWithPresent:presentCallBack Dismiss:dismissCallBack])
{
self.scale = 3.0;
}
return self;
}
第二步：调用转场动画的代理方法
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIView *containerView = [transitionContext containerView];
if(containerView == nil) return;
self.transitionContext = transitionContext;
if(self.transitionType == kLZBBaseTransitionStyle_Present)
{
[self animationPresentTrasition:transitionContext WithContainerView:containerView];
}
else
{
[self animationDismissTrasition:transitionContext WithContainerView:containerView];
}
}
第三步：核心是过渡的动画，所以第三步才是关键哦
present 过程是动画组 + 形状层的CABasicAnimation做成的，对于想了解动画的朋友有帮助哦
首先是画动画路径
//画移动曲线
CGPoint startPoint = self.targetView.center;
CGPoint endPoint = toView.center;
CGPoint controlPoint = CGPointMake(self.targetView.center.x, [UIScreen mainScreen].bounds.size.height * 0.5);
UIBezierPath *animationPath = [[UIBezierPath alloc]init];
[animationPath moveToPoint:startPoint];
[animationPath addQuadCurveToPoint:endPoint controlPoint:controlPoint];
然后在移动过程中还需要放大，所以有增加transform动画
//增加动画
CAAnimationGroup *group = [self groupAnimationWithBezierPath:animationPath durationTime:1.0 transform:CATransform3DMakeScale(self.scale, self.scale, 1)];
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
//用于后面找到这组动画
[group setValue:@"onePresentGroup" forKey:@"groupAnimation"];
[self.targetView.layer addAnimation:group forKey:@"keyAniamition"];
第一个动画组完成之后，才是过渡切换视图动画（监听使用动画的代理方法-animationDidStop:(CAAnimation *)anim finished:(BOOL)flag）完成转场动画
转场动画
//用曲线画两个圆 -开始圆 + 结束圆
//求出半径
CGFloat radius = sqrtf(containerView.frame.size.height *containerView.frame.size.height + containerView.frame.size.width *containerView.frame.size.width)*0.5;
//根据半径画 - 结束圆
UIBezierPath *endCircle = [UIBezierPath bezierPathWithArcCenter:containerView.center radius:radius startAngle:0 endAngle:2*M_PI clockwise:YES];
//QQPhone动画开始圆
UIBezierPath *startCicle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(([UIScreen mainScreen].bounds.size.width - self.targetView.frame.size.width * self.scale)*0.5, ([UIScreen mainScreen].bounds.size.height - self.targetView.frame.size.height * self.scale)*0.5 , self.targetView.frame.size.width*self.scale, self.targetView.frame.size.height*self.scale)];
//创建动画的形状层
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = endCircle.CGPath;
toVC.view.layer.mask = maskLayer;
//创建过度路径动画
CABasicAnimation *laryerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
laryerAnimation.fromValue =(__bridge id )startCicle.CGPath;
laryerAnimation.toValue =(__bridge id )endCircle.CGPath;
laryerAnimation.duration = 1.0;
laryerAnimation.delegate = self;
[maskLayer addAnimation:laryerAnimation forKey:@"path"];
self.targetView.hidden = YES;
toVC.view.alpha = 1.0;
以上只是实现的核心思想，具体实现可以看看源代码下载地址各种转场动画github下载链接
最后赠言###
如果觉得文章对您有帮助，不要忘记star哦!😝，star 是对程序猿最大的鼓励！
参考链接：标哥技术
网友评论