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

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


AppCan移动平台:为企业移动化进程加速 学生强则国强,访天猫推荐算法大赛Top 9团队 Mozilla与三星之子——Servo特性解读 360天巡启动公测 打造新一代企业级无线安全解决方案 继Storm和Spark之后,Hortonworks添加对Kafka的支持 一周消息树:国产操作系统最快10月发布,并支持应用商店 技术团队看板方法实践的难点分析 SAP云服务加速转型:调动资源瞄准中国市场 开发测试全承包!移动应用开发工具Telerik平台 火火火火火!看HomeKit如何改变物联网和智能家居? MDCC应用与工具关键词:平台、社交、垂直、解决方案 Leap Motion正式入华 将发布第二代软件SDK 120万操作/秒Redis Cloud 集群单一服务器非基准测试程序 2014微信开发者大会顺利结束 TOP10优秀微信开发商名单公布 【最佳实践】通过DevOps确保可靠和有效的信息安全 2048 Hello World:跨平台快速应用开发Python框架Kivy Forrester:关于私有云的10个事实 2014年8月操作系统份额:Win 8.x大涨,Linux继续下跌 0代码、不编程—交互式网页设计工具VXPLO 揭秘Instagram Hyperlapse背后的技术 【CTO俱乐部在线教育研讨会】用互联网技术深入创新教育产品 降低门槛!Hybrid应用开发框架LigerMobile 下一代IT革命:微服务器和雾计算 使用Mongo Connector和Elasticsearch实现模糊匹配 时隔8个月,物联网联盟AllSeen如今怎样? 《近匠》简网:开发零门槛 快速建原生App MDCC免费展位申请超预期 大会内容初曝光 在服务器与交换机定制之后,谷歌着手量子计算机CPU设计 电信天翼开放平台鲍占斌:优质能力 分成比例高 艾格拉斯副总裁王晓波:手游定价如何设计 Xcode 6 Beta 7发布:语法定、内库改,Swift何时完善? 关于构建工资管理系统的想法!请大家踊跃发言! 考,为什么?存储过程就这么麻烦吗? 请问各位高手怎样在toolbar的按钮上载入图片?谢谢 为什么介绍sql server的书都是跟ASP联系的,有没有跟delphi 联系的? session.timeout的设置问题 我是一个初学者,我有6个问题想请教大家!希望给一点帮助 请大家帮忙想一招,我是第一次做这样的问题,简直是不可思意,吓死我了 工资太低!工作难找?提议结成联盟 初学编程,请教个小问题 请问可不可以定义 vector<vector<mystruct>> 类型? 基于单片机的步进电动机的问题,在线给高分!!!!!!!!! 无法打开的文件 怎样判断某天所属的星期的星期一和星期天对应的日期分别是什么? 如何对DBEdit组件中输入的数进行类型检查??? 我的系统是2000 server,可是我在局域网的另一台机器上实现远程登陆 请大家谈谈.net java brew三种平台的优缺点。答者有分。 怎样判断某天所属的星期的星期一和星期天对应的日期分别是什么? 什么问题啊? 怎么样才能将开发手机游戏?? 调查:这里有没有程序员买有PDA的??比较高档的。比如康柏,sony等等 有2个程序有问题,请各位高手找出错误!先谢了! 奇怪,我的BLOWFISH加密算法每次使用同一个密钥加密同一个字符串的结果都不一样! 如何使PICTUREBOX中的底图能缩放,或者哪里有透明的容器控件?在线等。 如何判断鼠标离开了一个窗口的显示区 200分紧急求助! 明天(3月13日)是我一个朋友的生日,我们一起祝福他吧:) 请大家谈谈.net java brew三种平台的优缺点。答者有分。 急急急!!! 怎么配linux的dns服务阿? 有谁知道啊? 点击链接网页竟变成下载对话框,啥会事? title为什么显示不正常 哪里有VC.NET的电子书下载? 急!急!请解释一下 请高教~~建主页~~学校的 为什么我下载的j2ee.jar里没有EJBLocalHome和EJBLocalObject接口 如何让为windows 2000 sv 同时支持asp cgi php? 如何用QQ发送消息?高手帮忙! 關於算法的問題﹐ 大家來幫幫忙呀﹗ 用asp编程怎样验证用户登陆名和密码!怎样设置用户的使用权限!我用的是sqlserver2000数据库 安装dbgrideh 的问题。 我先杀你们,再杀自己,然后逃之夭夭---(无内容) 请高手帮忙:原本显示正常的图片现在不能显示了 button的大小可以自己控制吗? 怎么使用ViewState 好歌推荐 念来去 - 小柯 关于值传递的问题 谁能告诉我,通常Windows下,有几种日志文件? 大家用JSP后台一般用什么数据库,并说出为什么谢了! 一个奇怪的问题! *****如何判断Pointer是否为TObject***** 如果没有汉族,世界会有什么变化? 如图,圆O直径AB=4,C为圆周上一点,AC=2,过C作圆O切线L,过B作L垂线BD,D为垂点,BD交圆O于E 1,求角AEC1,求角AEC2,求证:四边形OBEC是菱形 灰常级,一直有四个解,已知如图,抛物线y=x2-x-1与y轴交于C点,以原点O为圆心,以OC为半径作⊙O,交x轴于A、B两点,交y轴于另一点D.设点P为抛物线y=x2-x-1上的一点,作PM⊥x轴于点M,求使△PMB∽△ADB时 静电力做功W=Eqd对非匀强电场也适用?why 在测绘二极管正向伏安特性曲线电路中,为什么使用两个电阻,作用是什么? 石家庄哪里有卖盐的 赤壁大战的原因,背景和影响? AB,CD为圆的两条相互垂直的直径,圆心为O.将电量相等的正,负电荷+q和-q放在圆周AB、CD为圆的两条相互垂直的直径,圆心为O.将电量相等的正、负电荷+q和-q放在圆周上关于AB对称且相距等于圆的 石家庄哪有盐啊? 赤壁之战的起因、经过、结果是什么? 如图所示,AC、BD为圆的两条互相垂直的直径,圆心为O,半径为R.电荷量均为Q的正、负点电荷放在圆周上,它们的位置关于AC对称,+Q与O点的连线和OC间夹角为60°.下列说法正确的是 A.O、C两点 石家庄哪里卖高级无碘食盐 做ppt用需要知道赤壁之战时间,背景需要简练一些不要大篇幅的复制百度百科- - ,AC、BD为圆的两条互相垂直的直径,圆心为O,半径为r,将等电量的正、负点电荷放在圆周上,它们的位置关于AC对称,+q与O点的连线和OC间夹角为30°,下列说法正确的是AC两点的电势相等BD两点的电势 做飞机模型的机翼、机身、尾翼等地方用什么木材或什么材料?做飞机模型的翼型用什么好?战斗机,仿真要既坚固又轻的!要飞的! 光的速度是约30万公里/秒,但是光速是恒定不变的吗?如果光速不是恒定的,那单位时间段是否不一致,会带来什么影响?如果是在真空(相同介质)中,光速永远是恒定的吗? AB、CD为圆的两条相互垂直的直径,圆心为O.将电量相等的正、负电荷+q和-q放在圆周上关于AB对称且相距等于圆的半径的位置,如图所示,要使圆心处的电场强度为零,可在圆周上再放一个适当电量 “青涩”意思“青涩”,如何理解其意思,如果说表演青涩,那又是何意思? 一个电容为C板距为d的平板电容器上板带+3Q电荷下板带+Q电荷时,两板间电压多少最好给出详细解答过程 如图所示,AC、BD为圆的两条互相垂直的直径,圆心为O,半径为r,将等电量的正、负点电荷放在圆周上,它们的位置关于AC对称,+q与O点的连线和OC间夹角为30°,下列说法正确的是A.A、C两点的电势关系 青涩是什么意思? 一个大学物理题.谁能告诉我为什么这个题要哦这么做吗?断电的电容器应该是电荷量不变啊. 《家乡的竹子》这篇作文怎么写?我急! 赤壁之战的5个步骤.(急!)急需赤壁之战中的5个步骤.最好是用什么歇后语,成语概括的!如果不是歇后语和成语,那么字数要少一点,..1.2.3.4.5.希望知道的哥哥,姐姐,弟弟,妹妹,叔叔,阿姨,爷爷,3Q3Q 平行板电容器中间的绝缘体是怎样使两板间的正负电荷不发生中和的? ( )鲸的体形像鱼,()它不属于鱼类.填上合适的关联词 青涩的意思 右边是一个火箭模型的平面图,计算他的面积. 工程竣工测量记录里的建筑物全高和标高有什么区别 我是想知道它在爱情里是什么意思? 乌鲁木齐哪里能买到不加碘的食盐现在腌菜的那种也是加碘的 泊松积分是怎么证明的 泊松流的合成,一定要详细过程题目是理发师等待顾客时间服从指数为λ指数分布 理发店又十个理发师,顾客等可能选择理发师 问对理发师a等待顾客时间的分布 用卷积公式和几何分布我怎么 带电粒子在平板电容器中的电场力方向的判断 什么是“泊松积分”? 青涩不及当初,聚散不由你我.什么意思. 济宁市那里能买到不加碘的食盐,去了一些超市都是加碘盐,因病人不易食用加碘盐,不知道那里有买不加碘的. 昆明什么时候会有盐卖我家的盐 没有 以下名词解释哪些是正确的?(多选) 如图所示,平行放置的平板电容器与一恒定的直流电源相连如图所示,水平放置的平行板电容器与一恒定的直流电源相连,两极板间距离d=10cm.距下板4cm处有质量m=0.01g的不带电小球由静止落下.小 云南昆明整形,昆明为什么没盐 求“礼教吃人”名词解释,是准确的名词解释! 滚子和轴套是自由配合 用英语如何表述 飞机机翼结构 机翼是什么材料做的? 如图所示 光滑竖直绝缘杆与一圆周教育B、C狂点,圆心固定并有电量为+Q的点电荷,一质量为m,电量为+q的环从杆上A点由静止释放,已知AB=BC=h,q远小于Q,环沿绝缘杆滑到B点时的速度Vb=根号下gh1)环 请问巿场上称斤散卖的盐是不加碘的吗 日本二次大战用的零式战斗机机翼是用什么材料做的?有个节目中说机翼厚度只有0.5毫米,是不是说错了? 如图所示,光滑绝缘的细杆竖直放置,它与以正电荷Q所在位置为圆心的某圆交于B、C两点,质量为m、带电荷量为-q的有孔小球穿在杆上从A点无初速滑如图所示,光滑绝缘的细杆竖直放置,它与以正 现在为什么我们这里卖的盐都是未加碘的了? 填诗句:黄鹤楼中吹玉笛,江城五月落( ) 如图所示,光滑绝缘细杆竖直放置,它与正电荷Q为圆心的某圆交与B,C两点,质量为m,带点量为-q的有孔小球从杆上A点无初速度下滑,已知q远小于Q,AB=h,小球滑到B点时速度大小为√ (3gh) 这个题为 用来制造飞机机翼的轻质结构材料是什么? 是和女朋友吵架时她说的 大颗盐是不是不加碘的盐抚顺哪里能买到不加碘的盐 飞机的几机翼构成是什么 长得有点大众化是什么意思 如果没有昼夜变化,世界将会怎样? 如图,圆O的直径AB=4C为圆周上一点,AC=2过点C作圆O的切线L,过点B作L的垂线BD垂足为D,BD与圆O交于点E(1)求∠AEC的度数(2)求证:四边形OBEC是菱形 说一个女孩长的很大众化, 德国政府:默克尔被窃听手机泄密可能性意大利媒体称英美合作监控意通讯 政府欧安组织将向阿富汗派遣团队帮助选举美国耐用品订货9月份环比上升3.7%欧盟承诺为企业发展提供便利俄罗斯再次“威胁”乌克兰与欧盟眉来眼欧盟成员国将推动边界监管防范偷渡印度东部洪灾已造成27人丧生新华国际时评:中国周边外交创新局淡水河谷40年累计向中国出口铁矿石1安倍希望早日通过新设“国家安全保障会加拿大总督访问蒙古国李克强同蒙古国总理阿勒坦呼亚格举行会上合组织就打击恐怖主义召开研讨会佟屏亚:转基因作物能增产是骗人的!浙江一男子利用感光材料提炼白银污染环商贾云集浙江觅得知音 杭州揽投资15西班牙首相拉霍伊:将就监控事件召见美西班牙首相拉霍伊:将就监控事件召见美尼日利亚海盗绑架美船员 西非海域险过中泰高铁合作前景可期“海丝”要把“中国服务”运出去今日天气惠东:两辆货车相撞新京报:“垃圾焚烧厂争议”需要冷静和反对利用南海问题破坏中国-东盟合作大博世:未来汽车技术坚持本土研发商务之旅胡春华会见澳大利亚新南威尔士州州督巴广物汽贸成恒大球星二手车专属管家广东廉江一医生值夜班时遭8男子殴打拔刀相向有隐情 邻里和睦先自律发生地震10秒内可速报深圳遇6年来最强暴雨 5000多公交高云翔《最后一战》演空军英雄各国母亲节 过法不相同露天随地小便 印度水炮喷你没商量考执信仍有两次机会世界旅游旅行大会三亚举办西交利物浦大学在粤招40人社区居委会“带头人”六成本科以上学历5000公交车无法正常运营
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘