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

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


苹果如何培养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聊如何玩转开发者生态 移动周报:再造Ruby女神背后的开发故事 超算什么都弱爆了:模拟一秒人脑计算需要8.3万处理器40分钟 人才短缺不能只靠等 看分析人士给硅谷的3个方案 九个相当有吸引力的WebGL演示 在windows98下怎样用windows API 取得中文字符的宽度? 我没装过Linux也不知道这个操作系统怎么装 和有什么不同!希望大家给点意见 我侵权了?? 如果在pb中使用fpt传送文件 有关于WinSocket编程,CB和VC之间应该如何进行接口 请问?将一窗口始终置于其他窗口的最前面,这段代码怎么写?在线等待! 关于控件下载 请大家帮忙看一下,这段调用存储过程的代码有什么错误?在线 [寻人]请红旗下的蛋过来领分喽。说话算话。 jsp后缀名大小写问题(急,在线等!) 100分!急!如何在程序中判断sqlserver服务是否启动? 有什么比较深入的c语言的书? Delphi出现问题,请帮忙解决。 用java编程序,将String数据通过存储过程存入数据库,为什么有的时候cs.setString()好使无常呢? 求助:如何读出mshflexgrid栅格表头项的内容的宽度? 高分!! 问一个引号的问题,望高手们不要见笑 pb中怎样得到某个字符的asc码? 谢谢 ChangeDisplaySettings最低可以把分辨率和颜色设为多少呀? DataGrid+CheckBox的问题(查了很多例子就是解决不了) 再次提问,sql2000的问题? 请问在vbscript中怎样判断一个数,是否能被3整除 MSN Messenger5.0发送文件到MSN Messenger4.6,为什么总是连接不上? sql2000的问题,谁能知道? 100分:誰有thinking in java 2 的中文電子書和例子代碼,給我一份吧? 关于将图形放大缩小的问题. jsp后缀名大小写问题(急,在线等!) sourceforge主站上不去了,那还有比较大的sourceforge站点?最好是美国的。 如何取得一个程序的内存占用率,cpu使用率等信息呢? 如何解决MSN Messenger5.0不能发送文件给MSN Messenger4.6的问题? 怎样把时间放到数据库表里,格式需要转换吗? 文件操作,帮个忙吧? simple question 60 points wait for your picking 如何卸载rose 分虽小,结得快的啊!讨论一下…… option explicit是什么意思 大哥大姐们!看一下嘛!帮帮我! 又一次被奶牛拒掉,而且有了注册机。 simple question 60 points wait for your picking (菜鸟的问题)在EditBox中怎么换行? 超级难题 SQL如何写??? 如何让WinCE支持DVDROM 請問如何在ASP.NET中實現從客戶機上傳文件到服務器? 新手问:我声明api,但是参数里有我没有定义的类型,pb报错,怎么办 关于Tclientdataset中commandtext的问题 关于按扭的简单问题 调用ejb的错误,请帮忙看看,帮我顶顶也给分,谢谢 关于lei的配置问题 java中 ,换行为\r\n ,空格为什么呢???? 关于快速排序的问题?在线等待!!! 如何在网页上显示动态图表?(送100分) 高兴,散分,收集故事喽,多讲多得,不讲不得。请斑竹留情,不要删除。 非限制性定语从句一定可以用where when代替吗 什么时候用介词加关系代词 大学英语四级2009年12月份的成绩在哪里查 will 的过去式的否定式是什么? 脑子太笨怎么办?本人在外面打工,他们都说我脑子太笨,我真的好难受,好痛苦! three——(five)of the water there has been polluted because of the factories nearby 大洋洲有几个国家 中国的主要河流有哪些只要名称就好 she knows three other foreigh lauguages ____ english. 请问填Bisides or except? 两种用法有什么不同?如果改成she knows the three other foreigh lauguages __english, 又有什么不同? 谢谢who will he invite to hia party?he will invite where在定语从句中只能作状语吗 我在博客上使用英文全是为了让你能够看懂.这句话用英语怎么说啊? where能引导非限制性定语从句么?Readers love the start of a story, ______ there are new and sometimes strange people to be met for the first time.A.where B.when C.which D.whether答案说应选where,因为where引起非限制性定语从句 where在定语从句中作状语和引导状语从句有什么不同? often,read,you,after,book,supper,do(?)怎么造句? where是否能引导非限制性定语从句? drive eat feel find fly get give go have hear hold know learn leave let lie lose may 的过去式是什么 donate sth to sb中sth充当什么语,to sb充当什么语? 写出下列动词的第三人称单数形式、现在分词和过去式.1.live ______ _______ ________ 2.walk _______ _______ _______ 3.pick _______ _______ ________ 4.lose ________ ________ ________ 5.look ______ ________ _________6.notice ________ We are having a good time in the park.(改为同义句)We( )( )( )( )in the park ask sth to sb ask sb sth Not only the air but also the water here has been polluted.(改为否定句)____ the air _____the water here has been polluted 英语单词过去式 lose,shop,teach,win,break,drive,worry,find,如题 give sth to sb的to能省吗? large amounts of 和 large numbers of 和 huge amounts of 的区别 where 引导的非限制性定语从句Factory life necessitated a more regimented schedule,where work began at the sound of a bell and workers kept machines going at a constant pace.1.where=in which=in the schedule 2.引导词怎么会用where的?sc 各项为正整的等比数列[An].a4*a7=8则log2*a1+log2*a2+.log2*a10=? The only thing that keeps me wishing on a wishing star 英语科学题要题目是英语出的,答案也要英文,最好翻译一下,谢谢了! You know,the only thing that scares me is that you might love him more than you love me.翻译. 求一首歌.男的唱的.有一句歌词是“love is the only thing that keeps us alive"如果条件不够我还可以回忆,总之求求大家了. 澳大利亚是大洋洲什么最大什么最多的国家? 中国多少个主要河流 英语与科学的几道题目We have (d )ourselves into three groups since this termA library keeper is another way of saying a (l )下列情况是消耗势能的?A箭能射穿靶心 B上发条的钟在走动 C风吹风车转动 D蜜蜂在空中飞 在加拿大有很多华人英语说 用be away from send sb sth something+adj造句 问几道英语科学题一.please draw lines to match the situstions.1.Overwatering A.can't germinate 2.Deep planting B.Lack of oxygen3.Dry conditions C.Weak,not strong 4.Locust seeds D.Soaking and scratching5.Apple seeds E.cold temperature二.填 求give,hurt,know,read,write,swim的过去式我今天就要,答得好会追分的 我国的主要河流 一道英语科学题Name the scientist who finish discovered that the earth revolves runned the sun? 求10道英语科学题.大家弄10道英语科学题来,要用英语出题的哦,现在没分,等我赚了给高分!我的意思是出10道科学英语题,而不是问我,顺便答一下第一个回答的人的问题:terminal velocity 的中 不忘记最危险的时候战歌飞旋..最危险的时候实际上是指的是什么的时候战歌飞旋实际上是指什么 非限制性定语从句中where可以用介词+ which替代吗 know的过去式谢谢马上 父亲坚决地对母亲说:“不是常对你说吗?我是不能轻易离开北京的.你要知道现在是什么时候,这里的工作多么重要.我哪能离开呢?”1、这段话有两层意思:一层是:( )另一层是( )2、用 澳洲与大洋洲有关系吗 加拿大讲什么语言?是美式英语吗?是他们教学讲什么语言 All the fish have_____(go)because lots of water comes inro the river. 非限制性定语从句中,连词which与where的区别 澳洲是大洋洲吗? 定语从句里是不是只有which和as能引导非限制性定语从句?who.where.when.whose.why都不能吗?14题A为什么不可以? 澳洲是指大洋洲还是单指澳大利亚? 开罗在尼罗河的哪边 Because of the water pollution,many fish have ___.die dead death 哪个? 为什么把大洋洲叫澳洲 grow的过去式是什么?还有hold...... when能引导非限制性定语从句吗? We need (five) apples.对括号里的词提问 —mother is a teacher A,Tom and Bill B,Tom's and Bill C,Tom and Bill's D、Tom's and Bill 's fish because water造句 five Jonamac apples怎么翻译?(特别是中间的那个词……) will的过去式是什么?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘