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

iOS UIView动画实践(二):Spring Animation与人机交互

HTML文档下载 WORD文档下载 PDF文档下载
本文为iOS UIView动画实践系列第二篇。在讲解如何使用UIKit创建最基本的视图动画后,作者以弹簧动画让UI变得鲜活起来,并将动画运用到人机交互中,让视图在用户点击操作时以动画的形式给予响应和反馈。

前言

通过上一篇文章,大家应该学会了如何使用'UIKit'创建最基本的视图动画,包括如何指定视图某属性的起始值和结束值,以及动画持续时间、动画延迟时间、动画选项等概念。

但是目前大家实现的动画不论是位置移动还是大小改变都是以一个单一的方向在运动,比如位置从A点到B点,大小半径从1到2:

图1

在这篇文章中,大家会学到更复杂一点的动画,让视图在一次动画中的运动轨迹像弹簧一样,有多次不同方向的运动,最后停止在终点:

图2

如果给位置移动的动画添加弹簧效果,那么视图的运动轨迹应该像下图中展现的一样:

图3

这会使你的动画看起来更逼真、更真实、更贴近现实。在某些情况下带给用户更好的用户体验。那么让我们开始学习吧。

Spring动画

我们还是以上一篇文章中的登录页面为例,大家应该发现了那个呆板的登录按钮吧,我们今天就让它Q弹起来。

打开ViewController.swift,在viewWillAppear()方法的底部添加如下代码:

self.loginButton.center.y += 30self.loginButton.alpha = 0

让登录按钮在屏幕呈现之前位置下移30,并且让它透明。然后在viewDidAppear()方法的底部添加如下代码:

UIView.animateWithDuration(1, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .AllowUserInteraction, animations: {     self.loginButton.center.y -= 30     self.loginButton.alpha = 1}, completion: nil)

上述的代码大家是不是似曾相识,没错,依然是UIView的类方法,不过又多了两个参数:

  • usingSpringWithDamping:弹簧动画的阻尼值,也就是相当于摩擦力的大小,该属性的值从0.0到1.0之间,越靠近0,阻尼越小,弹动的幅度越大,反之阻尼越大,弹动的幅度越小,如果大道一定程度,会出现弹不动的情况。
  • initialSpringVelocity:弹簧动画的速率,或者说是动力。值越小弹簧的动力越小,弹簧拉伸的幅度越小,反之动力越大,弹簧拉伸的幅度越大。这里需要注意的是,如果设置为0,表示忽略该属性,由动画持续时间和阻尼计算动画的效果。

下面我们先来看看不同动力的效果:

  • 持续时间为3秒,阻尼为0.5,动力为1:
                                      
  • 持续时间为3秒,阻尼为0.5,动力为20:
                                       

initialSpringVelocity的值为1时,登录按钮上下弹力并不是很强劲,当设置为20时,登录按钮直接冲过了密码输入框,这就是动力的效果。

然后我们再看看不同阻尼的效果:

  • 持续时间为3秒,阻尼为0.1,动力为0:
                                       
  • 持续时间为3秒,阻尼为1,动力为0:
                                       

usingSpringWithDamping属性值为0.1时,表示阻尼很小,虽然没有动力因素的影响,但登录按钮弹动的幅度依然比较大,相当于在冰面滑行一样。当该属性为1时,表示阻尼非常大,可以看到登录按钮几乎是没有什么弹动的幅度。这就是阻尼的效果。

大家需要注意的一点是,弹簧动画并不只作用于位置的变化,它可以作用于所有动画属性的变化,比如我们在animations的闭包中除了位置的变化外,还有透明度的变化,它也同样有弹簧动画的效果,只不过它没有位置变化那么明显和贴近真实,它会表现出一闪一闪的效果:

                                       

大家可以尝试这几个属性不同值的组合,选出一个自己觉得满意的弹簧效果即可。

将动画运用到人机交互

上一节讲的弹簧动画的确可以让我们的UI变得鲜活起来,但这仅仅是看在眼里的,对于用户的操作却并没有什么响应和反馈。在这节会教大家如何让视图在用户进行点击操作时以动画的形式给予响应和反馈。

ViewController.swift中有一个名为login()的方法,关联了登录按钮的Touch Up Inside事件,在该方法中添加如下代码:

UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: .AllowUserInteraction, animations: {    self.loginButton.bounds.size.width += 25}, completion: nil)

此时每当我们点击登录按钮一次,它就会变胖一些。编译运行看一下效果:

                                       

我们可以再组合一个效果,使点击登录按钮时不仅让它变胖,还有轻微的向下弹跳效果。在login()方法底部添加如下代码:

UIView.animateWithDuration(0.3, delay: 0.0, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.0, options: .AllowUserInteraction, animations: {    self.loginButton.center.y += 10}, completion: nil)

编译运行看一下效果:

                                       

以上只是两个简单的将动画运用到人机交互的例子,大家可以在自己的项目中将一些用户的操作加上视图的动画反馈,让你的应用鲜活起来。

结束语

这一篇文章向大家讲解了UIView的Spring动画,以及将动画运用到人机交互中,使提升应用的用户体验,大家可以多多尝试Spring动画的各个属性,以及结合上一篇文章的知识,组合出更美妙的动画效果。下一篇文章会给大家介绍UIView的Transition动画,敬请期待。

作者简介:

付宇轩(@DevTalking),从事Java中间件开发、iOS开发。主要主持开发企业级ETL中间件、BPM中间件、企业级移动应用,个人博客地址:http://www.devtalking.com。


CSDN移动将持续为您优选移动开发的精华内容,共同探讨移动开发的技术热点话题,涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面,如果您有想分享的技术、观点,可通过电子邮件(tangxy#csdn.net,请把#改成@)投稿。

第一时间掌握最新移动开发相关信息和技术,请关注mobilehub公众微信号(ID: mobilehub)。


谷歌推Chrome API支持HTML5实现本地离线数据存储与同步 Ubuntu开发者预览版将于月底开放下载 因Java漏洞,Facebook遭受恶意软件攻击但未泄密 HTML5预测 取代本地App将成为可能 2013年最佳实习企业:微软仅居第三 助力响应式设计:Adobe发布最新HTML5工具包 VMware控告Hortonworks恶意挖角 2013年大数据真谛:实时分析与批量处理 微软招聘信息证实Windows Blue项目正在推进 研究人员正开发永不会崩溃的计算机 Google:开发者应尽早进入可穿戴式计算 Chrome OS身世及其创始人之谜 谷歌举办Glass Foundry黑客马拉松活动 获80款Glass应用 政府和法律的干预拖慢了云计算发展 AMD打造开放的异构计算标准? Podcasts:苹果史上最烂iOS应用 烂过iOS Maps 日本游戏开发公司谈:如何在激烈的APP世界立足 VC不会告诉你的8件事 Reddit宣布将接受虚拟货币Bitcoin付款 OneID创始人:双因素身份验证无法保护Twitter Opera放弃自家内核转投WebKit的背后 Amazon强攻私有云市场,目标锁定银行 微软的24年数据中心之路 Flurry:约会应用男同性恋用的最多 jQuery消息提示框的简单实现 Mozilla CTO:Mozilla不会转向WebKit 这很重要 Pinterest或超Twitter成第二大社交网站 适合儿童上手的八款编程工具 一周云事件:亚马逊对消费者的吸引力超过苹果 比尔&#183;盖茨对微软创新和手机不满意 让我们一起来做最漂亮的Android界面吧! 又有问题了!TStringList的一些冲突? 我的WIN2000各个盘都被共享, 却不显示共享的手型图标 !!!!!!! 如何定制列表视(report style,full Row Select)的高亮选中条的字符和背景颜色? 表名作为参数问题? VFP两个表的纵向合并? 机器突然掉电是怎么回事? 请教高手,怎样对TreeView控件的节点的OnClick事件处理? 一条出错信息的意思???? 怎样在dreamweaver里面插入包含网页??? 好久没为这样的小事快乐了 紧急求教(关于控件打包问题) 怎么开发互联网和手机短信互通的软件? 哪位有<<游戏编程大师技巧>>的原码 求一简单程序 installshield for c++builder:怎么把客户‘安装路径’注册到他的注册表里-现在急用 请问这4个组件在那个组件拦上的 TFileListBox,TDirectoryListBox,TFilterComboBox,TDriveComboBox 一条出错信息的意思??? ManagermentServer为什么启动不起来?? CList的RemoveAt()问题 爽!今天买了一个可无线上网的手提,散分! 本人用insertShile安裝制作軟件制作了vb6的一個setup文件包,直接用硬盤copy到其機子安裝是沒問題的,但是本人將該setup文件包刻錄到光盤 如何可以将windows 2000 server的C、D等盘的默认共享属性去除,可不可以将这个属性永久去除,因为选择“右击”-“共享”去除后,重启又出 如何让你的编译器生成汇编代码 怎么样把数据库里的某个字段读到ComboBox1里? 在MDI框架中,如何禁止View相互切换? 代码转换 谁能告诉我delphi6.0中的installshield怎样使 为什么我用Zend Encoder加密了一个php文件,速度比以前没加密慢了好多哦, 怎样让在运行时加载的控件总在最前面?? 代码转换 linux + mysql+ apache + php + jdk + jsdk 怎样让在运行时加载的控件总在最前面?? 代码转换 一个关于全局变量的访问问题。 263游戏大厅里的用户信息列表是怎么实现的?急问,多谢!! 也帮帮我吧!i'll be dead ! 263游戏大厅里的用户信息列表是怎么实现的?急问,多谢!! 关于窗体 如何去掉我的“计划任务”共享? linux + mysql + apache + php + jdk + jsdk 新手问各位大哥一个问题:我在机器上已经安装了98,2000,现在有装了红帽7.2,已经安装成功,但是在LOGIN之后,有开始GNOME之后,什么都 菜鸟问题,请多帮忙 window 2000 server服务器,不能使用mail函数,怎么解决!?急!! 我靠!我今天算碰到一个希奇事!你们听听这个网址! 关于鼠标右键菜单的制作问题 SOS!100分相送。很简单的题目,明天考试急用 请问oracle中的帮助导航器、帮助主题窗口是在哪里啊 重要问题!!!请尽快回复。 证券之星最新版本有没有破解版啊,我在证券之星下载的多是只能用三天 各位老大,有谁知道怎样边接收网络传送的音频流边播放 System.in的问题 Lily needs___sports,she isn`t healthy.A does B: to do C:doing D:to does How to distinguish "over" and "across"?When referring to the sixth edition of the Oxford Advanced Dictionary,we can discover that the first defination of "across"(used as adv.) and the seventh(maybe) defination is exceedingly similar,and yet they are 英语翻译The work of many of the greatest men,inspired by duty,has been done amidst suffering and trial and difficulty.They have struggled against the tide,and reached the shore exhausted. They saw a man _____ along the road.A.walking B.walk C.walks a large number of后面跟可数名词还是不可数名词 Please give me some coke with I______.I don't like hot drink Please give me some coke with I______.I don't like hot drink 好书推荐(一本就够了) 1.书名 2.作者 3.主要内容 4.主要人物介绍 5.喜欢的原因注意:主要内容只要100~300不要太多,人物每个50~100字就好. Ring me up ----you come to my houseA.though B.as C.than 理由 let one machine do the work of many通俗的翻译应该怎样? my mother ( ) tired after she does some housework .括号里填什么 BUT for their help,we ___the program in time.A.can not finish B.woll not finish C.had not finished D.could not have finished 该选哪一个 为什么 (选与不选的原因都说一下) Pick you up 12岁女孩到哪去做明星报名 the girl l___ scared and said something yo the man in EnglishL开头的什么单词? If it rains,I come back to pick you up如何倒装 Does the man ____(want) to clean his car?用括号里的词的适当形式填空,谢谢 为什么as long as yuo love me这首歌的歌词里不是I don't care who are you而是I don't care who you are呢?我觉得I don't care who are you比较符合语法呀?请英语好的给我讲讲这个问题, Who can be really understand me?翻译成中文是什么意思, 张杰唱的just the way you are 为什么那么难听发音就不说了,感觉咋那么土呢,好难听啊 the girl l___ scared and said something yo the man in English L开头填什么单词? Who understand me翻译过来是啥意思 my grandma is very old now,but she was a teacher before (同义句)my grandma___ ____be a teacher before,but now she is very old I want you to always live in my heart,even if separated as we like together!请牛人翻译一下 谁有you think i don t care歌词?歌手是jack mcmanus~找了好久了, 6."Where does he live?" Mr Hu asked.(改为复合句) Mr Hu asked where ______6“Where does he live?”Mr Hu asked.(改为复合句) Mr Hu asked where _______ _______.7.Tom’s father saw him sitting on some eggs.(改为复合句) Tom’s father saw ( )The old man _______ to take medicines.He's already fine A.needn't B.need C.doesn't need D.needs not "the girl looked scared and said something to the driver"将“the girl looked scared ”改写同义句 ''Where does Lily live?''(改为复合句)I wonder ___ ___ ___. The old man ____ go out for a walk twice a week.A.need B.needs C.needs to D.both A and BI______(希望) i could go to the country in the USA.The old man ____ go out for a walk twice a week.A.need B.needs C.needs to D.both A and B 英语翻译 你能不恨我吗?是Can you not hate me?还是 Can you don't hate me What time do you get to school and how many classes do you have这句话的意思 _________ I need to take the medicine?根据内容填空. 请问怎样翻译啊?Who can help me ? thank you !MEMORANDUM To:Live Accounts Supervisor Form:Vincent Luk,Accounts Deparment Date:10 June 200- Suject:Overdue a/c no.5438383838I have investigated overdue a/c no.5438383838 as requested in your memo of 3本书的书名和主要内容 主要内容要少一点 大约20个字 different名词 collect名词 sell反义词 happy名词 stand过去式 busy反义词 careful副词 skip现在分词 英语翻译我向一个客户推了子弹的产品,他来信说:Could You write me for who do you produce your's bullets,(brands name will be ok) 一些网友发的英文照片评语,手工翻you are really living beauty of ur own.hats off dear. 英文短信件手工翻中2yeah,baby,do not have stress after sleeping...what are you going to study?this is nice to study sometimes...i watch new harry potter,do you know it?so i am going to sleep,will try...will see your beautiful smile and will s Can you tell me?Who? 照片的2英文短评语翻中人工的This is erotically sexy!You look delicious!A hot sexy ninja in a dress.>. 英语好的帮我翻译一下,hey.i was goin' over here,and I came across ur place.U appear to be 英语翻译linkin park 的歌.请翻译.Leave Out All The RestI dreamed I was missing,you were so scaredBut no one would listen,\'cause no one else caredAfter my dreaming,I woke with this fearWhat am I leaving when I\'m done here?So if you\'re askin old man has the years for word twenty here连词成句 英文短信件手工翻中hi my dear!))your last pics are very sweet!i even haven't words to say my feeling)so cutie and ideal)Asia is so big...yeah translater is not very good,i know it,that's why i asked your language,i can learn it hard and speak But for their help,we___the program in time.Acan not finish Bwill not finish Chad not finished Dcould not have finished We've lived here for ten years?对for ten years提问. the great wall wind it way over high mountains ,through deep valleys and across grest deserts如何翻译 1.__ the work on time,they ask their friends for help 能不能帮我翻一下下面图的英文什么意思! 英文短信件翻中手工的HI!i saw a message on my wall from you and now i feel really worried!you wrote that i speak with other girls at the same time that maybe i do not like you...this is absolutelly fake!why do you think so?as you can see my i must be off now,have the same name,i always chat in the room withnext time,and introduce something about your hometown,ok? She 's very busy.She has a lot __.A do B does C doing D to do为什么是D啊,看不出是做定语啊 which runs over mountains,through valleys and across deserts.英译汉 be willing to = will?Please turn towards me when you will speak so that I can hear what you are speaking.这里为什么用will speak she has a lot of things ____.A.do B.does C.doing D.to do 我经常收到一些类似“JDOGbaggjfabicb,A,b”“JDOGbaggiiiij,ANZDXZGZJ14699.b,”等无意义的英文垃圾短信,我查过账单,收这样的短信无需计费,而对方发短信应该是要计费的,究竟他们发无意义的英文垃圾 Regardless of the way more difficult,I will be willing to accompany you around这段话的解释 Once a rich man was walking along the road with his servant.Suddenly,a young man carrying a heavy bag passed by him. The Great Wall run__desert,__valleys,__mountains .供选词:across,though,over,above Known will beak up I an willng to accompay you come to the final
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘