说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

iOS UIView动画实践(三):Transition Animation

HTML文档下载 WORD文档下载 PDF文档下载
本文为iOS UIView动画实践系列第三篇。在讲解了如何创建基于动画属性的视图动画以及让UI变得鲜活的弹簧动画之后,本文作者介绍了过渡转变动画,以此来实现在添加或删除一个视图时能够添加相应的动画。

前言

在上两篇文章中向大家介绍了如何创建基于动画属性的视图动画,比如位置、透明度等。但是大家有没有想过添加或删除一个视图时怎样添加相应的动画呢?

当然我们可以用第一篇文章中对用户名、密码输入框的处理办法,但是还有更好的办法处理这种状况。那就是在这篇文章中将向大家介绍的过渡转变(Transition)动画。

过渡转变动画是Apple预定义的动画集,它没有更改视图某属性起始值和终止值的概念,而只需要你设定不同的动画选项即可。

添加新视图

在进行示例之前,大家需要注意一点过渡转变动画与动画属性动画的不同之处。我们在创建动画属性动画时只需要在animations闭包中添加对视图动画属性修改的代码即可,它没有作用域或作用视图的概念。而在过渡转变动画中有作用视图的概念,也就是说我们调用过渡转变动画方法时需要指定一个作用视图。

明确这点不同之后,我们对作用视图再作进一步的说明。过渡转变动画中的作用视图并不是我们的目标视图,而是目标视图的容器视图,那么大家不难想象,如果该容器视图中有多个子视图,那么这些子视图都会有过渡转变动画效果。下面用示例像大家说明。

先看看一个简单的视图结构:


很明显,我们添加了一个视图作为容器视图,并且尺寸等于屏幕尺寸。在ViewController.swift中有该容器视图的Outlet以及一个图片视图:

@IBOutlet weak var containerView: UIView!let ipadView = UIImageView(frame: CGRectMake(100, 100, 200, 151.5))

viewDidLoad()方法中给ipadView指定图片:

ipadView.image = UIImage(named: "ipad")

然后在viewDidAppear()方法中添加如下代码:

UIView.transitionWithView(self.containerView, duration: 1.5, options: .TransitionFlipFromBottom, animations: {    self.containerView.addSubview(self.ipadView)}, completion: nil)

上述代码就是我们今天的主角,过渡转变方法之一,它同样是UIView的类方法,共有五个参数:

  • view:第一个参数,也就是作用视图,一般都是容器视图。
  • duration:动画持续时间。
  • options:过渡转变动画选项,由它来确定过渡转变的具体展现形式。
  • animations:动画闭包。
  • completion:动画结束后执行该闭包中的代码。

除了第一个参数,其他四个参数大家应该都不会陌生。这段代码用文字解释出来就是将容器视图(containerView)添加子视图(ipadView)的过程使用.TransitionFlipFromBottom类型的过渡转变动画展示出来,持续时间为1.5秒。编译运行看看效果:

                                     

我们再来添加一个子视图(该子视图的初始化代码不再累赘):

UIView.transitionWithView(self.containerView, duration: 1.5, options: .TransitionFlipFromBottom, animations: {    self.containerView.addSubview(self.ipadView)    self.containerView.addSubview(self.iphoneView)}, completion: nil)

编译运行看看效果:

                                      

大家可以看到这两个子视图都依托与它们的容器视图进行了过渡转变动画。下面的列表是所有过渡转变动画的动画选项,大家可以在你们自己的项目中逐个实验:

  • .TransitionFlipFromLeft
  • .TransitionFlipFromRight
  • .TransitionCurlUp
  • .TransitionCurlDown
  • .TransitionCrossDissolve
  • .TransitionFlipFromTop
  • .TransitionFlipFromBottom

如果我们有多个目标视图,想进行不同的过渡转变动画怎么办?那我们就创建多个目标视图的容器视图,尺寸与目标视图一致,放置在合适的位置:


从上图中可以看出,我们在屏幕上放置了四个容器视图,显而易见,我们要分别对这四个容器视图添加过渡转变动画。当然容器视图里要添加什么样的视图随个人喜好。

viewDidLoad()方法中添加如下代码:

UIView.transitionWithView(self.ipadContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {    self.ipadContainerView.addSubview(self.ipadView)}, completion: nil)UIView.transitionWithView(self.iphoneContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromLeft], animations: {    self.iphoneContainerView.addSubview(self.iphoneView)}, completion: nil)UIView.transitionWithView(self.webContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromRight], animations: {    self.webContainerView.addSubview(self.webView)}, completion: nil)UIView.transitionWithView(textContainerView, duration: 2, options: [.CurveEaseOut, .TransitionCrossDissolve], animations: {    self.textContainerView.addSubview(self.textView)}, completion: nil)

通过上述代码可以看出,我们对四个容器视图分别添加了过渡转变动画,并且options参数使用了.CurveEaseOut和不同的过渡转变动画选项。编译运行看看效果:

                                       

是不是有点儿意思!不过细心的朋友应该发现了,过渡转变动画的方法没有delay这个很有用的属性,这就导致过渡转变动画都是同时发生,不能设置延迟时间。不过我们可以曲线救国,自己写一个delay方法:

func delay(seconds: Double, completion:()->()) {    let popTime = dispatch_time(DISPATCH_TIME_NOW, Int64( Double(NSEC_PER_SEC) * seconds ))    dispatch_after(popTime, dispatch_get_main_queue()) {        completion()    }}

然后我们修改viewDidLoad()方法中的代码如下:

delay(0, completion: {   UIView.transitionWithView(self.ipadContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {       self.ipadContainerView.addSubview(self.ipadView)   }, completion: nil)})delay(1, completion: {            UIView.transitionWithView(self.iphoneContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromLeft], animations: {                self.iphoneContainerView.addSubview(self.iphoneView)                }, completion: nil) })        delay(2, completion: {            UIView.transitionWithView(self.webContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromRight], animations: {                self.webContainerView.addSubview(self.webView)                }, completion: nil)})delay(3, completion: {            UIView.transitionWithView(self.textContainerView, duration: 2, options: [.CurveEaseOut, .TransitionCrossDissolve], animations: {                self.textContainerView.addSubview(self.textView)                }, completion: nil) })

我们将每个过渡转变动画延迟1秒进行,编译运行看看效果:

                                       

现在的效果是不是更好了呢! : ]

移除视图

过渡转变动画同样可以用来移除视图。我们在屏幕底部添加一个UIButton,当点击这个按钮的时候,通过过渡转变动画移除按钮上方的那两排字,并且改变屏幕背景色。go()方法是按钮连接在代码中的Touch Up Inside方法,在该方法中添加如下代码:

UIView.animateWithDuration(0.5, animations: {            self.view.backgroundColor = UIColor(red: 252.0/255.0, green: 155.0/255.0, blue: 65.0/255.0, alpha: 1)})

编译运行看看效果:

                                       

替换视图

在这一节我们将要学习过渡转变动画的另一个方法,替换视图方法。我设计的场景是当点击Go按钮后,除了上一节中的动画效果以外,iPad、iPhone、Web视图也会移位并且替换为别的视图,我们继续在go()方法中的添加如下代码:

UIView.animateWithDuration(1, delay: 0, options: [], animations: {     self.iphoneView.frame = CGRectMake(0, 0, 334, 72)     self.iphoneContainerView.frame = CGRectMake(26, 130, 334, 72)  }, completion: {        (flag: Bool) in                if flag {                        UIView.transitionFromView(self.iphoneContainerView, toView: self.supportIphone, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)                } })        UIView.animateWithDuration(1, delay: 1, options: [], animations: {    self.ipadView.frame = CGRectMake(0, 0, 334, 72)    self.ipadContainerView.frame = CGRectMake(26, 242, 334, 72)  }, completion: {        (flag: Bool) in                if flag {                        UIView.transitionFromView(self.ipadContainerView, toView: self.supportIpad, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)                }})        UIView.animateWithDuration(1, delay: 2, options: [], animations: {    self.webView.frame = CGRectMake(0, 0, 334, 72)    self.webContainerView.frame = CGRectMake(26, 354, 334, 72)}, completion: {        (flag: Bool) in                if flag {                        UIView.transitionFromView(self.webContainerView, toView: self.supportWeb, duration: 0.33, options: .TransitionCrossDissolve, completion: nil)                }})

我们来解释一下上述的代码,拿iPhone视图为例,首先通过动画属性动画改变它的尺寸大小和位置。然后在completion闭包中添加替换视图方法,该方法有五个参数:

  • fromView:被替换的视图。
  • toView:替换之后的视图。
  • duration:动画持续时间。
  • options:动画选项。
  • completion:动画执行结束后执行该闭包中的代码。

要注意的是该方法的作用视图可以是容器视图,也可以是目标视图。编译运行看看效果:

                                       

显示/隐藏视图

过渡转变动画也可以用于显示或隐藏视图,这里给出伪代码供参考:

UIView.transitionWithView(self.someContainerView, duration: 1.5, options: [.CurveEaseOut, .TransitionFlipFromBottom], animations: {    self.someView.hidden = true    // self.someView.hidden = false}, completion: nil)

结束语

过渡转变动画有很多动画选项,大家可以自行试试,找出自己喜欢的或最合适的过渡转变动画选项,并且可以尝试过渡转变动画和属性动画的组合,可以使你们的App更加有趣。好了今天就到这里。

系列阅读:

iOS UIView动画实践(一):揭开Animation的神秘面纱

iOS UIView动画实践(二):Spring Animation与人机交互


作者简介:

付宇轩(@DevTalking),从事Java中间件开发、iOS开发。主要主持开发企业级ETL中间件、BPM中间件、企业级移动应用,个人博客地址:http://www.devtalking.com。


CSDN移动将持续为您优选移动开发的精华内容,共同探讨移动开发的技术热点话题,涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面,如果您有想分享的技术、观点,可通过电子邮件(tangxy#csdn.net,请把#改成@)投稿。

第一时间掌握最新移动开发相关信息和技术,请关注mobilehub公众微信号(ID: mobilehub)。


开发者眼中的iOS 7:重设计过程没想象中那么糟 游戏引擎Unity宣布免费支持Windows Phone 8及Xbox One 蝉游记王益善专访:7人小团队实现App 30万下载量 去除IE 10广告的两种方法 直接拿来用!最火前端开源项目(二) 工作变得简单又高效 试试这八个WebApp 移动周报:生于微信,疯狂猜图的推广经 DataTorrent 将数据分析速度从“实时”提升至“现在时” 华为FusionCube开启全球规模商用 黑暗架构:以最少时间完成系统升级并获客户认可的开发之道 Hadoop Summit 2013见闻:创业与Hadoop 2.0不可阻挡 Facebook的清洁能源改革——革命尚未成功,仍需努力 YARN或将成为Hadoop新发力点 主流编程语言属性一览(多图) 粉碎硬件复杂论:开发者不懂硬件运行的方式怎么可以?! 最新版Chrome OS加入Word和Excel编辑功能 直指微软 传诺基亚将购诺西全部股份,疑为出售手机业务做准备? 优秀技术领导者的修成之道 直接拿来用!最火前端开源项目(三) 第八届开源中国开源世界高峰论坛成功举办 曾经那些主流的API,而今风光已不再! Android 4.3本月9日亮相 新功能汇总 移动游戏的国际化运营技巧 Google的Janus与Facebook的McDipper:将闪存用于数据中心 拥抱开源还是坚守阵地:传统数据库供应商面临抉择 超棒的30款JS类库和工具 立场坚定:惠普仍然密谋回到智能手机市场 6月份浏览器份额:Chrome成市场份额增长最快浏览器 关于PHP的十大误解 你中了几个? 专访西电朱虎明:异构计算硬件架构呈现百花齐放 百家争鸣 GSMA行纪:各种神器、好玩的、好看的全搜罗 这样简单的程序怎么通不过! session值修改还是未解决。 一个问题? flashget怎么用? 怎么相应动态创建的控件的事件 关于多媒体播放器的问题 快结婚了,可男朋友依旧把前女友的照片当成宝贝,我该怎么办? 建议组织一个水园老五大联盟。有支持的请up ! jspsmartupload上传100M以上的文件报错怎么办? 高分求助! 在那里下载jsp服务器的软件? 大家帮个忙,急寻南京兼职,饿死了 在unix下如何编译自己写好的c语言程序? 有个问题请教 ? 保存电脑技巧的问题。 在linux下怎么使用SAMBA使用windows下面的东西? 菜鸟级问题 我要在com+中间层返回sqlserver服务器的时间,怎么通过sql语句实现? 女友是空姐没有安全感怎么办 有几个概念不清楚, 劳驾哪位给解释一下 在unix下如何编译自己写好的c语言程序? Listbox 拖放的问题!解决就给100分! orical 我的测试连接失败! 小问题,别笑! 新手对指针的理解,大家指点指点,多谢!! 重载问题??? 高分求助! 哪里有截取vpn数据包的代码学习啊??? 怎样写贴子的标题才能吸引大家的注意?举例者一律给分! 关于API 为什么我的资源管理器反应很慢? 南京远志科技公司怎么样,马上要去面试了,请大家谈谈情况 请问这是什么意思 100分马上给 升四个▲了,散分!!!顺便问问那些两个星星的,你们升到两个星星以后的心情是什么样的?会不会有些失落感? 谁知道mediaplay控件 有没有直接到 一段视频文件结尾的方法 用quickstart出现地问题 小弟没写过事务,请教下面这个功能怎么写 万分着急! 在线等候!求和问题 怎么在sql server 的存储过程中调用它的异常处理呢? 劳累了一天了,希望在水园的朋友们今晚愉快:) hub上的uplink口跟其他的有什么区别啊? 为什么灌水圆只有回复数,没有点击数!强烈要求显示点击数!同意的近来投票! 帮帮忙 正则表达式,验证TEXTBOX输入的是手机号码,并且textbox不允许空着。 c#里求y=sin(x)怎样实现的?用什么类? 关于UI 线程的奇怪问题,请高手指教 来者有分,求和问题!! 一个关于C++与数据库连接的问题!-----------100分 和winMap效果一样的东西 Dev-C++编译器编译的问题~ 摩尔根是什么 在医院中的ECG检查是心电图检查吗?正常人的血压范围是多少? 玻尔的量子化条件L=nh/2π中h的含义是什么? 摩尔根怎么样 饰品镀金厚度单位怎么称呼?电镀公司说一般镀金为:0.5 中文发音好像是 (“买”字第一声调)请问这个单位是什么?有多厚?是不是用 um 作单位的? 有350N的物体,一个人用定滑轮用200N的力将物体拉起3M,用了两分钟.求1、工人对物体做的有用功2、工人做的总功3、工人做功的功率4、工人做功的机械效率只说答案也可以 摩尔根的故事 问下在XP中如何计算我写的文章字数 有谁了解的说下吧,不好意思, 怎样理解玻尔的原子结构是量子化的? 当电容电压大于交流电源瞬时电压时,电容是否会放电吗?我想知道电容在交流电的情况下,其充放电的详细过程?还有其串联回路中的电阻电压变化情况及其波形是怎样的? 问下在XP中如何计算我写的文章字数有谁了解的说下吧,不好意思,麻烦各位1G 10g含有杂质的CaCO3和足量的盐酸反应,产生CO2 0.1mol,则此样品中可能含有的杂质是( )A.KHCO3和MgCO3 B.SiO2和MgCO3 C.K2CO3和SiO2 D.无法确定 平行板电容器串、并联电压与电源电压各为什么关系?为什么? 请问大家下在XP中如何计算我写的文章字数有谁了解的说下吧,不好意思,麻烦各位9G CaCO3中杂质什么的.某不纯的CaCO3样品中可能含有MgCO3、K2CO3、CuO中的一种或几种物质.取该样品10g与足量的盐酸反应,收集到4.44g气体,并得到无色透明溶液.则样品中一定有___一定没有___ ,可能含 谁知道做害怕意思的shen是哪个字呢? 自由电子是从负极到正极吗?甲、乙两个金属球,甲球带正电,乙球带负电.若将它们接触,则(C)A.自由电子从甲球到乙球,电流从甲球到乙球.B.自由电子从甲球到乙球,电流从乙球到甲球.C.自由电 由镁离子构成的物质 关于什么EXOmv闹鬼是怎么回事= 看留言说很恐怖所以就特意没看那里,很好奇那个闹鬼的画面是什么?如题 自由电子定向移动是不是由负极移到正极,电流方向是不是由正极移到负极 是正负电荷相遇湮灭成光子,还是带正负电荷的粒子相遇湮灭成光子?请解释详细些,谢谢 请问大家一下在XP中如何计算我写的文章字数 有谁了解的说下吧,感受大伙了劫3 原电池,负极的自由电子为什么会无缘无故全跑到正极啊,而且是全部,锌那边真的一点H2都不生成吗Zn那边真的不会生成一点H2吗, 当相应的正反粒子接触时,将湮灭成两个光子.为什么是湮灭成两个光子而不会是别的呢?怎么得出这个结论的? 谁知道在XP中如何计算我写的文章字数 有谁了解的说下吧, 高锰酸钾和甲酸怎么反应(在碱性条件下) 一对正负电子可以湮灭成两个光子与电荷不能消失矛盾吗 请问大家一下在XP中如何计算我写的文章字数 有谁了解的说下吧, 细铜管堵住了怎么办 内径是1毫米长度为5公分而且一端带弯头 里面是潮湿的重钙 量子模型的比较与玻尔的原子模型,这属于化学的哪方面,哪里有视频看. 枭字怎么拼读 并说明理由 镁是由什么构成的 为什么我的硬度越来越差了,没有性生活也没有手 淫,有什么办法可改善甚至加强?还有真的有药物能使小弟弟增大增粗吗 倩字的罗马拼音怎么拼写? 地球上现存体形最大的鸟是什么? 泌尿系统的主要器官 凸透镜使光线折射?凹透镜使光线反射?这两句话对么? 怎麽样将弱肉强吃改为:强肉弱吃 定理了这个社会自然界真是弱肉强吃如:一辆大货车(强者)撞了一个小妹妹(弱者)如:一个老虎(强者)吃了一只小鸡(弱者)如:一个恶霸(强者) 泌尿系统的主要器官是() sheng(shen)得慌怎么写? ECG electrode是什么东西朋友喝醉酒,被送回来 肚子上被贴着这个东西,请问是干啥的? 分辨石头同学们都喜欢小明从乡下带来的漂亮小石头.小明从中取出两块石头说:“这两块石头,一块是高山上的,一块是海边的,谁能最先分辨出来就奖给谁.”同学们,你能分辨出来吗?请说一说 (shen/sen)得慌那个字怎么写? ECG-LVH是什么? “.shen"重怎么写 请问大家一下在XP中如何计算我写的文章字数熟悉的看下吧,感受大伙了8e 胃舒宁在胃中发生反应的化学方程式是_______.胃痛时吃几块苏打饼干(含Na2CO3)可减轻胃痛,其反应的化学方程式是:_____________________________。最好半小时内回答、 请问下有谁知道在XP中如何计算我写的文章字数 有点着急了啊,打心底麻烦各位 自由电荷从电池正极流出,由负极返回.这句话对吗?自由电荷从电池正极流出,由负极返回.这句话对吗? 社会学的产生与发展是如何与社会问题相关的 泌尿系统的主要器官是( 每个( )是由大约100多万个( )组成的?它又是由( ),( ),( )组成. 在闭合的干电池中,电场力电场力如何推动自由电荷充负极向正极运动?这电场力又由什么东西组成的? 这个字懿煊怎么读 谁知道在XP中如何计算我写的文章字数 有谁了解的说下吧,打心底感谢了北4 白云 处有人家,shen是哪个?深还是生?>O 关于社会学的一个理论大致描述如下,设定一个想法,然后我会往有利于这个结果的方向去考虑问题.请这个理论是什么理论. 有关摩尔根的知识 心电图机英文说明 ECG 8800说明1.PAER SPEED 2.FILER SENSITVITY 3.RESET 4.LEAD 5.SELECTOK 6.START 7.CHECK 以上是 机器上的按钮 英文个位大虾 帮我 什么是临界ECG 罕见日全环食降临 肯尼亚欲借此提振旅科普:人情冷暖,源自情绪好恶77岁贝卢斯科尼被曝与28岁女友秘密日本众议院通过自卫队法修正案日大学毕业生3年内辞职率高 官方疑企安倍晋三警卫车队连续两天发生交通事故新加坡两名少年不满被人抱怨挥棍打人被美国迷你航天机“追梦者”试飞降落时滑日本将设国家安全局 拟任命民间人士担美一女子7年对残障男友不离不弃感动众美售P3C首架飞机抵台 马英九称与日10月百城住宅均价环比上涨1.24%北京今日重度污染 邢台唐山长春“爆表军艺宣传处:不清楚李双江身体情况 请志愿军战士与女学生相约战后见面 62手机模型热卖成“学生救星” 不怕被老共和党参议员:美国安局可能在监听奥巴三季度游客满意度浙江宁波居全国第四军艺宣传处:不清楚李双江身体情况 请两部门启动救灾预警响应指导应对台风“\"来往\"拉拢客户赠流量 专家称类即将步入而立三十,说说自己的小计划铜川王益:镇政府斥资数千万建办公楼多那个诗歌天才和西藏的故事监狱选美大赛:高墙关的住罪恶,但关不性感美臀的完美攻略FIFA最佳阵容候选:皇马12人范尼:破我纪录可以,别赢曼联埃雷拉:要为留在曼联的梦想而战阿斯皮利奎塔:现在只是胜利的开始曝伊涅斯塔曾有可能加盟皇马14 个绝对惊艳的凯迪拉克冷知识,帅传蒙托亚一月份离开国米返回巴萨曝某球员称在范加尔手下实力减半盼的望眼欲穿的逼格定制皮面笔记本重磅:一信号暗示,明天A股或迎惊天大800元起!Fossil Q 系列智#最美翻包#五线小城“独臂”女汉纸的皓月点金:11.26股票打新开启,市只为身体健康,我运动8周瘦24斤记一次Ashford的维修经历股权流通平台股权通上线 曾获真格和黑
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘