本文是投稿文章,作者:HenryCheng (简书上的链接: http://www.jianshu.com/p/8c29fce5a994)
@H_403_2@@H_403_2@ @H_403_2@ 一、前言 @H_403_2@ 用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下
@H_403_2@ 在iOS中,在同一个导航控制器你可以自定义转场动画实现两个vIEwController之间的过渡。实际上在iOS7之后,通过实现UIVIEwControllerAnimatedTransitioning或者UIVIEwControllerContextTransitioning协议,就可以简单的自定义转场动画,比如一个NavigationController的push和pop。还有一点你需要知道的是,我如果有一个矩形,有一个圆,想要在这个矩形上剪出和圆大小相同的面积,那么就要用到CALayer的mask属性,下面用图表达可能会直观些: @H_403_2@
laye.mask
@H_403_2@ 现在可能你对mask属性有一点了解了,下面代码的实现中你将会看到具体的实现过程。先做这么多了解,下面开始一步步实现效果。 @H_403_2@ 二、开始实现简单的push效果 @H_403_2@ 新建工程,这里用的是Swift,选中storyboard,然后加上一个导航,如下添加导航控制器
@H_403_2@ 然后效果如下去掉导航栏
@H_403_2@ 把右侧的Shows Navigation bar去掉,因为这个demo里面并不需要导航栏,同时保证Is Instal VIEw Controller是被勾上的(不知道的童鞋可以去掉看一下效果),这里默认的都是勾选上的。然后在新建一个vIEwController,并设置其继承于VIEwController,如下新建一个vIEwController
@H_403_2@ 然后在两个VC上分别在同样的位置添加两个完全相同的按钮,位置约束在右上角距离右边和上边分别为20,20的距离,为了区分,将这两个VC设置不同的背景色,如下按钮的约束位置以及大小
添加按钮以及背景色以后效果
@H_403_2@ 然后右键一直按住第一个按钮拖拽至第二个VC(也就是黄色背景的)点击show
实现第一个 VC 按钮点击方法
@H_403_2@ 这时候两个VC之间就会出现一条线,然后点击线中间,设置IDentifIEr为PushSegue,这里设置一个标识符,为后面的跳转做准备,效果如下:设置IDentifIEr
@H_403_2@ 将两个按钮连接成VIEwController的同一个属性,名为popBtn,然后将第二个VC的按钮实现一个点击方法(因为我们要pop回来)名为popClick,如下 @H_403_2@@H_404_155@importUIKit
classVIEwController:UIVIEwController{
@IBOutletweak
var
popBtn:UIbutton!
overrIDefuncvIEwDIDLoad(){
super
.vIEwDIDLoad()
//DoanyadditionalsetupafterloadingthevIEw,typicallyfromanib.
}
@IBActionfuncpopClick(sender:AnyObject){
self.navigationController?.popVIEwControllerAnimated(
true
)
}
overrIDefuncdIDReceiveMemoryWarning(){
super
.dIDReceiveMemoryWarning()
//dispoSEOfanyresourcesthatcanberecreated.
}
}
@H_403_2@ 最后,分别在两个VC的中间添加一个imageVIEw,最后的效果图如下 最后效果图
@H_403_2@ 如果到这里你还没错的话,那么运行一下你的工程,运行的效果将会是这样最后的运行效果图
@H_403_2@ 没错,也就是一个简单的push效果,现在准备工作已经做好了,想要实现放大效果的动画,还要继续往下进行。 @H_403_2@ 三、开始实现放大效果 @H_403_2@ 通过上面的步骤,我们已经做好了准备工作,我们还要知道的一点是,要想自定义导航的push或pop效果,需要实现UINavigationControllerDelegate协议里面的 @H_403_2@funcnavigationController(navigationController:UINavigationController,
interactionControllerForAnimationControlleranimationController:UIVIEwControllerAnimatedTransitioning)->UIVIEwControllerInteractiveTransitioning?{
return
nil
}
@H_403_2@ 这个协议方法,我们先新建一个继承于NSObject的名为HWNavigationDelegate的一个类,然后引入UINavigationControllerDelegate,实现上面的协议方法,使返回值暂时为nil(从上面代码中可以看出返回值是一个可选值,所以这里可以先用nil,待会再具体实现)。然后你的HWNavigationDelegate里面的代码大致如下 @H_403_2@ //
//HWNavigationDelegate.swift
//HWAnimationTransition_Swift
//
//CreatedbyHenryChengon16/3/16.
//copyright?2016年www.igancao.com.Allrightsreserved.
//
importUIKit
classHWNavigationDelegate:NSObject,UINavigationControllerDelegate{
funcnavigationController(navigationController:UINavigationController,animationControllerForOperationoperation:UINavigationControllerOperation,fromVIEwControllerfromVC:UIVIEwController,toVIEwControllertoVC:UIVIEwController)->UIVIEwControllerAnimatedTransitioning?{
return
nil;
}
@H_404_155@ }
@H_403_2@ 现在继续打开storyboard,然后在右下角搜索Object,并将其拖拽至左边Navigation Controller Source里, 添加Object
HWNavigationDelegate.png
@H_403_2@ 最后在左侧,点击UINavigationController,并将其delegate设置为刚才的Object设置导航的delegate
@H_403_2@ 现在上面HWNavigationDelegate里面导航的协议方法的返回值还是nil,我们需要创建一个实现动画效果的类,并使其返回,这里我们新建一个同样继承于NSObject的名为HWTransitionAnimator的类,并使其实现UIVIEwControllerAnimatedTransitioning协议,和其中的协议方法,为了便于阅读,这里贴出所有的代码, @H_403_2@//
//HWTransitionAnimator.swift
//HWAnimationTransition_Swift
//
//CreatedbyHenryChengon16/3/16.
//copyright?2016年www.igancao.com.Allrightsreserved.
//
importUIKit
classHWTransitionAnimator:NSObject,UIVIEwControllerAnimatedTransitioning{
weak
var
TransitionContext:UIVIEwControllerContextTransitioning?
funcTransitionDuration(TransitionContext:UIVIEwControllerContextTransitioning?)->NSTimeInterval{
return
0.5
}
@H_404_155@
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))
@H_404_155@
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_174_502@
maskLayerAnimation.duration=self.TransitionDuration(TransitionContext)
maskLayerAnimation.delegate=self
maskLayer.addAnimation(maskLayerAnimation,forKey:
"path"
)
}
overrIDefuncanimationDIDStop(anim:CAAnimation,finishedflag:Bool){
@H_404_155@
self.TransitionContext?.completeTransition(!self.TransitionContext!.TransitionWasCancelled())
self.TransitionContext?.vIEwControllerForKey(UITransitionContextFromVIEwControllerKey)?.vIEw.layer.mask=nil
}
}
@H_403_2@ 关于上面的所有代码,其中func animateTransition(TransitionContext: UIVIEwControllerContextTransitioning),func animateTransition(TransitionContext: UIVIEwControllerContextTransitioning)分别是设置时间和动画过程的方法,都是UIVIEwControllerAnimatedTransitioning的协议方法,func animationDIDStop是实现动画结束后的 *** 作,这里动画结束后需要做取消动画和将fromVIEwController释放掉的 *** 作。里面的 @H_403_2@ 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
@H_403_2@ 这段代码,下面第二段代码的maskLayer这个上面开始的时候就说过了,第一段代码其实就是一个计算的过程,求出最后大圆效果的半径,原理如图(粗糙的画了一下,画得不好见谅^_^) 动画效果关键的实现原理图
@H_403_2@ 最后将刚才HWNavigationDelegate里的协议方法返回值修改成HWTransitionAnimator的对象就可以了 return
HWTransitionAnimator()
}
@H_403_2@ 如果上面步骤,你 *** 作没错的话,运行工程效果如下
tap_swift
@H_403_2@ 四、添加手势引导动画 @H_403_2@ 添加手势实现动画效果,我们在刚才的HWNavigationDelegate类里实现UINavigationControllerDelegate的另外一个斜一方法 interactionControllerForAnimationControlleranimationController:UIVIEwControllerAnimatedTransitioning)->UIVIEwControllerInteractiveTransitioning?{
return
self.interactionController
}
设置导航属性
@H_403_2@ 然后重写awakeFromNib()方法,关于整个HWNavigationDelegate最后的代码实现,如下 @H_403_2@ // //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; @H_403_783@ } 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 } } } |
Begin :手势被识别时时,初始化UIPercentDrivenInteractiveTransition实例对象和设置属性,比如如果是第一个VC就实现push,反之则是pop
Changed:开始手势到结束手势的一个过程,上面代码中是根据偏移量改变self.interactionController的位置
Ended:手势结束以后的 *** 作,设置动画结束或者取消动画,最后将self.interactionController置为nil
default:其他的状态运行你的工程,拖拽屏幕时效果如下
pan_swift.gif
@H_403_2@ 五、最后 @H_403_2@ 由于最近工作比较忙,好久没有写博客了,趁着这回功夫将这个小动画分享一下,希望大家喜欢,时间不早了,该回去休息了(在公司加班完成的,喜欢的就star一下吧),最后,这里只是swift版本的代码,同时如果你需要全部代码的话,你可以在下面下载 @H_403_2@HWAnimationTransition_Swift(swift版本)
HWAnimationTransition_OC(OC版本)
总结以上是内存溢出为你收集整理的实现类似于格瓦拉启动页中的放大转场动画(OC&Swift)全部内容,希望文章能够帮你解决实现类似于格瓦拉启动页中的放大转场动画(OC&Swift)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)