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

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


云端测试破1500万 Testin已为开发者省2亿 智能腕表inWatch:已发售近3600台 Bingo!微软证实Windows 8.1将捆绑安装Skype IBM宣布收购以色列网络安全公司Trusteer 约10亿美元 如何才能运作好一个开源项目? 为什么JavaScript有能力成为未来企业级编程语言? Red Hat CEO:拥抱开源 拥抱克隆 小米手机-HAXLR8on硬件黑客马拉松 开团了! 移动周报:雷军做红米的N个理由 Pangea Software CEO:08年App Store游戏降价大战的真相 揭秘MongoDB最新Java驱动:更好的JVM支持,指日可期的异步 不仅只有IE Mozilla将于发布Win8平台Metro版Firefox 360搜索发布新产品“我的搜索” 引入网民评价和网站名片功能 AppScale:Google App Engine的开源实现 近期十大优秀jQuery插件推荐 通过语音识别来编程 速度远超键盘 BrowserStack:多系统跨浏览器兼容性测试工具API发布 更加开放?Path向13家应用开发商开放API 重金力邀开发者 联想智能桌面应用开发大赛开幕 SDCC 2013大会讲师名单议题出炉 8月20日五折票价最后一天 程序员困境:底层编码能力正逐步丧失 寓教于乐 给代码审查者的几点建议 裁员4千、总裁员人数超过7.5万,难掩思科锋芒 物联网离普罗大众还有多远? 悼念斯诺登使用的加密电邮服务——Lavabit架构解析 运营商上阵OTT “一笑泯恩仇”后路在何方 [企业开源系列]后起之秀Facebook凭什么挑战互联网霸主Google? 谷歌推出免费标签管理应用Tag Manager McAfee CTO Phyllis Schneck被任命为NPPD副部长 Bootstrap 3.0发布 更好地支持移动端和响应式开发 国内创业公司QingCloud的魄力:做一个世界级的IaaS服务 高分解问,请教高手!关天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版预览、再打印如何实现 请问,如何在Form中画图啊??/ 水晶报表问题。急呀!! 一个奇怪的问题 TreeNode控件有折叠下一级节点这个命令吗? 大家好,请帮忙提供在C#中做帮助文件的好的方法或网站吗?谢谢了 QQ发送信息老是附加一个网址,有什么办法搞定它? 操作系统挂了,重装后如何恢复ORACLE DATA? 初学不懂:调用ActiveXObject("Microsoft.XMLHTTP") 时用的什么命名空间? 创建临时表 ↖↗↘↙这四个符号怎么打 #儿时疑惑#我为什么不能像小鸟那样自由飞翔? 成长的桥阅读文中画横线的句子在文中起什么作用大神们帮帮忙 子曰:“君子食无求饱,居无求安,敏于事而慎于言,就有道而正焉,可谓好学也已.”可谓好学也已 中通假字是什么,再将通假字解释 #儿时疑惑#鸟为什么会飞, 文中画横线的句子爸爸的花儿落了有什么含义它与文章要表现的中心有什么关系拜托各位大神 核能 核 能(1)核能俗称原子能,它是原子核里的核子——中子或质子,重新分配和组合时释放出来的能量.核能分为两类:一类叫裂变能,一类叫聚变能.(2)核能有巨大的威力.1公斤铀原子核全部裂 #儿时疑惑#卡罗莱纳鹦哥鸟和拟斑马和袋狼现在还有吗? 解释画横线的句子(宋国后面还有有一个“笑”) 核能是什么 鹤龟同池,共有80只脚.如果把只数互换,则有88只脚.求龟、鹤各有几只? 哪位大神可以给我解释一下图中画横线的那句话是什么意思?~~::>_ 英语短文答案 帮助你们更快完成作业,更快玩电脑.In China if you are seven,you have to go to school.At school you learn different subject.Science is one of them.We have three science classes a week.They are on Tuesday,Wendesday and F 河中鹤和龟共有100只脚.如果鹤的只数与龟的只数交换则共有脚92只,求鹤、龟原来各有多少只? 有限集合A=B的充要条件是什么?全题叫:有限集合S中元素个数记作card(S).设A、B都为有限集合,判断下列正误.我只问问A=B的充要条件是card(A)=card(B)为什么是错误的?正确的应该是什么? 有没有英语短篇作文?求70到150字左右.可以说放鞭炮的,玩电脑的等要有翻译的 乌龟和鹤共有200只眼睛,共有350只脚问,乌龟和鹤各有几只? 氢气有几个质子阿我还知道你们是怎么只到你们是怎么知道化学元素的质子数阿 必须用记的嘛 谁帮我写一片英文的做文啊 是初2年级水瓶的作文 上帝保佑 阿门要写关于这 的 生日:He was born in 1996.He was bor on Fed 2nd.1996.His birthday is Feb 2nd.性格:He is an outgoing student and he always makes us laugh.H 龟、鹤共有29只,有脚92只,龟和鹤各有多少只? 要是总有人跟你说,哟哟切克闹,切克闹啊切克闹. 潘多拉的秘密 内衣 怎么样?今天逛街看到一间潘多拉的秘密的内衣店,装修好好,营业员说是法国品牌,想问下有谁知道是不是法国品牌,看他们质量很好,就是价格有点小贵.急 急 急 文言文杯弓蛇影的意思 哟哟切克闹什么意思 卵胎生和卵生、胎生有哪些不同点? 屌丝气质呢?是说男的女的? 哪里出来的? 大白鲨是胎生还是卵生还是卵胎生 超蓝色星系是什么超蓝色星系的定义什么?百科上怎么没有TT 画横线的题求解答 胎生、卵生、卵胎生的动物分别有哪些胎生卵生卵胎生的动物分别有哪些,请多举一些, 怎么培养屌丝气质 嘿哟哟哟,切克闹,切克闹 龟鹤共池,已知龟比鹤多5只,共44只脚,龟有( )只.鹤有( )只.要算式.,不能用方程解决.,使用假设法. 25÷23精确到十百千分位?25÷23精确到十、百、千分位? 哟哟,切克闹. 显微镜对生物起到什么作用举例 “小时候,我以为你很美丽,领着领着一群小鸟飞来飞去……”歌名 龟鹤共有脚100只,若将鹤换成龟,龟换成鹤,则共有脚176只,原来鹤多少只,龟多少只? 我寄愁心与明月,后面半句是什么?现在就要! 找几篇理性一点的文章找几篇600字左右的文章 要理性的 不要感性的 不要太长的 最好有感想 没有也没关系啦 这是什么星系赤经 22h25m41s 赤纬 1度16'48.99看起来模糊 副词有哪几类 已知鹤比龟多14只,鹤的脚比龟的脚多18只,问龟鹤各多少只? 怎么知道两个物体组成合外力为零即动量守恒,就是在解答题目时怎么知道用动量守恒解答,例如两棒在磁场 ( )地模拟填上合适的词语 以理性为主题 的作文 有H-、NH2+、H3O+离子吗?有什么反应? “种类”是副词吗 要英语过了四级才有资格考公务员吗? 1.6g NH2-离子中所含电子数 填上恰当的词语 凝聚什么 模仿什么 #儿时疑惑#小鸟为什么会飞?我为什么不会飞? 英语翻译阿门 我甘愿为我犯过的罪作出应有的惩罚 只愿 我所爱的人过上安乐生活 这类副词的用法?angrily differently excitrdly excitingly interestingly decisively 这类副词怎么使用?我觉得它们和形容词的意思差不多啊?怎么区别它们和形容词用法差异呢? 文言文杯弓蛇影解释方,恶,既,疾,不的意思.后世常以“杯弓蛇影”比喻 ,从文中可见乐广的客人 的性格特点 25℃、l0lkPa下,22.4L氢气含质子的数目为3NA, 什么类型的副词可以做表语 #儿时疑惑#为什么小鸟能飞 这个是什么星系? 孕妇被车撞伤无人施救 2名村官停车救3名中国专家受邀参与叙利亚化学武器核联大主席称新兴经济体成为促进发展中国运营商公布垃圾短信举报方式 违规号码河南大货车路过徐州遭胡乱罚款 涉事警中储粮掺转基因油续:千吨进口菜子油获印度开建182米高世界最高雕塑 呼吁加沙唯一发电站停运使供电形势严峻美国洛杉矶国际机场发生枪击事件中储粮就掺转基因油事件处分6人 一公联合国秘书长与世行行长将再次联合访问希腊首都发生枪击事件两死一伤北京黑停车场当城管面收费 称公司领导希腊首都雅典发生枪击事件 致两人死亡男孩疑因被逼检讨跳楼身亡 老师至殡仪北京多部门称对荷兰艺术家“雾霾吸尘器崔永元未明确回应“因抨击转基因离开央巴基斯坦塔利班首领在美军无人机空袭中中央电视塔等知名景区被“踢出”北京一成都10岁小学生跳楼自杀 班主任殡仪美称注意到斯诺登与德议员会面报道 正液体活检发展空间巨大 精准医疗蓝海开中海油服预计去年净利降约85%天行健:美军又一次使中国受惊该怎么办Facebook,你居然要跟Uber挡不住的女人味:随意简单的穿搭方正重磅:深入分析里根所主导供给侧改做油菜籽必读:油菜籽产业链深度分析,福州火车站今天预计发送旅客9.5万人长江中下游今明迎雨雪考验 安徽相关部1月31日晚至2月1日白天江西迎来新菲律宾孔子学院举办“一带一路”图片展BCG宏观好文:全球制造业转移的经济微信群里的游戏,千万不要随便玩,会死烤乳猪培训 正宗麻皮乳猪制作技术涿州“帮战友”服务中心年助316名退荷兰首试驾无人迷你巴士 预计今夏正式香港1月份楼宇成交量料近3000宗 黄河壶口瀑布“冻住了”(图)OPEC和非OPEC国家协议即将达成冬天怕啥!这些车一上车就可以享受温暖露肉豪车撒钱分期权,互联网“壕”年会
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘