用一个很简单的场景做为例子:在storyboard上,你有用UINavigationController串起来两个UIViewController。这两个controller之间要互相跳转,A->B,B->A。跳转的时候默认的那个push来push去的效果你觉得很傻X,所以想换一个效果。比如,不那么二的fade in/out效果。

很多的例子会说写一个cusom的UIStoryboardSegue,然后在这个里面写一个UIView.animationWithDuration来实现这个效果。千万别这么干!从iOS7开始就有一个更加方便简洁的方法可以实现这个效果。

下面就开始介绍这个很牛X的方法。首先创建一个single view的项目。名称可以叫做transitionDemo。各个controller之间的关系是这样的:



一个UINavigationController作为启动controller,串起来一个UITableViewController(root controller)和一个UIViewController。在Prototype Cellsctrl+drag到view controller上,并选择show

下面分别为table view controller创建类TDTableViewController为view controller创建类TDViewController之后分别在storyboard里关联起来。把从table view controller到view controller的segue的identitifer设置为TDViewController


segue

接下来给TDTableViewController添加数据源:

class TDTableViewController: UITableViewController {

var tableViewDataSource: [String]?

    override func viewDidLoad() {
        super.viewDidLoad()

        createDataSource()
    }

    createDataSource() {
        if let _ = self.tableViewDataSource {
            return
        }

        self.tableViewDataSource = [String]()
        for i in 0..<100 {
            self.tableViewDataSource!.append("item :- [\(i)]")
        }
    }
    //............
}

打开storyboard,在TDViewController里添加一个label,给这个label添加约束,随便是什么约束都可以只要是正确的。然后在controller里添加这个label的outlet并关联。

TDViewController代码中添加数据属性,并在viewDidLoad方法里给这label的text赋值:

TDViewController: UIViewController {

    @IBOutlet weak var dataLabel: UILabel!

    var singleData: String!

    super.viewDidLoad()

        self.dataLabel.text = self.singleData
    }
}

使用默认的segue,这里现在是show模式,跳转。并从table view controller出传递数据给view controller:

// 使用segue跳转
    tableView(tableView: UITableView,didSelectRowAtIndexPath indexPath: NSIndexPath) {
        self.dataItem = self.tableViewDataSource![indexPath.row]
        self.performSegueWithIdentifier("TDViewController",sender: nil)
    }

// 传递数据
    prepareForSegue(segue: UIStoryboardSegue,sender: AnyObject?) {
        if segue.identifier != "TDViewController" {
            let destinationController = segue.destinationViewController as! TDViewController
        destinationController.singleData = self.dataItem!
    }

run一把来看看:


Segue和Transition

custom segue

直接用代码把两种方式都实现出来,分别代替上面使用的默认的实现方式。

首先弄一个custom segue。要开发一个custom segue,首先需要创建一个类并继承自UIStoryboardSegue,我们为这个类命名为DetailStoryboardSegue。在这个类中关键就是实现方法perform()

import UIKit

DetailStoryboardSegue: UIStoryboardSegue {
    perform() {
        let sourceView = self.sourceViewController.view // 1
        let destView = self.destinationViewController.view

        let window = (UIApplication.sharedApplication().delegate AppDelegate).window
        window?.insertSubview(destView,aboveSubview: sourceView) // 2

        destView.alpha = 0.0

        UIView.animateWithDuration(0.3,animations: { // 3
            destView.alpha = 1.0
        })
    }
}
  1. self.sourceViewControllerself.destinationViewController都是UIStoryboardSegue类本身就有的属性。从A controller跳转到B controller,那么source就是A,destination就是B。我们的fade in/out效果就是通过source和destination controller的view的切换和alpha实现的。
  2. 在window上做source和destination view的切换。把destination view覆盖到source view上。
  3. destination view的alpha在上一步设置为了0,也就是完全透明的。在动画中把destination view的alpha设置回完全不透明,把view呈现在用户面前达到fade in的效果。

实现完成后,在storyboard中把segue的Kind设置为custom,然后给Class设置为类DetailStoryboardSegue


其实很简单,运行起来看看。



你会看到,运行的结果出了一点问题。之前在正确位置显示的label,在这里居然出现在了屏幕的顶端。这是因为前面TDViewController是用navigation controller的push出来的,屏幕的最顶端有一个navigation bar,所以label的top约束是有效的。而我们的custom segue的切换中并不存在navigation controller的push。而是简单的view的覆盖替换,没有navigation bar。所以labe的top约束失效了,直接被显示在了顶端。

这个错误其实引出了一个问题,但是这里我们暂时不做深入讨论。先看看Transitioning animtion动画是怎么运行的,然后我们讨论这个严肃的问题。

custom transitioning animation

实现自定义的切换动画就需要实现UIViewControllerAnimatedTransitioning这个protocol了。我们自定义一个类DetailTransitioningAnimator来实现这个protocol

这个protocol有两个方法是必须实现的,func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeIntervalfunc animateTransition(transitionContext: UIViewControllerContextTransitioning)。来看代码:

DetailTransitioningAnimator: NSObject,UIViewControllerAnimatedTransitioning {
    let durationTimeInterval: NSTimeInterval
    // 1
    init(duration: NSTimeInterval){
        durationTimeInterval = duration
    }

    transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
        return self.durationTimeInterval
    }
    //2
    animateTransition(transitionContext: UIViewControllerContextTransitioning) {
        let containerView = transitionContext.containerView()
        let sourceController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)
        let destController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)


        let sourceView = sourceController!.view
        let destView = destController!.view

        containerView?.addSubview(destView) // 3

        destView.alpha = 1.0
        },completion: {completed in
            let cancelled = transitionContext.transitionWasCancelled()
            transitionContext.completeTransition(!cancelled)
        })
    }

    animationEnded(transitionCompleted: Bool) {

    }
}
  1. 这个init方法不是必需的,但是为了可以自定义动画的执行时间添加这个构造方法。
  2. transitioning动画的执行方法。在这个方法里实现我们在之前的custom segue里实现的效果。
  3. 注意这里,用的是let containerView = transitionContext.containerView()得到的container view。而不是之前用到的window。

下面把transitioning动画应用到代码中。在使用的时候需要实现UINavigationControllerDelegate。创建一个类NavigationControllerDelegate来实现这个protocol。

NavigationControllerDelegate: UINavigationControllerDelegate {
    navigationController(navigationController: UINavigationController,animationControllerForOperation operation: UINavigationControllerOperation,fromViewController fromVC: UIViewController,toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return DetailTransitioningAnimator(duration: 0.3)
    }
}

这里没有太多需要讲的。只要知道是这个方法就可以了。

下面在storyboard中把类NavigationControllerDelegate应用在UINavigationController中。

  1. 把object这个东西拖动到项目中唯一存在的navigation controller上。

  2. 给刚刚的object设置custom class为类NavigationControllerDelegate


    只要关注右侧的Class的设置就可以。
  3. 给navigation controller的代理设置为刚刚拖动上去的delegate。

对上面的custom segue代码去掉,并稍作修改之后,运行起来。



木有问题,上面出现的错误也没有了。

这个问题不重要,但是还是要讨论一下:为什么custom segue会出现问题,而transitoning动画就没有问题呢?这里是因为实际上transitioning动画是在navigation controller的基础上改变的。Transitioning动画只是修改了navigation controller的push动画,改成了fade in的效果,而navigation controller的其他机制没有改动。custom segue则完全是两个view之间的动画。那么,这里就留下一个问题由读者去修改上面的custom segue代码来让这个navigation bar 出现出来。

但是什么情况下用custom segue,什么情况下用transition动画呢?Transitioning动画更加的灵活,不像custom segue是在storyboard里定死的。你可以根据不同的情况设定你自己想要的动画。

custom segue就是用来调用一些如:presentViewControllerdismissViewController之类的方法的。这些方法调用的时候两个view controller之间的转化动画则使用上面的方法来做。他们的职责是不同的。

最后补充一点。也是一个发挥custom segue的作用的地方。在多个storyboard的情况下可以使用custom segue。步骤:(假设你已经创建了另外一个storyboard,叫做Another.storyboard

  1. 拖一个storyboard reference到你现在的storyboard中。
  2. 点选这个storyboard reference,并在右侧工具栏的Storyboard下填写另外一个storyboard的名字,这里是Another.storyboard
  3. ctrl+drag,从一个view controller中的按钮等view连接到刚刚添加的storyboard reference上。(确保你的另外一个storyboard的view controller已经设置为默认启动)
  4. 如果你要启动的是另外一个storyboard的某一个特定的view controller,那么就可以写一个custom segue了。在这个custom segue中初始化出另外一个storyboard,从中获取到你要启动的view controller,然后在custom segue的perform方法中完成controller跳转的最后一步。
all code here

to be continued。。。

Swift: 是用Custom Segue还是用Transition动画的更多相关文章

  1. Canvas实现贝赛尔曲线轨迹动画的示例代码

    这篇文章主要介绍了Canvas实现贝赛尔曲线轨迹动画的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. HTML5 直播疯狂点赞动画实现代码 附源码

    为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞动作通常无限次,引导用户疯狂点赞,今天小编给大家分享HTML5 直播疯狂点赞动画实现代码 附源码,感兴趣的朋友一起看看吧

  3. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果,就是CSS动画样式处理,动画声明需要使用@keyframes name,后面的name是人为定义的动画名称,下面我们来看看文章的具体实现内容吧,需要的小伙伴可以参考一下

  4. 基于canvas的骨骼动画的示例代码

    这篇文章主要介绍了基于canvas的骨骼动画的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. html5如何在Canvas中实现自定义路径动画示例

    本篇文章主要介绍了html5如何在Canvas中实现自定义路径动画示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. 基于HTML5+Webkit实现树叶飘落动画

    本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果,需要的朋友参考下吧

  7. Html5页面内使用JSON动画的实现

    这篇文章主要介绍了Html5页面内使用JSON动画的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5实现图片转圈的动画效果——让页面动起来

    这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下

  9. 基于 HTML5 WebGL 实现的医疗物流系统

    物联网( IoT ),简单的理解就是物体之间通过互联网进行链接。这篇文章给大家介绍基于 HTML5 WebGL 实现的医疗物流系统,感兴趣的朋友跟随小编一起看看吧

  10. 为什么这个简单的动画无法在iOS 7上运行?

    在我的项目中,我有一个简单的动画,我只是从左到右移动一个视图.这在iOS6中运行良好,但是当我在iOS7中运行它没有做任何事情.有人知道为什么吗?如果动画非常简单,我该如何修复iOS7?我的代码是:我做了更新,我使用Xcode5和iOS7所以任何帮助人,你知道如何解决这个问题吗?

随机推荐

  1. Swift UITextField,UITextView,UISegmentedControl,UISwitch

    下面我们通过一个demo来简单的实现下这些控件的功能.首先,我们拖将这几个控件拖到storyboard,并关联上相应的属性和动作.如图:关联上属性和动作后,看看实现的代码:

  2. swift UISlider,UIStepper

    我们用两个label来显示slider和stepper的值.再用张图片来显示改变stepper值的效果.首先,这三个控件需要全局变量声明如下然后,我们对所有的控件做个简单的布局:最后,当slider的值改变时,我们用一个label来显示值的变化,同样,用另一个label来显示stepper值的变化,并改变图片的大小:实现效果如下:

  3. preferredFontForTextStyle字体设置之更改

    即:

  4. Swift没有异常处理,遇到功能性错误怎么办?

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  5. 字典实战和UIKit初探

    ios中数组和字典的应用Applicationschedule类别子项类别名称优先级数据包contactsentertainment接触UIKit学习用Swift调用CocoaTouchimportUIKitletcolors=[]varbackView=UIView(frame:CGRectMake(0.0,0.0,320.0,CGFloat(colors.count*50)))backView

  6. swift语言IOS8开发战记21 Core Data2

    上一话中我们简单地介绍了一些coredata的基本知识,这一话我们通过编程来实现coredata的使用。还记得我们在coredata中定义的那个Model么,上面这段代码会加载这个Model。定义完方法之后,我们对coredata的准备都已经完成了。最后强调一点,coredata并不是数据库,它只是一个框架,协助我们进行数据库操作,它并不关心我们把数据存到哪里。

  7. swift语言IOS8开发战记22 Core Data3

    上一话我们定义了与coredata有关的变量和方法,做足了准备工作,这一话我们来试试能不能成功。首先打开上一话中生成的Info类,在其中引用头文件的地方添加一个@objc,不然后面会报错,我也不知道为什么。

  8. swift实战小程序1天气预报

    在有一定swift基础的情况下,让我们来做一些小程序练练手,今天来试试做一个简单地天气预报。然后在btnpressed方法中依旧增加loadWeather方法.在loadWeather方法中加上信息的显示语句:运行一下看看效果,如图:虽然显示出来了,但是我们的text是可编辑状态的,在storyboard中勾选Editable,再次运行:大功告成,而且现在每次单击按钮,就会重新请求天气情况,大家也来试试吧。

  9. 【iOS学习01】swift ? and !  的学习

    如果不初始化就会报错。

  10. swift语言IOS8开发战记23 Core Data4

    接着我们需要把我们的Rest类变成一个被coredata管理的类,点开Rest类,作如下修改:关键字@NSManaged的作用是与实体中对应的属性通信,BinaryData对应的类型是NSData,CoreData没有布尔属性,只能用0和1来区分。进行如下操作,输入类名:建立好之后因为我们之前写的代码有些地方并不适用于coredata,所以编译器会报错,现在来一一解决。

返回
顶部