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

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


传雅虎欲10亿美元收购轻博客网站Tumblr A Beautiful Mess:如何赚男人女人的钱 CSS、JavaScript开发者必备的10款最佳工具 IBM推出API管理平台 抢占API经济市场份额 2013中国云计算榜单之一:15云平台,谁主沉浮? 移动周报:百万壁纸、85后程序媛,我为梦想代言! 电信天翼开放平台:为App开发者免费提供云存储和云主机服务 Google新的Web UI库:Ploymer 研发周报:让开发者高效编程的10个新框架 拯救行将就木的PHP:谷歌为GAE添加PHP支持 PPT集萃(一):10位业内高管分享云计算技术理念与行业趋势 得益于苹果谷歌,未来可穿戴技术市场规模可达500亿美元 雅虎11亿美元押注Tumblr三大因素:用户、社交、内容 Perceptual:英特尔感知计算挑战赛 正式启动 吴义坚:创业去!我用深度神经网络,处理语音识别 浅谈用户体验的“反面模式 可穿戴设备又一站:增强现实眼镜CastAR 数字医疗投资将破纪录 投资人看好这些细分领域 Mayer又下一城:雅虎收购Tumblr推进移动化? 前端开发利器:代码预处理工具Prepros 一个轻量级的JavaScript库:Reactor.js [探讨] 用户体验设计师现在面临怎样的机遇和挑战? PPT集萃(二):淘宝、CloudStack等分享的架构经验与最佳实践 2013中国云计算榜单之二:64家云主机+云存储,错综复杂! 看Java技术基础的eBay如何评价他们的Node.js首次尝鲜 Jolla发布首款Sailfish系统手机 无缝兼容Android应用 NPD:全球智能手机出货量2013年将首次超过功能手机 聚合数据左磊:不走寻常路 做国内最好的数据聚合平台 从程序员到软件商 需要注意些什么? 共享软件海外营销策略与实战(上海站) 直接拿来用!最火的Android开源项目(完结篇) 《Inside COM》转卖 想知道怎么将StringGrid或者DBGrid中的数据导到Excel中呀?那位朋友有相关程序代码?100小分送上,不成敬意! 怎样再一个对象内部事件中得到该对象的属性 ? frame 问题,怎样重定位到本frame? 如何使用rs选取从现在开始倒数10条记录的内容? 在vbscript里能用rs("XXX")吗? 哪里有電子書下載?? 谁能搞到(或看到)一个rtf文件的内部格式,最好是一个带有文本框的rtf文件的内部格式。 代理服务器主要需要那些技术????? 请问main()起什么作用? 关于waveInClose的问题? 如何使用ADO存储XML文件? 如何在asp中创建一个文本文件到本地机?如何执行一个本地的exe文件? 高分求解决方案!请各位高手帮我看看! 请教关于 ie 某些document接口的问题。。。高手请进。。。 c和c++的struct有什么区别吗? 怎样给组件加上图标? vc++中如何访问ORACLE数据库? socket连接问题 关于windows xp下的jdk编程的问题!(高分求助!!) adotable 问题 用ado打开数据库的的速度问题!奇快!没有连接时间???来者有分!全天在线等 Flash控件大小问题? 关于css的一些怪现象??? 两个组件同时使用DATABIND方法时为什么只有一个组件能显示数据? 在数据库中有一word的文件,用blob存取,现在我想把其中的内容转换为txt。帮我!!!! Borland Enterprise Server 5.0的用户名和密码到底是多少??? 因女朋友在东莞虎门,想在虎门找份工作,不知有谁能帮忙?请看简历。 文件--打开--另存为...... 的问题?? 怎样通过知道控件的名字获得这个控件? 紧急 文件--打开--另存为...... 的问题?? 混杂模式为什么不能够应用到交换网络中? ----阿菜 调查版主,请不要删 PB中使用OLE时,碰到的数组问题,请大家不吝赐教!!! 因女朋友在东莞虎门,想在虎门找份工作,不知有谁能帮忙?请看简历。 如何使用程序动态改变数据环境的记录集内容?? 100 分求救消息、调色板问题 如何显示上下文菜单? 因女朋友在东莞虎门,想在虎门找份工作,不知有谁能帮忙?请看简历。 朋友,你好!你用的机器是windows 2000 server吗?你能发一个c:\winnt\mmtask.dll系统文件给我吗?高分! 公式 有个非常奇怪的问题,高手请进!给100 在一个多文档框架的VC程序中,Manframe类中为什么不能声明View类型的指针? 怎样在CListCtrl中添加表格线?象CListView那样,谢谢大家!!! 關于samba的問題 如何判断一个窗体是否打开状态 调查大家的老板,请斑竹手下留情 哪位大侠告诉我,嵌入式开发到底是什么? 为何在CListCtrl派生出的CTblist类中实现添加一列不成功 还是关于ASP中动态统计图生成的问题? 高中Cl常见的化合价 氢氧化钙和碳酸钙高温煅烧后分别生成什么?要化学方程式, 3a-2b+1的相反数 过氧化钠和二氧化碳反应生成什么? 对碳酸钙通电会生成什么?高温煅烧会生成什么? a的相反数是2b+1 b的相反数是3a+1 则a^2+b^2= 过氧化钠和二氧化碳反应只生成一种产物么除了碳酸钠之外还能生成什么能否生成NaHCO3??? 地球什么时候世界末日啊(进入光子带)好期待进入第五个元纪额 魏晋南北朝时期处于世界领先地位的科技有哪些?说明了什么? 什么时候地球将会真正的世界末日啊!? 我们地球是不是每刻都在等待着世界末日啊?说不定什么时候陨石掉下来这类的... 列举两汉魏晋南北朝时期居世界领先地位的科技成就都有哪些? 急求! 中国的邻国有谁 下列物质中,氯元素的化合价最低的是____?1.HCL 2.KCLO3 3.CL2 4.HCLO 有蓝色沉淀生成的中和反应 两个氢分子怎么表示.两个氮分子怎么表示.clo2中,cl的化合价是多少 下列四种物质KCLO3 CL2 HCL HCLO 氯元素的化合价按由低到高顺序排列的是?①②④③ ②③④① ③②①④ ③②④① 两汉魏晋南北朝时期居世界领先地位的科技成就有哪些?详细啊! ClO2的化合价是多少?有说明的 总结秦汉、三国两晋南北朝时期我国有哪些领先于世界的科学技术?这一时期我国科技发展的原因是什么? 有蓝色沉淀生成的复分解反应有哪些?急 计算 (a-2b-3c)^2 要用添括号法则 请列举三国两晋南北朝时期我国领先世界的科学成就(几个即可). 春秋,战国,秦汉,三国两晋南北朝,隋唐,辽宋夏金元,明清的文化特征,科技突出成就,思想突出特点 中国共有多少邻国?分别是哪些国家? 三国两晋南北朝时期,我国有哪些领先世界的科学技术人物什么的最好都有 蓝色溶液生成蓝色沉淀的反应 为什么在检验Cl离子和SO4离子时,+HNO3可以避免CO3离子等杂质的干扰? 中国的邻国共有多少个到底是12个还是14个啊,我资料上说12个,网上基本上都说的14个 为什么三国两晋南北朝时期时,我国的科学技术成就能够领先世界异彩纷呈? 我国的邻国共有几个? 中国共有几个邻国 有甲乙两家工厂排放的污水各含离子H+ ,Cu2+ ,K+ ,No3- ,OH- 中的三种离子(两场含有一种相同的离子)若将两厂的污水按一定比例混合,沉淀后污水会变成无色澄清中性溶液.下列关于污水的分析 SO4离子检验 CL离子的 检验 CO3离子检验 要详细实验步奏 怎样判别是否是氧化还原反应? 现在甲乙两种溶液中,共含8种离子,分别为H+ 、Ag+、k+、Ba2+、OH-、NO3-、CO3-,且两种溶液里所含的离子各不相同.已知向甲溶液里滴加紫色石蕊试液,溶液变蓝色,说明甲溶液成( ),那么甲溶液里 中国邻国 去括号:d—2(3a—2b+3c)还有—(—xy—1)+(—x+y) 有甲乙两家工厂排放的污水各含有以下离子H+ Cu2+ K+ NO3- OH- 中的3种离子(两个工厂含有一种相同的离子)若将两个工厂的污水按照一定比例混合,沉淀后污水会变成无色澄清中性溶液.下列关于 某溶液中含有大量的cl-,CO3 2-,SO4 2-三种离子,如果只取用一次溶液,分别将三种离子检验出来,应该怎么为什么不能先硝酸 硝酸银 氯化钡 怎样辨别氧化还原反应比如在多个反应中区分出氧化还原反应 加热试管内的液体物质时,用来夹持试管的仪器是什么 邻国,中国 中国有几个邻国指的是哪几个 给试管里的液体物质加热的方法? 某溶液中有K+、Cl-、CO3 2-、SO4 2-等,要从溶液中分别检验出CO3-、SO4 2-、Cl-,请完成下列实验设计(1)试剂:先加______,根据_________现象,确定CO3 2-存在,再加_______,根据________现象,确定SO4 2-存在; 地球什么时侯会到世界末日 给试管中的液体物质加热时给试管中的液体物质加热时,试管与桌面(),先进行(),再小心对准(),切不可将试管口().给试管里的固体加热时,试管口应略向(),对试管先(),再().滴 中国邻国谢谢 下列仪器,可用于加热,但却不能直接加热的是A. 试管 B. 燃烧匙 C. 烧杯 D. 蒸发皿 K4[Fe(CN)6]与2价铁离子反应生成白色沉淀,但很快就会变成蓝色,这是为什么?求相应化学方程式就是黄血盐与2价铁离子 铜铅分离..铜锡分离.铜锌分离.如何提取?.求各位大哥大姐帮下表面裹着一层有锡的.有锌的.有铅的铜 三种该如何在不损耗铜的情况下将其分离开?又该如何把铅.锡.锌提取出来 能直接加热的仪器与不能直接加热的仪器 铁氰化钾与二价铁反应是蓝色沉淀吗? 中国的邻国历史与社会の(⊙o⊙)哦 氧化还原反应的判断氧化反应:还原反应:氧化还原反应: 某电解质溶液中,可能大量存在有:Ag+,H+,Cu2+,CO^3 2-,OH-,Cl-某电解质溶液中,可能大量存在有Ag+,H+,Cu2+,CO32-,OH-,Cl-离子,你认为一定有的离子是______,一定没有的离子是__________;还需要进一步确认的离 含有Na+,Cl-,SO4离子,SO3离子,CO3离子的溶液如果使该溶液中的阴离子都迅速减少,可加入的阳离子是_______. 碳酸钙高温煅烧生成二氧化碳,硫酸盐高温煅烧能否产生三氧化硫?如题. Ag+和OH-;Cu2+和CO3'2-能共存吗AgOH,CuCO3是沉淀吗,具体反应方程式都写出来,还有碱试碳酸铜的双水解也讲一下,他们在溶解性表不是"-"吗,不存在还是遇水分解,方程式写下
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘