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

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


WebKit华丽转身:欧朋浏览器8.0新鲜出炉 分析师称应出售Bing?除非微软倒闭,否则不可能卖Bing Go Mobile沙龙第二期:软硬整合与创客精神 专访西电黄宝林:《基于GPU的并行NMF网络聚类算法》获奖背后故事 友友姚宏宇:用C,C++和Java实现自主研发之后,放开心态迎“高朋” 新技术对传统学科的颠覆:系谱网使用大数据寻亲问祖 IDC:2015年全球平板电脑出货量将超PC Web开发者的福利 30段超实用CSS代码 库克出席D11科技大会:苹果公司没有陷入麻烦 千兆的带宽是不够的,最新研究将我们带入400G时代! 告诉你一个事实:移动互联网依然不大 一切才刚刚开始 戴尔的10亿美元云扩建计划到底是什么? iOS vs. Android,应用设计该如何对症下药? 扁平化设计五大原则 16种折磨开发者的方式 2013年度中国优秀开源项目征集活动正式启动 技术趋势:产品设计向“钱”看 服务器领域:旧时代已过 新时代正在降临 速度与金钱的碰撞:F1赛车将搭上大数据的东风 中国·北京第一届开源大会Hadoop专场侧记:Hadoop已经成为大数据分析平台的标配 Marissa Mayer为何带雅虎重回门户时代? 开发者最爱的三款开发工具 Facebook开源JavaScript库:React 硬件天堂深圳行:从Seeed Studio、Knewone到柴火创客空间 消费应用开发难赚钱?做个企业app store吧 开发开源软件的智慧:够简单,很好用 历届中国云计算大会PPT集萃(终章):架构到实践的全面解析 透过现象看本质:详谈数据可视化 专家观点:HTML5无法彻底抹杀Native应用 Google地图工程主管Raj Shah跳槽至微软在线服务部门 微软证实Windows 8.1引入类“开始”按钮 系统6月26日开放下载 请问各位高手,java项目经验主要包含什么东西? 如何判断一个线程已经处于死循环或不响应(即系统CPU占用率高达98%以上)?求助!!! 救我啊!想在局域网的网关机上监控其他机器发出的http请求 怎样快速选取checkbox 请问怎么把几个txt文件合并成一个文件,急!!!!在线等待 关于在广州建立《江西老乡在广州的备忘录》倡议书! 关于程序编译的问题!!!! cast问题 一个简单问题? 怎样删除多条记录,象邮件系统中的删除邮件的操作? Bof或Eof有一个为真,或者当前记录已被删除,请问MDAC2.5哪有下载? 请教:oracle 7.4.3 触发器的错误处理 .htm传递参数! 一个比较菜的问题,我的VB6中窗体的name属性没有,请问怎么加入. 简单sql语句求助!!! 如何在vc++中获得当前用户的用户名? 為什麼在我機器上建立與其他機器的oracle連接的bde出錯???連sql server都沒問題,破oracle真亂!!!!! 真气人 急,用TADOTable控件怎么对字段进行查询?请举例说明!谢谢! 用fireworks 4.0制作动画,请问怎么样用一张图片做背景? 在用VC调DLL时报错,error C2171: '*' : illegal on operands of type 'int (__stdcall *)(char *,char [])'怎么办? 一个打包的问题 在表格式的数据窗口中显示image的问题??欢迎讨论,拒绝灌水! 128MB内存跑BCB6好像有点那个? 请问有人知道哪儿有打印条码的源程序吗? 有关INSERT 插入数据到ACCESS 数据库,为什么出错,急,急,急,菜鸟请教,马上给分 vb.Net的较大的Project编译时,经常出现某些.resources文件找不到,为什么?气死人了! 我很菜,望高手帮忙! 小毛头毕业分在工程部,望个为师兄指点应该注意些什么? Java Applet 中变量的问题请教. 这儿看看! 请帮忙看看这是怎么回事? TRIGGER 请问热心人帮帮我这个热心的学生. 如何安装acm控件 到底应该先看VC++技术内姆还是先看MFC深入浅出? 请问如何使打开的窗口在屏幕正中间? 怎样产生一个全局唯一标识ID? 双套超级查询器!!!上传完毕!!! WINSOCK控制问题 编译时出现这中错误提示是什么意思?怎么解决? 请各位热心人帮帮我这个热心的学生. 100分求助。在无向图(图中有闭合的点集)搜索给定两点之间的所有路径。 调用中文输入法,程序如何实现 VS.NET安装:小弟实在是愚笨 怎样添加DNS服务包?? 100分求助。在无向图(图中有闭合的点集)搜索给定两点之间的顶点。 VS.NET安装:小弟实在是愚笨 这样在Java调用Excel程序 如何在nt4.0下查看本机器装了哪些硬件(鼠标,键盘,显示器,图象采集卡等信息) ####VB初学者的小问题,散分100!!##### 围绕 中国梦---阳光下的成长 为题 (儿童诗) 自创 (cosa/1+sina) +(1+sina)/cosa半夜在做数学 帮忙化解一下(cosa+cota)/(1+sina)帮化解一下 顺便问一下 以后题目里有cota 的怎么办 《画鸡》唐寅全文的解释 这道定积分的题怎么求呢? 若sina+cosa=1 则sina-cosa的值为 唐伯虎什么画得最好? 这道定积分的题怎么做出来的 已知a是第三象限的角,化简根号下1+sina比1-sina-根号下1-sina比1+sina (1-sinx)/cos(x/2)-sin(x/2) x趋近π/2求极限 谁知道海洋变色龙是哪两种动物啊?听说海洋变色龙是章鱼和乌贼 我搞不清楚, 已知a是第三角限的角,化简根号(1+sina/1-sina)-根号(1-sina/1+sina)写过程 怎么用matlab拟合极坐标曲线物理实验数据处理作图 现代码如下:theta2=linspace(0,2*pi*35/36,36);i1=[192,185.5,173,149.9,109,87,50,30.9,10.2,4.9,10.4,26];i2=[58,85.5,118.5,151.6,161.5,159.2,192.3,159.1,161.6,124.1,111.4,74];i3=[4 求邓小平文选读后感,800字左右,最好是原创, 球体体积怎么算? 球体的体积怎么算啊?为什么?还要告诉我原因滴 求《鲁宾逊漂流记》读后感,1500字左右1500左右的《鲁宾逊漂流记》读后感急用O(∩_∩)O谢谢 已知A是第二象限的角,化简根号下(1+sinA)/(1-sinA)-根号下(1-sinA)/(1+sinA) 求形容唐伯虎句子或者诗句就像“风流倜傥”之类的词语或者诗句,要尽可能多一点,经典一点的!最好是对他的绘画、书法等评价的词语。 《我是90后》读后感 1500字左右, 秋水接天三万顷的意思是什么 唐寅的诗句注解头上红冠不用裁,满身雪白走将来;平生不敢轻言语,一叫千门万户开. 读后感1500字左右 秋水共长天一色中“长天”是什么意思?同题,“长天”二字是动词还是名词,什么意思?谢谢大家。但是我主要是想问“长天”两字该当如何理解。 印刷厂装订车间的工人装订了230本书,每25本打一包.再装订多少本又可以打一包? 夏至未至读后感1500字左右 秋水共长天一色的上一句是什么? 已知A(2.0),B(0.2),C(cos a ,sin a),且0 关于快乐成长的诗!关于快乐成长的诗(能念三分钟左右就行了)急啊! 秋水共长天一色 已知α,β为锐角,且(1+sinα-cosα)/sinα·(1+sinβ-cosβ)/sinβ=2,则tanαtanβ= 英语翻译对其中的字要逐个翻译 小石潭记的原文翻译谁知道 做梦梦到好多蜘蛛~是啥意思? 若sinA+3cosA=0,求sin(π+A)cos(π-A) 毛泽东读书的名言警句 红领巾象征着什么? 已知a属于(π/2,π),且4sina=-3cosa,求cos(a+π/4)/sina的值 毛泽东的读书名言20条 已知@,p均为锐角,且cos(@+p)=sin(@-p),则sin@-cos@=? 2sin^a-cos^a+sina*cosa-6sina+3cosa=0啊这个式子怎么分式因解?就是把它变成两个积的形式:如A*B=0的样子? 关于毛泽东读书的名言警句10条 红领巾象征着什么啊请答出来 描写山的比喻句不是用山比喻什么,要八句 求证cos(2分之3π+a)=sina 化简 根号下(1+sina)-根号下(1-sina)a为第一象限的角 请用一个比喻句描写你喜欢或熟悉的一座山的景色. 邓小平文选读后感 3000字左右 球体的体积怎么算?比如说现在有个6立方的球体,怎么来计算它的直径和半径?附上计算公式.写明白些,本人小学都没有毕业 什么成语里面既有马虎这个词,意思又是形容马虎的?是个成语,成语四个字,字里有“马虎”,意思还是形容马虎的! cos(a+π/6)=-4/5 sina=? 请问这个电路原理图用什么软件的画啊如图,有谁知道这个图是用什么软件画的,感激不尽 那两种动物别称为“海洋变色龙”? 已知抛物线C的顶点在原点,焦点为F(0,1). (Ⅰ)求抛物线C的方程; (Ⅱ)在抛物线C上是否存在已知抛物线C的顶点在原点,焦点为F(0,1).(Ⅰ)求抛物线C的方程;(Ⅱ)在抛物线C上是 求能画电路原理图的软件在EWB protel CAD或其他中,找一个软件.由于有些电路原理图的原件在元件库里并找不到,自己画库元件也麻烦.(只要求快速画原理图,并不需要仿真正确)在word EWB protel CA 形容 舒缓的 四字或成语 要内涵的 求顶点在原点,焦点为F(5,0)的抛物线的标准方程 用什么软件画电路图好? 能表达后来居上意思的四字成语有哪些? 《小石潭记》翻译 唐伯虎画什么最出名?有说画美女,有说画山水请有知道答案的朋友帮我一下他没画过山水的画吗?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘