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

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


未挖掘到足够信息:非收集数据少,是利用率只有1% 下一个帝国:谷歌收购初创公司DNNresearch 苹果更新Apple Store应用,可查看零售店库存 开源软硬件:福特汽车的OpenXC计划 Temple Run:Oz稳坐付费榜头把交椅,迪士尼名利双收 Facebook开放图谱示好开发者 新增书籍电影等九项操作 源代码管理的六大视觉模式 最新算法面世 可提高云数据库性能 分析称平板电脑应用将占全球应用经济的35% 三大运营商对微信等OTT业务摊牌 Runscope联合创始人John Sheehan:API已死,API永存! IBM在京发布大数据白皮书 提出五项关键建议 Twitter开源Parquet 将支持Impala加速实时查询 使用Go代替Ruby,将服务器数量从30降到2 初创公司SwiftStack:“放在盒子里的S3” 赫尔辛基:全球移动游戏开发者的“黄埔军校” 不只属于三星!uMoove将发布“眼球追踪”SDK Android掌门人Andy Rubin宣布辞职 Chrome主管接任 openSUSE 12.3发布 弃MySQL拥抱MariaDB Meteor:让实时Web App成为主流 别了,Google Reader!谷歌于7月1日关闭服务 “天网”降临 机器人或将崛起? 涅槃重生:Qt 5 for Android预览版发布 Google Play将逐步移除广告拦截应用 Shapeways公司开放API 3D打印时代来临 37signal设计师眼中的iOS与Android系统 VMware/Oracle向公有云拓展生态系统 AWS“山寨”技术伙伴创意与产品,是自我完善还是杀鸡取卵? 苹果发布OS X 10.8.3 新版Boot Camp可支持Windows 8 恭喜!麻省理工两密码学教授获2012图灵奖 Rovio的逆袭,发布首款RPG游戏“克鲁德一家” 如何获得DataReader中的行数? Libran() 请进 什么关键时候信赖全球通??屁话,大家来帮忙鄙视一下移动!!! 如何设置Log文件,记录数据库的操作信息? 请问哪里可以买到数据线把手迹和电脑联起来 蓝天,我有一个CELL表格的问题? 请问那里有bcb6.0下载(100)分 用DataGrid进行自定义分页后,页面切换时,如何方便的记录嵌在DataGrid中的Checkbox的状态? 关于GHOST的问题,现在的版本是否能刻WIN2000,以及域网中广播式刻录的问题,急!!!!!!!!!!!!!!!!!! 图片显示问题 请问有关程序员的考试 AntBrother(蚁哥) 请进 AntBrother(蚁哥) 请进 帮忙,如何屏闭TextBox控件的其它字符输入,只能输入数字!!!! 下的一段代码,在BCB怎是报错 大难题:在Win2000或者WinXP上安装Oracle7.3.3 ???? 一个很菜的问题:怎么查看所有的变量或属性值? 请问VB.NET如何获取IE收藏夹的位置? 迷惑不解,请教了 怎么用按钮来控制复选框的全部选中呀??? Excel中宏的问题!急 大难题:在Win2000或者WinXP上安装 Oracle7.3.3 ??? 关于窗口的大小和位置的问题 视图指针问题,高手帮忙!谢谢! 寻觅图象处理高手共同合作,欢迎朋友们去偶的站点申请免费主页空间 中秋佳节,兄弟们发Cash了吗 ? 寻觅图象处理高手共同合作,欢迎朋友们去偶的站点申请免费主页空间 寻觅图象处理高手共同合作,欢迎朋友们去偶的站点申请免费主页空间 用户控件 高手请进!!关于线程问题,本人在线等候!!! 如何禁止局域网中的MSN `×××怎样验证一个文本宽是否输入了汉字××× 为什么我的程序编译后跟没编译一样!大家救救我啊!急! JAVA发展趋势是什么? WEB服务器问题?????? 如何处理编码的问题 100分求助!关于多选框的问题!急啊!在线等!! 关于布局管理器的问题 recvfrom 的超时怎么不行呢? IIS不能访问asp文件,只能访问html文件,而且网页中的所有弹出类网页链接全都打不开(在线等) 在JSP里边怎么动态插入文件 设计物流系统应该考虑那些问题,实现那些功能,拜托 设计物流系统应该考虑那些问题,实现那些功能,拜托 php中的register_globals为off,怎么获得url中传递参数 设计物流系统应该考虑那些问题,实现那些功能,拜托 上海日記:震撼 这是为什么? 在JBuilder 下 如何单步debug SOAP 服务器端程序? 求助:手机短信是以什么编码发送的呢?UTF还是普通的GB2312? 另外移动和联通用的编码一样么? 急求《c#高级编程》2nd 英文版! windows 2003 下我的p4x266e 板载声卡驱动好了,但是没有声音,怎么解决? 如“鼠目寸光”“胆小如鼠”等带“鼠”字的成语. 启发和启迪的区别在哪里? 全球金融自由化程度最高的是哪个国家 因式分解:a³b-ab³一步一步走,不要太快,我是预习,还不太懂. 中国为什么要渐进式金融自由化 如果a^(x^2-5x)>a^(x+7)(其中a>0,a不等于1),求x的取值范围? 金融自由化不包括A.利率自由化 B.业务自由化 C.监管自由化 D.外汇自由化 (a∧2+a+2)∧-5x>(a∧2+a+2)∧(x+7),求x的取值范围 有没有讲述金融自由化的纪录片? 如果a的x平方-5x>a的x+7(a>0.且a≠1),求x的取值范围 已知a^(x^2-5x)>a^(x+7),(a>0,a≠0),求x的取值范围. 首都航空长沙飞杭州航班受爆炸物威胁备遵义市委书记廖少华涉嫌严重违纪被免职贵州遵义干部群众坚决拥护对廖少华进行中日韩共用常见汉字国际学术研讨会召开快讯:首都航空JD5662长沙飞杭州港嫩模当街拆胸罩底裤 尺度之大吓坏路美主播为“杀光中国人”言论向示威者鞠中国企业助力几内亚“造城”梦大师作品巴黎展现“美丽中国”土耳其:中国当代建筑展展现“蓬勃中国中组部:领导干部退休后三年内兼职须经绿瘦《男左女右》前任话题引发百万讨论Sakti3固态锂离子电池将特斯拉续官网客服说法:iPhone 6s/6柯马AMTS 2014之旅圆满成功【场合着装。渔】Hi,风骚小长假。出17岁少年“酒后乱性” 强奸未遂逃跑AT&T也是蛮拼的,在Google家不敢闯 , 不敢拼,你要青春有什么用鹤壁全面排查保护水资源 遇违法现象可“猎头”辛小蝶:招聘网站再火也干不掉牛市里的投资心态我意花丛森林之星网游之无敌菜鸟军婚有瘾说妖异能天下去她ma的天使神魔天下田园收获季帝王传乱世奸雄外滩历史纪念馆旅游五三惨案纪念园旅游唐人街旅游青华山旅游地藏寺经幢旅游天宝公园旅游南诏德化碑旅游观音堂旅游常宁宫旅游鱼川村旅游少昊陵旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘