关于自己定义转场动画,我都告诉你。
2017-07-11 09:42
260 查看
原文出处: 伯恩的遗产(@翁呀伟呀 )
这篇文章,我将讲述几种转场动画的自己定义方式。而且每种方式附上一个演示样例。毕竟代码才是我们的语言。这样比較easy上手。当中主要有下面三种自己定义方法,供大家參考:
Push & Pop
Modal
Segue
前两种大家都非常熟悉,第三种是
首先说一下
创建一个文件继承自
实现该协议的两个基本方法:
遵守
在此方法中指定所用的
解决方法为:
在 第1步 中。创建两个文件。一个用于
到这里就能够看到转场动画的效果了。可是大家都知道,系统默认的
幸运的是,Cocoa 已经集成了相关方法。我们仅仅用告诉它百分比就能够了。所下面一步就是 [b]手势驱动。[/b]
在第二个
创建一个
在手势的监听方法中计算手势移动的百分比,并使用
最后在手势的
实现
至此,Push 和 Pop 方式的自己定义就完毕了。详细细节看以下的演示样例。
此演示样例来自 Kitten Yang 的blog 实现Keynote中的奇妙移动效果,我将其用 Swift 实现了一遍,源码地址: MagicMove,以下是执行效果。
MagicMove.gif
创建两个
在
在
在
在
mm_inital.png
加入一个
实现协议的两个方法,并在当中编写
让
在
实现
在
在发送
至此。在点击 Cell 后,就会运行刚刚自己定义的动画了。接下来就要增加手势驱动。
在
在手势监听方法中。创建
实现返回
OK,到如今。手势驱动就写好了,可是还不能使用,由于还没有实现 Pop 方法!
如今自己去实现 Pop 动画吧!
请參考源码:MagicMove
modal转场方式即使用
创建一个文件继承自
实现该协议的两个基本方法:
以上两个步骤和
假设使用
在第一个 VC 的
由 [b]第3步 中两个方法就能够知道,在创建转场动画时,最好也创建两个动画类,一个用于 Present。 一个用于 Dismiss。假设仅仅创建一个动画类,就须要在实现动画的时候推断是
这时。转场动画就能够实现了,接下来就手势驱动了
在第一个 VC 中创建一个
实现
至此,
此演示样例和上面一个演示样例一样,来自 Kitten Yang 的blog 实现3D翻转效果,我也将其用 Swift 实现了一遍,相同我的源码地址:FlipTransion,执行效果例如以下:
FlipTransion.gif
创建两个
并在
分别给两个视图加入两个
分别给两个控制器加入两个button。第一个button拖线到第二个控制器,第二个控制器绑定一个方法用来dismiss。
ft_inital.png
加入一个
实现协议的两个方法。并在当中编写
动画的过程我就不多说了,细致看就会明确。
让
实现
OK。假设你完毕了Pop动画,那么如今就能够实现自己定义 Modal 转场了。
如今仅仅差手势驱动了。
想要同一时候实现
首先在
实现监听方法,不多说,和之前一样,但还是有细致看,由于本演示样例中转场动画比較特殊,并且有两个手势,所以这里计算百分比使用的是
实现
如今,基于
这样的方法比較特殊。是将
首先我们来看看
以上是
从中能够看出,仅仅有一个方法
再注意它的其它属性:
仅仅有一点须要注意:在拖线的时候,注意在弹出的选项中选择
然后就能够和自己定义的
那么,问题来了,这里仅仅有
因为
解除转场(unwind segue)通常和正常自己定义转场(segue)一起出现。
要解除转场起作用,我们必须重写perform方法,并应用自己定义动画。
另外,导航返回源视图控制器的过渡效果不须要和相应的正常转场同样。
其 实现步骤 为:
创建一个
解除转场的创建。设置的配置。这和之前的转场创建不太一样。等下我们将看看这个是怎么实现的。
通过重写
当然。这么说有一些让人琢磨不透,不知道什么意思。那么。以下再通过一个演示样例来深入了解一下。
这个演示样例是我自己写的,源码地址:SegueTransion,开门见山,直接上图。
SegueTransion.gif
创建两个
并在
分别给两个控制器加入背景图片或使用不同的背景色,用以区分。
在
st_inital.png
加入一个
重写
还是一样。动画的过程自己看,都是非常easy的。
这里须要注意。使用这样的方式自己定义的转场动画不能动态手势驱动,也就是说不能依据手势百分比动态改变动画完毕度。
所以。这里仅仅是简单的加入一个滑动手势(swip)。
在
实现手势监听方法:
如今已经能够 [b]present 了。接下来实现
在
在
st_unwind.png
在
st_unwindSegue.png
再加入一个
在
最后一步。在
给
一张图总结一下3种方法的异同点。
http://cxy.liuzhihengseo.com/456.html
问啊-定制化IT教育平台,牛人一对一服务,有问必答。开发编程社交头条 官方站点:www.wenaaa.com 下载问啊APP,參与官方悬赏,赚百元现金。
QQ群290551701 聚集非常多互联网精英,技术总监,架构师,项目经理!开源技术研究,欢迎业内人士,大牛及新手有志于从事IT行业人员进入!
概述
这篇文章,我将讲述几种转场动画的自己定义方式。而且每种方式附上一个演示样例。毕竟代码才是我们的语言。这样比較easy上手。当中主要有下面三种自己定义方法,供大家參考:Push & Pop
Modal
Segue
前两种大家都非常熟悉,第三种是
Stroyboard中的拖线,属于
UIStoryboardSegue类,通过继承这个类来自己定义转场过程动画。
Push & Pop
首先说一下 Push & Pop这样的转场的自己定义。操作过程例如以下:
创建一个文件继承自
NSObject, 并遵守
UIViewControllerAnimatedTransitioning协议。
实现该协议的两个基本方法:
1 2 3 4 | //指定转场动画持续的时长 func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval //转场动画的详细内容 func animateTransition(transitionContext: UIViewControllerContextTransitioning) |
UINavigationControllerDelegate协议,并实现此方法:
1 | func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? |
UIViewControllerAnimatedTransitioning,即返回 第1步 中创建的类。注意:因为须要
Push和
Pop。所以须要两套动画方案。
解决方法为:
在 第1步 中。创建两个文件。一个用于
Push动画,一个用于
Pop动画。然后 第3步 中在返回动画类之前,先推断动画方式(Push 或 Pop), 使用
operation == UINavigationControllerOperation.Push就可以推断,最后依据不同的方式返回不同的类。
到这里就能够看到转场动画的效果了。可是大家都知道,系统默认的
Push 和 Pop动画都支持手势驱动,而且能够依据手势移动距离改变动画完毕度。
幸运的是,Cocoa 已经集成了相关方法。我们仅仅用告诉它百分比就能够了。所下面一步就是 [b]手势驱动。[/b]
在第二个
UIViewController中给
View加入一个滑动(Pan)手势。
创建一个
UIPercentDrivenInteractiveTransition属性。
在手势的监听方法中计算手势移动的百分比,并使用
UIPercentDrivenInteractiveTransition属性的
updateInteractiveTransition()方法实时更新百分比。
最后在手势的
state为
ended或
cancelled时,依据手势完毕度决定是还原动画还是结束动画,使用
UIPercentDrivenInteractiveTransition属性的
cancelInteractiveTransition()或
finishInteractiveTransition()方法。
实现
UINavigationControllerDelegate中的还有一个返回
UIViewControllerInteractiveTransitioning的方法,并在当中返回
第4步创建的
UIPercentDrivenInteractiveTransition属性。
至此,Push 和 Pop 方式的自己定义就完毕了。详细细节看以下的演示样例。
自己定义 Push & Pop 演示样例
此演示样例来自 Kitten Yang 的blog 实现Keynote中的奇妙移动效果,我将其用 Swift 实现了一遍,源码地址: MagicMove,以下是执行效果。MagicMove.gif
初始化
创建两个 ViewController,一个继承自
UICollectionViewController,取名
ViewController。还有一个继承
UIViewController,取名
DetailViewController。
在
Stroyboard中创建并绑定。
在
Stroyboard中拖一个
UINavigationController。删去默认的 rootViewController,使
ViewController作为其 rootViewController。再拖一条从
ViewController到
DetailViewController的 segue。
在
ViewController中自己定义
UICollectionViewCell,加入
UIImageView和
UILabel。
在
DetailViewController中加入
UIImageView和
UITextView
mm_inital.png
加入 UIViewControllerAnimatedTransitioning
加入一个 Cocoa Touch Class。继承自
NSObject,取名
MagicMoveTransion。遵守
UIViewControllerAnimatedTransitioning协议。
实现协议的两个方法,并在当中编写
Push的动画。 详细的动画实现过程都在代码的凝视里 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval { return 0.5 } func animateTransition(transitionContext: UIViewControllerContextTransitioning) { //1.获取动画的源控制器和目标控制器 let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! ViewController let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! DetailViewController let container = transitionContext.containerView() //2.创建一个 Cell 中 imageView 的截图。并把 imageView 隐藏,造成使用户以为移动的就是 imageView 的假象 let snapshotView = fromVC.selectedCell.imageView.snapshotViewAfterScreenUpdates(false) snapshotView.frame = container.convertRect(fromVC.selectedCell.imageView.frame, fromView: fromVC.selectedCell) fromVC.selectedCell.imageView.hidden = true //3.设置目标控制器的位置,并把透明度设为0,在后面的动画中慢慢显示出来变为1 toVC.view.frame = transitionContext.finalFrameForViewController(toVC) toVC.view.alpha = 0 //4.都加入到 container 中。注意顺序不能错了 container.addSubview(toVC.view) container.addSubview(snapshotView) //5.运行动画 UIView.animateWithDuration(transitionDuration(transitionContext), delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in snapshotView.frame = toVC.avatarImageView.frame toVC.view.alpha = 1 }) { (finish: Bool) -> Void in fromVC.selectedCell.imageView.hidden = false toVC.avatarImageView.image = toVC.image snapshotView.removeFromSuperview() //一定要记得动画完毕后运行此方法,让系统管理 navigation transitionContext.completeTransition(true) } } |
使用动画
让 ViewController遵守
UINavigationControllerDelegate协议。
在
ViewController中设置
NavigationController的代理为自己:
1 2 3 4 5 | override func viewDidAppear(animated: Bool) { super.viewDidAppear(animated) self.navigationController?.delegate = self } |
UINavigationControllerDelegate协议方法:
1 2 3 4 5 6 7 | func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation, fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? { if operation == UINavigationControllerOperation.Push { return MagicMoveTransion() } else { return nil } } |
ViewController的
controllerCell的点击方法中,发送
segue
1 2 3 4 5 | override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { self.selectedCell = collectionView.cellForItemAtIndexPath(indexPath) as! MMCollectionViewCell self.performSegueWithIdentifier("detail", sender: nil) } |
segue的时候。把点击的
image发送给
DetailViewController
1 2 3 4 5 6 | override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { if segue.identifier == "detail" { let detailVC = segue.destinationViewController as! DetailViewController detailVC.image = self.selectedCell.imageView.image } } |
至此。在点击 Cell 后,就会运行刚刚自己定义的动画了。接下来就要增加手势驱动。
手势驱动
在 DetailViewController的
ViewDidAppear()方法中。增加滑动手势。
1 2 3 | let edgePan = UIScreenEdgePanGestureRecognizer(target: self, action: Selector("edgePanGesture:")) edgePan.edges = UIRectEdge.Left self.view.addGestureRecognizer(edgePan) |
UIPercentDrivenInteractiveTransition属性,并实现手势百分比更新。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | func edgePanGesture(edgePan: UIScreenEdgePanGestureRecognizer) { let progress = edgePan.translationInView(self.view).x / self.view.bounds.width if edgePan.state == UIGestureRecognizerState.Began { self.percentDrivenTransition = UIPercentDrivenInteractiveTransition() self.navigationController? .popViewControllerAnimated(true) } else if edgePan.state == UIGestureRecognizerState.Changed { self.percentDrivenTransition?.updateInteractiveTransition(progress) } else if edgePan.state == UIGestureRecognizerState.Cancelled || edgePan.state == UIGestureRecognizerState.Ended { if progress > 0.5 { self.percentDrivenTransition?.finishInteractiveTransition() } else { self.percentDrivenTransition?.cancelInteractiveTransition() } self.percentDrivenTransition = nil } } |
UIViewControllerInteractiveTransitioning的方法并返回刚刚创建的
UIPercentDrivenInteractiveTransition属性。
1 2 3 4 5 6 7 | func navigationController(navigationController: UINavigationController, interactionControllerForAnimationController animationController: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? { if animationController is MagicMovePopTransion { return self.percentDrivenTransition } else { return nil } } |
OK,到如今。手势驱动就写好了,可是还不能使用,由于还没有实现 Pop 方法!
如今自己去实现 Pop 动画吧!
请參考源码:MagicMove
Modal
modal转场方式即使用 presentViewController()方法推出的方式,默认情况下。第二个视图从屏幕下方弹出。以下就来介绍下 modal 方式转场动画的自己定义。
创建一个文件继承自
NSObject, 并遵守
UIViewControllerAnimatedTransitioning协议。
实现该协议的两个基本方法:
1 2 3 4 | //指定转场动画持续的时长 func transitionDuration(transitionContext: UIViewControllerContextTransitioning) -> NSTimeInterval //转场动画的详细内容 func animateTransition(transitionContext: UIViewControllerContextTransitioning) |
以上两个步骤和
Push & Pop的自己定义一样。接下来就是不同的。
假设使用
Modal方式从一个 VC 到还有一个 VC,那么须要第一个 VC 遵循
UIViewControllerTransitioningDelegate协议。并实现下面两个协议方法:
1 2 3 4 5 | //present动画 optional func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? //dismiss动画 optional func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? |
prepareForSegue()方法中,指定第二个 VC 的
transitioningDelegate为 self。
由 [b]第3步 中两个方法就能够知道,在创建转场动画时,最好也创建两个动画类,一个用于 Present。 一个用于 Dismiss。假设仅仅创建一个动画类,就须要在实现动画的时候推断是
Present还是
Dismiss。[/b]
这时。转场动画就能够实现了,接下来就手势驱动了
在第一个 VC 中创建一个
UIPercentDrivenInteractiveTransition属性,而且在
prepareForSegue()方法中为第二个 VC.view 加入一个手势,用以 dismiss. 在手势的监听方法中处理方式和
Push & Pop同样。
实现
UIViewControllerTransitioningDelegate协议的另外两个方法,分别返回
Present和
Dismiss动画的百分比。
1 2 3 4 5 6 7 8 | //百分比Push func interactionControllerForPresentation(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? { return self.percentDrivenTransition } //百分比Pop func interactionControllerForDismissal(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? { return self.percentDrivenTransition } |
至此,
Modal方式的自己定义转场动画就写完了。自己在编码的时候有一些小细节须要注意。以下将展示使用
Modal方式的自己定义动画的演示样例。
自己定义 Modal 演示样例
此演示样例和上面一个演示样例一样,来自 Kitten Yang 的blog 实现3D翻转效果,我也将其用 Swift 实现了一遍,相同我的源码地址:FlipTransion,执行效果例如以下:FlipTransion.gif
初始化
创建两个 UIViewController, 分别命名为:
FirstViewController和
SecondViewController。
并在
Storyboard中加入两个
UIViewController并绑定。
分别给两个视图加入两个
UIImageView。这样做的目的是为了区分两个控制器。当然你也能够给两个控制器设置不同的背景,总之你开心就好。可是,既然做,就做认真点呗。注意:假设使用图片并设置为
Aspect Fill或者其它的 Fill。一定记得调用
imageView的
clipsToBounds()方法裁剪去多余的部分。
分别给两个控制器加入两个button。第一个button拖线到第二个控制器,第二个控制器绑定一个方法用来dismiss。
ft_inital.png
加入 UIViewControllerAnimatedTransitioning
加入一个 Cocoa Touch Class,继承自
NSObject,取名
BWFlipTransionPush(名字嘛,你开心就好。),遵守
UIViewControllerAnimatedTransitioning协议。
实现协议的两个方法。并在当中编写
Push的动画。 详细的动画实现过程都在代码的凝视里 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | func animateTransition(transitionContext: UIViewControllerContextTransitioning) { let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey) as! FirstViewController let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey) as! SecondViewController let container = transitionContext.containerView() container.addSubview(toVC.view) container.bringSubviewToFront(fromVC.view) //改变m34 var transfrom = CATransform3DIdentity transfrom.m34 = -0.002 container.layer.sublayerTransform = transfrom //设置anrchPoint 和 position let initalFrame = transitionContext.initialFrameForViewController(fromVC) toVC.view.frame = initalFrame fromVC.view.frame = initalFrame fromVC.view.layer.anchorPoint = CGPointMake(0, 0.5) fromVC.view.layer.position = CGPointMake(0, initalFrame.height / 2.0) //加入阴影效果 let shadowLayer = CAGradientLayer() shadowLayer.colors = [UIColor(white: 0, alpha: 1).CGColor, UIColor(white: 0, alpha: 0.5).CGColor, UIColor(white: 1, alpha: 0.5)] shadowLayer.startPoint = CGPointMake(0, 0.5) shadowLayer.endPoint = CGPointMake(1, 0.5) shadowLayer.frame = initalFrame let shadow = UIView(frame: initalFrame) shadow.backgroundColor = UIColor.clearColor() shadow.layer.addSublayer(shadowLayer) fromVC.view.addSubview(shadow) shadow.alpha = 0 //动画 UIView.animateWithDuration(transitionDuration(transitionContext), delay: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in fromVC.view.layer.transform = CATransform3DMakeRotation(CGFloat(-M_PI_2), 0, 1, 0) shadow.alpha = 1.0 }) { (finished: Bool) -> Void in fromVC.view.layer.anchorPoint = CGPointMake(0.5, 0.5) fromVC.view.layer.position = CGPointMake(CGRectGetMidX(initalFrame), CGRectGetMidY(initalFrame)) fromVC.view.layer.transform = CATransform3DIdentity shadow.removeFromSuperview() transitionContext.completeTransition(!transitionContext.transitionWasCancelled()) } } |
使用动画
让 FirstViewController遵守
UIViewControllerTransitioningDelegate协议,并将
self.transitioningDelegate设置为 self。
实现
UIViewControllerTransitioningDelegate协议的两个方法。用来指定动画类。
1 2 3 4 5 6 7 8 | //动画Push func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? { return BWFlipTransionPush() } //动画Pop func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? { return BWFlipTransionPop() } |
OK。假设你完毕了Pop动画,那么如今就能够实现自己定义 Modal 转场了。
如今仅仅差手势驱动了。
手势驱动
想要同一时候实现 Push和
Pop手势,就须要给两个
viewController.view加入手势。
首先在
FirstViewController中给自己加入一个屏幕右边的手势,在
prepareForSegue()方法中给
SecondViewController.view加入一个屏幕左边的手势,让它们使用同一个手势监听方法。
实现监听方法,不多说,和之前一样,但还是有细致看,由于本演示样例中转场动画比較特殊,并且有两个手势,所以这里计算百分比使用的是
KeyWindow。同一时候不要忘了:
UIPercentDrivenInteractiveTransition属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | func edgePanGesture(edgePan: UIScreenEdgePanGestureRecognizer) { let progress = abs(edgePan.translationInView(UIApplication.sharedApplication().keyWindow!).x) / UIApplication.sharedApplication().keyWindow!.bounds.width if edgePan.state == UIGestureRecognizerState.Began { self.percentDrivenTransition = UIPercentDrivenInteractiveTransition() if edgePan.edges == UIRectEdge.Right { self.performSegueWithIdentifier("present", sender: nil) } else if edgePan.edges == UIRectEdge.Left { self.dismissViewControllerAnimated(true, completion: nil) } } else if edgePan.state == UIGestureRecognizerState.Changed { self.percentDrivenTransition?.updateInteractiveTransition(progress) } else if edgePan.state == UIGestureRecognizerState.Cancelled || edgePan.state == UIGestureRecognizerState.Ended { if progress > 0.5 { self.percentDrivenTransition? .finishInteractiveTransition() } else { self.percentDrivenTransition?.cancelInteractiveTransition() } self.percentDrivenTransition = nil } } |
UIViewControllerTransitioningDelegate协议的另外两个方法,分别返回
Present和
Dismiss动画的百分比。
1 2 3 4 5 6 7 8 | //百分比Push func interactionControllerForPresentation(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? { return self.percentDrivenTransition } //百分比Pop func interactionControllerForDismissal(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? { return self.percentDrivenTransition } |
如今,基于
Modal的自己定义转场动画演示样例就完毕了。获取完整源码:FlipTransion
Segue
这样的方法比較特殊。是将 Stroyboard中的拖线与自己定义的
UIStoryboardSegue类绑定自实现定义转场过程动画。
首先我们来看看
UIStoryboardSegue是什么样的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @availability(iOS, introduced=5.0) class UIStoryboardSegue : NSObject { // Convenience constructor for returning a segue that performs a handler block in its -perform method. @availability(iOS, introduced=6.0) convenience init(identifier: String?, source: UIViewController, destination: UIViewController, performHandler: () -> Void) init!(identifier: String? , source: UIViewController, destination: UIViewController) // Designated initializer var identifier: String? { get } var sourceViewController: AnyObject { get } var destinationViewController: AnyObject { get } func perform() } |
UIStoryboardSegue类的定义。
从中能够看出,仅仅有一个方法
perform()。所以非常明显,就是重写这种方法来自己定义转场动画。
再注意它的其它属性:
sourceViewController和
destinationViewController,通过这两个属性,我们就能够訪问一个转场动画中的两个主角了,于是自己定义动画就能够随心所欲了。
仅仅有一点须要注意:在拖线的时候,注意在弹出的选项中选择
custom。
然后就能够和自己定义的
UIStoryboardSegue绑定了。
那么,问题来了,这里仅仅有
perform。那 返回时的动画怎么办呢?请往下看:
Dismiss
因为 perfrom的方法叫做:
segue,那么返回转场的上一个控制器叫做: unwind segue
解除转场(unwind segue)通常和正常自己定义转场(segue)一起出现。
要解除转场起作用,我们必须重写perform方法,并应用自己定义动画。
另外,导航返回源视图控制器的过渡效果不须要和相应的正常转场同样。
其 实现步骤 为:
创建一个
IBAction方法。该方法在解除转场被运行的时候会选择地运行一些代码。这种方法能够有你想要的不论什么名字。并且不强制包括其他东西。它须要定义。但能够留空,解除转场的定义须要依赖这种方法。
解除转场的创建。设置的配置。这和之前的转场创建不太一样。等下我们将看看这个是怎么实现的。
通过重写
UIStoryboardSegue子类里的
perform()方法,来实现自己定义动画。
UIViewController类提供了特定方法的定义,所以系统知道解除转场即将运行。
当然。这么说有一些让人琢磨不透,不知道什么意思。那么。以下再通过一个演示样例来深入了解一下。
Segue 演示样例
这个演示样例是我自己写的,源码地址:SegueTransion,开门见山,直接上图。
GIF演示
SegueTransion.gif
初始化
创建两个 UIViewController, 分别命名为:
FirstViewController和
SecondViewController。
并在
Storyboard中加入两个
UIViewController并绑定。
分别给两个控制器加入背景图片或使用不同的背景色,用以区分。
在
FirstViewController中加入一个触发button,并拖线到
SecondViewController中,在弹出的选项中选择
custion。
st_inital.png
Present
加入一个 Cocoa Touch Class,继承自
UIStoryboardSegue,取名
FirstSegue(名字请任意)。并将其绑定到上一步中拖拽的
segue上。
重写
FirstSegue中的
perform()方法。在当中编写动画逻辑。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | override func perform() { var firstVCView = self.sourceViewController.view as UIView! var secondVCView = self.destinationViewController.view as UIView! let screenWidth = UIScreen.mainScreen().bounds.size.width let screenHeight = UIScreen.mainScreen().bounds.size.height secondVCView.frame = CGRectMake(0.0, screenHeight, screenWidth, screenHeight) let window = UIApplication.sharedApplication().keyWindow window?.insertSubview(secondVCView, aboveSubview: firstVCView) UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveLinear, animations: { () -> Void in secondVCView.frame = CGRectOffset(secondVCView.frame, 0.0, -screenHeight) }) { (finished: Bool) -> Void in self.sourceViewController.presentViewController(self.destinationViewController as! UIViewController, animated: false, completion: nil) } } |
Present手势
这里须要注意。使用这样的方式自己定义的转场动画不能动态手势驱动,也就是说不能依据手势百分比动态改变动画完毕度。所以。这里仅仅是简单的加入一个滑动手势(swip)。
在
FisrtViewController中加入手势:
1 2 3 | var swipeGestureRecognizer: UISwipeGestureRecognizer = UISwipeGestureRecognizer(target: self, action: "showSecondViewController") swipeGestureRecognizer.direction = UISwipeGestureRecognizerDirection.Up self.view.addGestureRecognizer(swipeGestureRecognizer) |
1 2 3 | func showSecondViewController() { self.performSegueWithIdentifier("idFirstSegue", sender: self) } |
如今已经能够 [b]present 了。接下来实现
dismiss。[/b]
Dismiss
在 FirstViewController中加入一个
IBAction方法。方法名能够随便,有没有返回值都随便。
在
Storyboard中选择
SecondViewController按住
control键拖线到
SecondViewController的
Exit图标。并在弹出选项中选择上一步加入
IBAction的方法。
st_unwind.png
在
Storyboard左側的文档视图中找到上一步拖的
segue。并设置
identifier
st_unwindSegue.png
再加入一个
Cocoa Touch Class,继承自
UIStoryboardSegue。取名
FirstSegueUnWind(名字请任意)。并重写其
perform()方法,用来实现
dismiss动画。
在
FirstViewController中重写以下方法。并依据
identifier推断是不是须要 dismiss,假设是就返回刚刚创建的
FirstUnWindSegue。
1 2 3 4 5 6 7 8 9 | override func segueForUnwindingToViewController(toViewController: UIViewController, fromViewController: UIViewController, identifier: String?) -> UIStoryboardSegue { if identifier == "firstSegueUnwind" { return FirstUnwindSegue(identifier: identifier, source: fromViewController, destination: toViewController, performHandler: { () -> Void in }) } return super.segueForUnwindingToViewController(toViewController, fromViewController: fromViewController, identifier: identifier) } |
SecondViewController的button的监听方法中实现 dismiss, 注意不是调用
self.dismiss...!
1 2 3 | @IBAction func shouldDismiss(sender: AnyObject) { self.performSegueWithIdentifier("firstSegueUnwind", sender: self) } |
给
SecondViewController加入手势,将手势监听方法也设置为以上这种方法, 參考代码:SegueTransion。
总结
一张图总结一下3种方法的异同点。http://cxy.liuzhihengseo.com/456.html
问啊-定制化IT教育平台,牛人一对一服务,有问必答。开发编程社交头条 官方站点:www.wenaaa.com 下载问啊APP,參与官方悬赏,赚百元现金。
QQ群290551701 聚集非常多互联网精英,技术总监,架构师,项目经理!开源技术研究,欢迎业内人士,大牛及新手有志于从事IT行业人员进入!
相关文章推荐
- 关于ValueAnimation以及Interpolator +Drawable实现的自己定义动画效果
- 关于自定义转场动画,我都告诉你。
- 关于自定义转场动画,我都告诉你
- 关于自定义转场动画,我都告诉你
- 关于自定义转场动画,我都告诉你
- 自己定义转场动画--Swift3.0版本号
- 关于Go语言,自己定义结构体标签的一个妙用.
- 关于xcode快速开发定义自己的代码块、快速展开关闭所有方法
- 设置UITabBar自己为代理实现页面的动画转场(MS)
- 【安卓】自己定义基于onDraw的随意动画(不不过平移/旋转/缩放/alpha)、!
- 使用android frame动画定义自己的ProgressBar
- 关于scroolView自己慢慢滑动的动画
- 关于自己定义Page的一个小问题
- 关于Android动画插值器的简单介绍以及如何自定义自己的插值器
- 【iOS开发-90】CALayer图层:自己定义图层,图层的一些动画
- 关于CABasicAnimation转场后动画停止问题解决
- 关于Cocos2d-x中自己定义的类的名字和Cocos2d-x引擎库中的类的名字重复的解决方法
- iOS 自己定义页面的切换动画与交互动画 By Swift
- 关于PreferenceActivity的使用和一些问题的解决(自己定义Title和取值)
- 自己定义progressdialog载入动画,这里还有旋转的载入条,美团,多个图片动画