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

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)。


如何管理和优化日益增长的代码复杂度? SDCC 2013大会讲师名单议题更新 8月1日前3.8折优惠截止 IBM Rational首席技术官:DevOps是一门哲学 Mozilla联手黑莓推进Web安全技术,推出开源测试平台Minion 苹果如何培养SOHO一族高效工作 再造Ruby:CryENGINE 3.5游戏引擎特性详解 Eclipse基金会涉足物联网,M2M标准是否已获东风? SDN部署前必须考虑的7个事项 【云先锋 40】初创公司DataStax:专注于Cassandra,三年融资8370万美元 内容创作工具的革新:Facebook前CTO推文字处理应用Quip 微软为Android手机推出Office 仅面向Office 365用户开放使用 编程、创业、开源感悟——SDCC 2013讲师云风专访 原生广告:移动推广的热门新宠 隐私之战:金山手机毒霸宣布开放安全检测平台 世界人民的头上有张监控大网——Xkeyscore 美国“监控门”情报收集系统 X-Keyscore 技术揭秘 为啥REST如此重要? 并非PHP Frameworks而是WordPress让PHP更加流行! Twitter Bootstrap深受开发者喜爱的11大理由 假如3D打印机也有“撤销”键 大数据的游戏运营:不能起死回生,只能锦上添花 15个步骤创立技术公司,并收获千万用户(一) 红帽再发力 将MongoDB整合到Linux系统 ZestFinance:前谷歌CIO创立的机器学习+大数据分析公司 7月份浏览器份额:IE仍最受欢迎 Chrome成最大赢家 2013 Q2 Android手机出货量再创新高 iPhone三年来新低 如何一个人打造日PV百万的网站架构——SDCC 2013讲师曹力专访 【一周观察】动辄9位数以上的投资,云数据中心缺口巨大! 硬件创业到底有多火? 知名网站分享:PHP代替Perl,Redis置换MySQL,日处理过亿PV 涨姿势了:Unity CEO聊如何玩转开发者生态 如何将图标文件存入到一个dll文件中? ********杨家将请进********** 求救!!为什么我一打开windows就出现说缺少dll文件,storm.dll,还有load.exe.是为什么呀? 请大虾出手:MFC的DLL工程, 我实现了把一个dll工程的menu装载到我的主工程,但与其对应的ToolBar怎么调出来呢??我很着急! 在mdi表單中調用設為最大化的子表單時,它首先顯示小的子表單,然后才把它最大化,影響美觀,有何辦法解決? 关于在菜单中陷入文本框 20分求助有关SQL数据库的问题(为什么select...into语句无法执行) 哪有里Crystal Reports可以下载(无内容)? Where the 广东外贸外语学院 关于ODBC客户机端配置的问题 谁能给我一个delphi连接access数据库的实例,小弟万分感谢!!!!!!!!!!!!! 我机器里,98,2000装在C盘,XP装在D盘,现在我想只留下XP,不知道该怎么处理???????????????????????????? 如何实现5M以上的文件的上传 从windows进入unix Oracle 中文输入 是否onkeypress和onkeydown不能同时使用呀? Delphi 5下要做一个多 Y 轴的曲线图形,如何实现? 哪有xteamlindows下载?? 万分感谢!!!!! borland 会不会出一个 C# Builder? 乱码,头大了,不知道为什么pb导入excel怎么办 数据统计问题,请大侠门帮忙!急急急!!! 求解ZModem通讯协议源程序----有谁用过CZModemCore 我也不知道对不对! 最高级的问题?搞一个专业的VC程序员基地~~~~~~ 在研究directshow filter的push模式的兄弟请进 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题;否则我快下岗了 有两个问题,每题40分,马上给分!!!! 如何使用打印机? 在爱情方面谁能做到这一点? 谁有 file cutter v1.4的注册码? 有急用! 搞一个专业的VC程序员基地~~~~~~谁愿意加入????? 最新发现:原来C++Bilder的项目文件(.bpr)是XML格式的! 关于FAT32和NTSF的问题 如何用VC实现Email的发送? 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题;否则我快下岗了! 搞一个专业的VC程序员基地~~~~~~需要网页制作高手!! ADO 的用法 m_pRecordset->Fields->GetItem(index)->GetName() 关于CRichEditCtrl的问题之二,取的当前可见行数? 请问在哪里下载IMAIL SERVER???各位帮帮忙!!! 高手请回答,ADO和BDE到底有什么区别,你选择谁?为什么? 高分求教!!!!!!!!!!!!!!!!怎样得到局域网上所有的机器名?(普通WINDOWS网络,用VB?,好象用WNET API可以的) 如何安装com.ibm.bridge2java.*这个包阿? 有人吗???求救! 你也许也会遇到这样的问题? 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题!!! 大虾看过来. 一个access表一万条记录,想转到Mysql下(Mysql在Linux下)用什么方法和什么语言来做好? rs.CursorLocation=aduseclient是什么东西? 800分+工资管理原代码,如何解决ActiveReports打印图片的一个很难题! 简单SQL,免费送分! 历史是什么,它看不见摸不着 0.8吨等于几千克? 在比例尺为1:4000000的地图上A、B两地的距离是5厘米在比例尺为1;4000000的地图上A\、B两地距离5㎝同时从A、B两地相向开出一辆汽车每时行35㎞另一辆汽车每时行45㎞,找这样的速度,两辆车几时才 瓦楞纸板耐破强度得到的KPa怎么转化为磅,边压得到结果KPa怎么转换为磅/英寸 0.01吨等于几千克快来帮帮我 KPa和KN怎么算 海拔三千米是什么意思 0.433吨等于几千克? KPa和KN的换算 一个人从空中三千米的高度掉到海里 身体正面接触海水 接触的瞬间会不会将人拍死《平面掉下来》 MPa 与 kPa 或 Pa 之间换算? KN换算吨 上帝你在哪里?可是,我看不见你! 用一段话写猫睡觉的样子! 填空 一根绳子第一次用去20%,第二次用余下的20%,两次相差2m.这根绳原来的长( )米.一根绳子第一次用去20%,第二次用余下的20%,两次相差2m.这根绳原来的长( )米. 因为天气不好我们看不见下面的东西 猫怎样睡作文 一根绳子第一次剪去全长的30%第二次剪去余下的20%剪了两次还剩下全长的百分之几 Kgf/mm是什么单位?130Kgf/mm是什么意思? 一根10米长的绳子,第一次剪去它的一半,第二次减去剩下的1/3,第三次减去剩下的1/4,如此继续下去,第五次剪后,剩下的绳子长多少米? 配制药水9009千克,如果按1克药粉加8千克水来计算,共需要多少千克药粉? 在比例尺是1:2000000的地图上量得甲乙两个城市之间的距离是7.5cm,如果该画在比例尺为1:3000000的地图上,那麽图上的距离是多少cm? 19.5KN换算成kgf是多少? kPa是什么含义是压强,还是压力 在比例尺时1:2000000的地图上测的长是4.5cm,如果把长改画在比例尺是1:3000000的地图上,应画多长?要列算式,不要打一些横杠! 有一个绳子10米长,第一次减去一半,第二次减去剩下的一半,剪7次后,剩下多少米 硬度衡量单位KPa,与压力单位kpa是相同的物理意义吗? 什么东西别人看不到,而自己还可以欣赏到的那? 青海玉数海拔三千米缺氧嘛? 在比例尺是1:4000000的地图上量得甲乙两地之间的距离为20厘米两列火车同时从甲乙两地相对开出,甲每小时行55千米,乙车每小时行45千米,几小时两车相距100千米? 为啥子鸟晚上看不见东西? 在比例尺是1:6000000的地图上,量得南京到北京的距离是15cm.南京到北京的实际距离大约是多少米? 在比例尺是1:4000000的地图上,量得甲、乙两地相距20厘米,实际多少米? 为什么人在黑夜里看不见东西? 小明对小红说能用掉一生三分之一时间的东西是什么 1mm²与m²的换算单位 用什么东西在纸上写字看不见? 大家都在追求什么?世界上什么东西最值得我们花一生时间去追求呢? mW/cm²怎么换算成W/m² 有一根10米长的绳子,第一次剪去一半,第二次剪去剩余的一半,……剪七次后,剩下的绳子长多少米?A 六十四分之一米 B 一百二十八分之一米 C 六十四分之五米 D一百二十八分之五米 人的一生是短暂的,决不能白白把生命浪费掉 这句话对应的名言是什么? ψm与mm单位之间的换算关系 木啊有一根绳子长10米,第一次剪去一半,第二次减去剩余的一半,.剪7次后,剩下的绳子有多长? 真空能不能以绝对压力(绝压,PSIA)为单位?如果不能,下图标出的部分是什么意思? 十斤铁和十公斤棉花哪个重? 一根绳子,第一次用去了一半,第二次用去了剩下的一半多6米还剩3米,绳子长多少米 为这么压力传感器的标称值是psia,而psia是压强单位!我想知道传感器的测量范围这么求! 10斤棉花和10斤铁 哪个重 居然有人说一样重 棉花怎么可能比铁重 没常识 什么东西看不见摸不着但很重要? 畦是什么意思?是个单位吗 十斤棉花,和十斤铁那个要重? 什么东西看不见、摸不到, 第一次准备去海拔5000米的高原地区,都要注意哪些问题?三月中旬就出发,而且现在还有点感冒! 10斤棉花和10斤铁哪个重? 什么东西对于人来说看不见摸不着但很重要? 浪费掉人生三分之一时间的会是什么东西? 10公斤棉花和10斤铁哪个重?我就被难住了 什么东西看不见却摸不到? 在比例尺是4000000分之1的地图上,量的甲乙两地的距离是15cm,一辆汽车以每小时60千米的速度从甲乙两地开要几小时(用比例) 在比例尺是1:4000000的地图上,量得A,B两地的距离是20厘米.在比例尺是1:4000000的地图上,量得A,B两地的距离是20厘米.一辆汽车以每小时80千米的速度从A地到B地,几小时可以到达?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn