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

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


戴尔高管:服务器业务领先惠普五年时间 Hoodie:基于JS与CouchDB的超快速Web开发框架 设计优秀API的五大规则 盘点英特尔IDF2013第一天:技术产品新趋势 英雄组队去打怪!Nimble Quest开发团队访谈 云通讯平台打造本土Twilio 被逼无奈?传微软或明年秋发布iOS和Android版Office 欧洲各国政府将向大众开放公共数据 访联想云存储罗予晋:优化MooseFS,共建生态系统 磊友创始人赵霏:关于HTML5与Flash争执之我见 国际混乱C语言代码大赛优胜作品详解之“A clock in one line” 揭秘程序员大脑编程的七大“误区” 从Java到ObjC语言的桥梁:谷歌J2ObjC 0.7版本亮相 数据库管理系统ParElastic:打破常规 扩展云端MySQL 谷歌苹果专利纠纷意在战略无意和解 美法官为其苦恼 Facebook收购神秘移动软件创业公司Osmeta 修改驱动,使用Erlang+VoltDB实现每秒87.7万事务 横评美国IaaS“8匹狼”:AWS、GCE、Azure、Rackspace、SoftLayer、Dell、HP、Joyent 独立游戏精神释放的舞台:IGF China 2013作品火热征集中 三款热门入门级在线编程教程对比 微软modern.IE:网站兼容性测试利器 Localytics:AngularJS代替Backbone 代码减少一半 史上增长最快的SaaS服务Optimizely:13亿访客,10万次测试 IDF上的云计算故事 移动周报:百万年薪、微信疑云,老罗小马本周很忙 一个创业失败者的自述:我是如何搞砸一款产品 收入百万美元:一个放弃上大学的程序员 Cocos2D配Box2D:逆天小白程序员作iOS游戏 招聘移动开发,老板必问的10个问题 黑客用智能手机劫持和控制民航飞机 几小时即可使互联网瘫痪的黑客 现已加入谷歌 请问GridBagConstraints(有源码) 如何动态更换列表控件前面的小图标? 关于记录修改 用sdk编程怎样加入toolbar? table里的查询字段为什么不会显示数据? c#与interbase请教 C语言的大小问题都在这里面? 不要编译,你猜猜这个程序会有几个类型匹配的警告? 不要编译,你猜猜这个程序会有几个类型匹配的警告? 高分解问,请教高手!关天GIS! 如何判断窗体中的某个控件是textbox控件?或判断窗体中textbox的个数? 如何调用返回不定字段个数的存储过程 那里能找到rational rose 有关FORM与ACCESS数据库的连接 如何使用photoshop把图像缩小到指定大小? 关于某种文件关联的问题 为什么用net send发送的消息有关不掉,点了好多次确定也没用。 怎么保存到数据库中?急急急! 电脑出问题了。 tomcat4.01+apache2.046组合问题:单个的都能运行,...可以加分.. %u的问题 如何调整对话框上工具栏的状态 关于query控件的一个问题 如何结束一个线程? FastReport怎么将没有记录的地方也画上格子??? 我的oracle9装上去之后怎么有7。2G那么大??并且还连不上MANAGEMENT SERVER只能独立启动??请指教!! Fastreport与quickreport那个更好用? 进者有分. 强烈要求铲除全国所有的收容所!!! 要用什么软件才能将CMOS参数备份到某个文件夹中? 请问怎么在建表代码里定义关键字? 请问把数据写入ListView控件内,有什么办法可以快点? win2k server dns 求助! 我在易趣上竞的一个数码相机,只要250元,但是只能拍26张相。我不知道是真是假? 一个搞不定的恶意网站 cout与printf的问题 没有路由怎样用一台服务器实现300台左右的电脑上网? ResultSet里读出数据的参数问题,马上给分 netvt(唯她 v1.1.1),进来拿你应得的分 如果我的程序中用了VFP,但是用户可能并没有装VFP,有什么好的办法直接替用户解决了这个问题,而不是提醒他自己去装 怎么保存到数据库中?急急急! 我用treeview显示数据库的数据,增加一条新记录后,要怎么样才能马上在treeview显示? 无法传值问题,高手急救!!!!!!!!! 在线等待:怎么为datagrid控件的某一格赋值? 请教如何在input上传筐里面限制文件类型? java的图形设计比如swing有前途吗?大家来讨论下,迷惑中。。。 计算机静电问题!! 错误在那里 请教批量update出错问题 请问串口方面的? QQ使用MFC42.DLL, 数据库的记录有文本、有图片、我想给它排成word样式的A4版预览、再打印如何实现 邱少云在牺牲时夺取的是什么 近五年来,青蛙(田鸡)肉走上餐桌,假如人们大量捕杀这种农田中的青蛙.这样带来的后果是( ).“假如人们大量捕杀这种农田中的青蛙.”中的这种农田是指:水稻,稻螟虫,蚯蚓,蛇,蜜蜂,野 求“单丝不成线,独木不成林.”的意思?快 一朵鲜花点缀不出绚丽的春天.仿造例子,再写一句,与其格式相同. cf潘多拉角色有什么优点,比起灵狐怎么样? 主序星和超新星有什么区别呢?主序星和超新星有什么区别呢?主序星除了成为红巨星还能成为什么?超新星爆发除了能成为中子星外,能成为红巨星或黑洞吗? 一朵鲜花点缀不出绚丽的春天仿写 邱少云哪年牺牲的? 长大后我就成了你阅读答案1.写出下类词语的近义词以为( )美丽( )奉献( )希望( )2.歌词中的“小鸟”指的是( ),“你”指的是( ).抄出赞颂“你”的诗句.(共四处)3.歌词中的 西方管理思想产生的背景是什么? We don't do much b()with foreign companies.首字母填空 《长大后我就成了你》阅读短文答案 /1题小时候我以为你很美丽,领着一群小鸟飞来飞去;小时候我以为你很神气,说上一句话也惊天动地.长大后我就成了你,才知道那间教室放飞的是希望,守 如图三个直径相等的圆阴影部分的面积占一个圆面积的多少 一个物体放在一个斜面上,这时物体对斜面有压力吗 (生物)有人爱吃青蛙,为此便有人大量捕捉野生青蛙,这种做法会产生什么后果? 如右图:三个直径相等的圆.求阴影部分的面积占一个圆面积的几分之几 有些人爱吃蛙肉,为此便有人大量捕捉野生青蛙,这种做法会产生怎样的后果? 已知点a(1,0)和b(3,-1).若点m是y轴上一点,且满足△abm是直角三角形,则点m的坐标是 爱因斯坦的相对论简单来说究竟是什么 有些人爱吃肉,为此便有人大量捕捉野生青蛙,这种做法会产生怎样的后果? 如图,直线y=kx+6与x轴,y轴分别交于点A、B,△ABO等腰直角三角形. (1)求函数解析式.我会做2)已知点C(4,0),点P是线段AB上的一点,且△POC是以PC为一腰的等腰三角形,求点P的坐标 大家觉得WP系统手机的优点在哪? 圆O1的半径是2cm,圆O2的半径是5cm,圆心距是4cm,则两圆的关系是 A.相交 B.外切 C.外离 D.内切圆O1的半径是2cm,圆O2的半径是5cm,圆心距是4cm,则两圆的关系是A.相交 B.外切 C.外离 D.内切 宇宙飞船在月球着落,宇航员在登上月球后,在月面上用天平测物体的质量,结果是什么 你觉得手机WP操作系统怎么样最近喜欢上了WP操作系统 隐形飞机的隐形原理是什么?如何做到隐形? 海贼王超新星是什么意思 最新的WP手机操作系统怎么样,有什么新功能呀 隐形飞机为什么能隐形,的原理是什么? 超新星与新星有什么区别? 金鱼是卵生还是蛋生如题 金鱼是过卵生还是蛋生抚养后代的 已知两个圆的半径分别为3cm和5cm,并且两圆没有公共点,则两圆的圆心距的取值范围是 六月五日是世界环境日、老师号召同学们爱护环境,从每个人做起.如果你想提醒同学们保护好校园新栽的小草,你应该怎么和同学们说呢? 恐龙是怎样从我们的地球蛋生的呢? “有些人爱吃蛙肉,为此便有人大量捕捉野生青蛙,这种做法会产生怎样的后果? 英语翻译your father wants you to take a training,class on management skins,you are an wining,to do so your classmate persuades you to attend the training.帮个忙 在下追加财富 带2个负电荷的硫离子的化学式是什么 有些人爱吃蛙肉,为此便有人大量扑捉野生青蛙,这种做法会产生怎么样的后果 长大后我就成了你作文500字 综合知识抢答赛,答对一题加5分,答错一题扣2分.A学生共抢答了20道题,最后得分72分.他答对几道题? 那一天我忘不了 作文 英语翻译rt 3q 人生如絮,飘零在此万紫千红的春天.仿句例句:人生如絮,飘零在此万紫千红的春天.仿句:人生如————————人生如———————— 作文字数:500---600.. 长大后我就成了你 六下练习册P115页阅读答案 人生如絮,飘零在万紫千红的春天.相照应的句子 CF潘多拉好吗?我买了,到底有什么好处 请问大家"我被这件事情感动了"用英语如何翻译啊~口语化点的哦~ 失根的兰花第⑩段中 人生如絮,飘零在此万紫千红的春天 应当怎么理解 人们大量捕杀青蛙会产生怎样的严重后果? 三只蚂蚁一起走,中间的说我两边各一只,右边的说我左边有两只,左边的说我右边没有为什么? 人生如絮,飘零在这万紫千红的春天意思 大量扑抓青蛙,后果怎样? 独木不成林的后一句急 人生如絮 飘零在此万紫千红的春天 什么修辞 从跳高 等分析我主要玩JU ____,独木不成林 如果人类停止生育,但能长生,这个世界会怎样?长生的感念是:小孩永远是小孩,年轻人永远是年轻人,老人永远是老人,但都没有死亡但出现车祸或别人杀害也就是=世界上就少了一个人例:100-1=99, 如果大量捕杀青蛙,你觉得会造成怎样的后果.简答,100字以内. 文学——白杨树的湖中倒影 为什麽需要文学?了解文学、接近文学,对我们形成价值判断有什麽关系?如果说,文学有一百种所谓「功能」而我必须选择一种最重要的,我的答案是:德文有一个很 美国纽约发生持刀杀人案5人丧生 死者伊拉克首都发生多起汽车炸弹爆炸 至少韩拟从美国采购大批导弹 构建韩国型导韩拟从美国采购大批导弹 构建韩国型导华盛顿举行抗议反对监控墨前官员吁美出示监听文件四川泸州逾百名商贩不满涨租金集体罢市美国纽约5人遭持刀袭击身亡 警方已拘人大校内开设俄式西餐厅 网友赞高贵大印度连日暴雨致29人丧生 逾7万人强福田康夫:日本的发展需要依赖国际社会福田康夫:日本的发展需要依赖国际社会美国纽约5人遭持刀袭击身亡 警方已拘印度连日暴雨致29人丧生 逾7万人强卡斯特罗曾否认涉肯尼迪遇刺案日本学者著书称:钓鱼岛从历史上看从未胡万林培训收费1万起 信徒称不给钱说陈德铭:服贸协议问题不便多说 愿去台美国窃听让法国“很受伤”今日海外关键词(10月27日):脱亚欧洲最高活火山喷发熔岩 在空中形成巨昨日北京上空惊现观音菩萨!!!做一个特立独行的人KVB昆仑国际第三季度总收入增加64朋友圈刷屏的“90后男人娶了52岁新滴滴打车天价补贴后的惊人内幕:为什么1 元狂欢节 | App Store90年前后出生的人,都混成什么样子了热点丨乐视网百亿减持的资本运作闭环“沪港通”料将加速人民币国际化郭咏事迹入编山西省汾西县《汾西文史》红豆沙土司观察丨A股市场将迎来中概股回归浪潮穷养孩子等于富养孩子汇商11月20日外汇行业简讯P2P再爆大案,网贷骗术如何破解?90后,小人物也有大世界|专访星佳超级富豪缘何抢购钻石作为避风港投资向天才致敬:用“纳什均衡”解读中国牛“天价虾”“拔腿蟹”后再曝山东黑店 徒步不是矫情,而是另一种意义的苦行!葛天领衔疑似利用怀孕逼婚的10大女星
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘