实现类似于格瓦拉启动页中的放大转场动画（OC&Swift）

Swift 前端之家
前端之家收集整理的这篇文章主要介绍了实现类似于格瓦拉启动页中的放大转场动画（OC&Swift），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文是投稿文章，作者：HenryCheng （简书上的链接： http://www.jianshu.com/p/8c29fce5a994）@H_403_1@


@H_403_1@

@H_403_1@

一、前言@H_403_1@

用过格瓦拉电影，或者其他app可能都知道，一种点击按钮用放大效果实现转场的动画现在很流行，效果大致如下@H_403_1@

@H_403_1@

在iOS中，在同一个导航控制器你可以自定义转场动画实现两个viewController之间的过渡。实际上在iOS7之后，通过实现UIViewControllerAnimatedTransitioning或者UIViewControllerContextTransitioning协议，就可以简单的自定义转场动画，比如一个NavigationController的push和pop。还有一点你需要知道的是，我如果有一个矩形，有一个圆，想要在这个矩形上剪出和圆大小相同的面积，那么就要用到CALayer的mask属性，下面用图表达可能会直观些：@H_403_1@

@H_403_1@

laye.mask@H_403_1@

现在可能你对mask属性有一点了解了，下面代码的实现中你将会看到具体的实现过程。先做这么多了解，下面开始一步步实现效果。@H_403_1@

二、开始实现简单的push效果@H_403_1@

新建工程，这里用的是Swift，选中storyboard,然后加上一个导航，如下@H_403_1@

添加导航控制器@H_403_1@

然后效果如下@H_403_1@

去掉导航栏@H_403_1@

把右侧的Shows Navigation Bar去掉，因为这个demo里面并不需要导航栏，同时保证Is Instal View Controller是被勾上的（不知道的童鞋可以去掉看一下效果），这里默认的都是勾选上的。然后在新建一个viewController，并设置其继承于ViewController，如下@H_403_1@

新建一个viewController@H_403_1@

然后在两个VC上分别在同样的位置添加两个完全相同的按钮，位置约束在右上角距离右边和上边分别为20，20的距离，为了区分，将这两个VC设置不同的背景色，如下@H_403_1@

按钮的约束位置以及大小@H_403_1@

添加按钮以及背景色以后效果@H_403_1@

然后右键一直按住第一个按钮拖拽至第二个VC（也就是黄色背景的）点击show@H_403_1@


@H_403_1@

实现第一个 VC 按钮点击方法@H_403_1@

这时候两个VC之间就会出现一条线，然后点击线中间，设置identifier为PushSegue，这里设置一个标识符，为后面的跳转做准备，效果如下：@H_403_1@

设置identifier@H_403_1@

将两个按钮连接成ViewController的同一个属性，名为popBtn，然后将第二个VC的按钮实现一个点击方法（因为我们要pop回来）名为popClick，如下@H_403_1@


@H_403_1@

importUIKit
classViewController:UIViewController{
@IBOutletweak var popBtn:UIButton!
overridefuncviewDidLoad(){
super .viewDidLoad()
//Doanyadditionalsetupafterloadingtheview,typicallyfromanib.
}
@IBActionfuncpopClick(sender:AnyObject){
@H_404_120@
self.navigationController?.popViewControllerAnimated( true )
}
overridefuncdidReceiveMemoryWarning(){
super .didReceiveMemoryWarning()
//DispoSEOfanyresourcesthatcanberecreated.
}
}

最后，分别在两个VC的中间添加一个imageView，最后的效果图如下@H_403_1@

最后效果图@H_403_1@

如果到这里你还没错的话，那么运行一下你的工程，运行的效果将会是这样
@H_403_1@

最后的运行效果图@H_403_1@

没错，也就是一个简单的push效果，现在准备工作已经做好了，想要实现放大效果的动画，还要继续往下进行。@H_403_1@

三、开始实现放大效果@H_403_1@

通过上面的步骤，我们已经做好了准备工作，我们还要知道的一点是，要想自定义导航的push或pop效果，需要实现UINavigationControllerDelegate协议里面的@H_403_1@

funcnavigationController(navigationController:UINavigationController,
interactionControllerForAnimationControlleranimationController:UIViewControllerAnimatedTransitioning)->UIViewControllerInteractiveTransitioning?{
return nil
}

这个协议方法，我们先新建一个继承于NSObject的名为HWNavigationDelegate的一个类，然后引入UINavigationControllerDelegate,实现上面的协议方法，使返回值暂时为nil（从上面代码中可以看出返回值是一个可选值，所以这里可以先用nil，待会再具体实现）。然后你的HWNavigationDelegate里面的代码大致如下@H_403_1@

//
//HWNavigationDelegate.swift
//HWAnimationTransition_Swift
//
//CreatedbyHenryChengon16/3/16.
//Copyright?2016年www.igancao.com.Allrightsreserved.
//
importUIKit
classHWNavigationDelegate:NSObject,UINavigationControllerDelegate{
@H_404_120@
funcnavigationController(navigationController:UINavigationController,animationControllerForOperationoperation:UINavigationControllerOperation,fromViewControllerfromVC:UIViewController,toViewControllertoVC:UIViewController)->UIViewControllerAnimatedTransitioning?{
return nil;
}
}

现在继续打开storyboard，然后在右下角搜索Object，并将其拖拽至左边Navigation Controller Source里，@H_403_1@

添加Object
@H_403_1@

并在选中Object，在右边将其类改成刚刚创建的HWNavigationDelegate@H_403_1@

HWNavigationDelegate.png@H_403_1@

最后在左侧，点击UINavigationController，并将其delegate设置为刚才的Object@H_403_1@

设置导航的delegate@H_403_1@

现在上面HWNavigationDelegate里面导航的协议方法的返回值还是nil，我们需要创建一个实现动画效果的类，并使其返回，这里我们新建一个同样继承于NSObject的名为HWTransitionAnimator的类，并使其实现UIViewControllerAnimatedTransitioning协议，和其中的协议方法，为了便于阅读，这里贴出所有的代码，@H_403_1@

//
//HWTransitionAnimator.swift
//HWAnimationTransition_Swift
//
//CreatedbyHenryChengon16/3/16.
//Copyright?2016年www.igancao.com.Allrightsreserved.
//
importUIKit
classHWTransitionAnimator:NSObject,UIViewControllerAnimatedTransitioning{
@H_404_120@ weak var transitionContext:UIViewControllerContextTransitioning?
functransitionDuration(transitionContext:UIViewControllerContextTransitioning?)->NSTimeInterval{
return 0.5
}
funcanimateTransition(transitionContext:UIViewControllerContextTransitioning){
self.transitionContext=transitionContext
letcontainerView=transitionContext.containerView()
letfromVC=transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)as!ViewController
lettoVC=transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)as!ViewController
letbutton=fromVC.popBtn
containerView?.addSubview(toVC.view)
letcircleMaskPathInitial=UIBezierPath(ovalInRect:button.frame)
letextremePoint=CGPoint(x:button.center.x-0,y:button.center.y-CGRectGetHeight(toVC.view.bounds))
letradius=sqrt((extremePoint.x*extremePoint.x)+(extremePoint.y*extremePoint.y))
letcircleMaskPathFinal=UIBezierPath(ovalInRect:CGRectInset(button.frame,-radius,-radius))
letmaskLayer=CAShapeLayer()
maskLayer.path=circleMaskPathFinal.CGPath
toVC.view.layer.mask=maskLayer
letmaskLayerAnimation=CABasicAnimation(keyPath: "path" )
maskLayerAnimation.fromValue=circleMaskPathInitial.CGPath
maskLayerAnimation.toValue=circleMaskPathFinal.CGPath
@H_454_502@ maskLayerAnimation.duration=self.transitionDuration(transitionContext)
maskLayerAnimation.delegate=self
maskLayer.addAnimation(maskLayerAnimation,forKey: "path" )
}
overridefuncanimationDidStop(anim:CAAnimation,finishedflag:Bool){
self.transitionContext?.completeTransition(!self.transitionContext!.transitionWasCancelled())
self.transitionContext?.viewControllerForKey(UITransitionContextFromViewControllerKey)?.view.layer.mask=nil
}
}

关于上面的所有代码，其中func animateTransition(transitionContext: UIViewControllerContextTransitioning)，func animateTransition(transitionContext: UIViewControllerContextTransitioning)分别是设置时间和动画过程的方法，都是UIViewControllerAnimatedTransitioning的协议方法，func animationDidStop是实现动画结束后的操作，这里动画结束后需要做取消动画和将fromViewController释放掉的操作。里面的@H_403_1@

letcircleMaskPathInitial=UIBezierPath(ovalInRect:button.frame)
letextremePoint=CGPoint(x:button.center.x-0,y:button.center.y-CGRectGetHeight(toVC.view.bounds))
letradius=sqrt((extremePoint.x*extremePoint.x)+(extremePoint.y*extremePoint.y))
letcircleMaskPathFinal=UIBezierPath(ovalInRect:CGRectInset(button.frame,-radius))
letmaskLayer=CAShapeLayer()
maskLayer.path=circleMaskPathFinal.CGPath
toVC.view.layer.mask=maskLayer

这段代码，下面第二段代码的maskLayer这个上面开始的时候就说过了，第一段代码其实就是一个计算的过程，求出最后大圆效果的半径，原理如图（粗糙的画了一下，画得不好见谅^_^）@H_403_1@

动画效果关键的实现原理图@H_403_1@

最后将刚才HWNavigationDelegate里的协议方法返回值修改成HWTransitionAnimator的对象就可以了@H_403_1@

return HWTransitionAnimator()

}

如果上面步骤，你操作没错的话，运行工程效果如下@H_403_1@

tap_swift@H_403_1@

四、添加手势引导动画@H_403_1@

添加手势实现动画效果，我们在刚才的HWNavigationDelegate类里实现UINavigationControllerDelegate的另外一个斜一方法@H_403_1@

interactionControllerForAnimationControlleranimationController:UIViewControllerAnimatedTransitioning)->UIViewControllerInteractiveTransitioning?{

return self.interactionController
}


@H_403_1@

这里的self.interactionController就是我们的导航控制器，如下图@H_403_1@

设置导航属性@H_403_1@

然后重写awakeFromNib()方法，关于整个HWNavigationDelegate最后的代码实现，如下@H_403_1@

//
//HWNavigationDelegate.swift
//HWAnimationTransition_Swift
//
//CreatedbyHenryChengon16/3/16.
//Copyright?2016年www.igancao.com.Allrightsreserved.
//
importUIKit
classHWNavigationDelegate:NSObject,UINavigationControllerDelegate{
@IBOutletweak var navigationController:UINavigationController!
var interactionController:UIPercentDrivenInteractiveTransition?
funcnavigationController(navigationController:UINavigationController,
interactionControllerForAnimationControlleranimationController:UIViewControllerAnimatedTransitioning)->UIViewControllerInteractiveTransitioning?{
return self.interactionController
}
funcnavigationController(navigationController:UINavigationController,toViewControllertoVC:UIViewController)->UIViewControllerAnimatedTransitioning?{
return HWTransitionAnimator()
//returnnil;
}
overridefuncawakeFromNib(){
super .awakeFromNib()
letpanGesture=UIPanGestureRecognizer(target:self,action:Selector( "panned:" ))
self.navigationController.view.addGestureRecognizer(panGesture)
}
funcpanned(gestureRecognizer:UIPanGestureRecognizer){
switch gestureRecognizer.state{
case .Began:
self.interactionController=UIPercentDrivenInteractiveTransition()
if self.navigationController?.viewControllers.count>1{
self.navigationController?.popViewControllerAnimated( true )
} else {
self.navigationController?.topViewController!.performSegueWithIdentifier( "PushSegue" ,sender:nil)
}
case .Changed:
lettranslation=gestureRecognizer.translationInView(self.navigationController!.view)
letcompletionProgress=translation.x/CGRectGetWidth(self.navigationController!.view.bounds)
self.interactionController?.updateInteractiveTransition(completionProgress)
case .Ended:
if (gestureRecognizer.velocityInView(self.navigationController!.view).x>0){
self.interactionController?.finishInteractiveTransition()
} else {
self.interactionController?.cancelInteractiveTransition()
}
self.interactionController=nil
default :
self.interactionController?.cancelInteractiveTransition()
self.interactionController=nil
}
}
}

这里需要注意的是gestureRecognizer的几个状态@H_403_1@


@H_403_1@

pan_swift.gif@H_403_1@

五、最后@H_403_1@

由于最近工作比较忙，好久没有写博客了，趁着这回功夫将这个小动画分享一下，希望大家喜欢，时间不早了，该回去休息了（在公司加班完成的，喜欢的就star一下吧），最后，这里只是swift版本的代码，同时如果你需要全部代码的话，你可以在下面下载@H_403_1@

  • HWAnimationTransition_Swift（swift版本）@H_403_1@

  • HWAnimationTransition_OC(OC版本)@H_403_1@

    • 猜你在找的Swift相关文章

    Swift 正式开源，同时开源 Swfit 核心库和包管理器
    Swift 正式开源！Swift 团队很高兴宣布 Swift 开始开源新篇章。自从苹果发布 Swfit 编程语...
    Swift开源短短一天不到Github就有9000多star
    快，快，快！动动您的小手，分享给更多朋友！ 苹果去年推出了全新的编程语言Swift，试图让...
    苹果的Swift语言开源了！
    开发者（KaiFaX） 面向开发者、程序员的专业平台！ 和今年年初承诺的一样，苹果贴出了Swif...
    使用 Swift 构建自定义的ActivityIndicator View
    本文由@Chun发表于Chun Tips ：http://chun.tips/blog/2014/12/11/shi-yong-swift-gou-jia...
    Swift中编写单例的正确方式
    本文由CocoaChina译者leon(社区ID)翻译 原文：THE RIGHT WAY TO WRITE A SINGLETON 在之前...
    Swift中编写单例的正确方式
    本文由CocoaChina译者leon(社区ID)翻译 原文：THE RIGHT WAY TO WRITE A SINGLETON 在之前...
    Swift 的 NSDate 初学者指南
    译者：ray16897188；校对：numbbbbb；定稿：Cee 如果问我在做过的所有项目中做的最多的事情...
    10 个最佳的 Swift 教程实例
    ★ 时间就是金钱。你可以一开始就使用正确的 Swift 教程来节省时间。本文中提到的教程都是...
    Swift Package Manager快速上手指南（一）：环境搭建
    CSDN移动将持续为您优选移动开发的精华内容，共同探讨移动开发的技术热点话题，涵盖移动应...
    编写高性能的 Swift 代码
    下面这篇文档收集了一系列编写高性能 Swift 代码的要诀和技巧。文档的目标读者是编译器和标...
    iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
    调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签