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

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


TUP第29期:王淮、龚世海谈如何打造优秀的技术团队 一网打尽13款开源Java大数据工具,从理论到实践的剖析 从用户体验的善与恶说起,做用户爱“玩”的教育应用 三大主流开源硬件对比:Arduino vs BeagleBone vs Raspberry Pi “BlackBerry 10移动应用开发大赛”应用推荐 Java程序优化的一些最佳实践 Heka:Go编写,来自Mozilla,高效、灵活的插件式数据挖掘工具 Anchora鲁为民:PaaS是我的兴趣 次世代IDE Light Table 0.4发布 带来众多更新和改进 别再设计易碎的Web API! LinkedIn:55人支持2700位员工,2亿用户的大数据分析 Brian Krzanich是谁?这位新CEO预示英特尔未来怎样? HTML5开发者心声:浏览器兼容性成最大问题 传微软6月下旬将发布第二代Surface 7到9英寸全有 Turbulenz:HTML5 2D和3D游戏引擎开源 携程开放平台总经理夏天:内容+高转化率成就开发者 直接拿来用!最火的Android开源项目(一) Qunar 谌振宇:旅游行业的移动化如何布局? 大数据分析“铁三角”: Teradata数据仓库、Teradata Aster与Hadoop Teradata专业服务:打造行业企业的“数据科学家” Xamarin Evolve 2013:竭尽全力让C#服务iOS与Android 史上最全!57个Web框架4轮横向对比 回顾银行数据的可用性和一致性历史 Qubole:托管在AWS平台上的Hive服务 自由操作系统 Debian 正式发布7.0版本 4月份浏览器份额:IE 8仍居第一,IE 10翻番 亚马逊正式在华推Android应用商店 收入3:7分账 不要男孩,只允许女生参加的四所编程学校 下一波App机会在哪里? JS1K 2013优胜作品公布 3D蜜蜂仅获亚军 专访:前新浪网架构师徐佳转行卖水果背后的故事 如何用程序自动配置IIS 如何将一个进程的HANDLE 或 进程的PID 转成 HWND(用于MessageBox)? 双启动问题?? 如何得到程序的运行目录?谁先给答案,分旧全部是谁的。 一个关于游标的问题,急用! 上海的朋友有人知道宏野通信公司吗? DataGrid中绑定列的问题?WebForm 网站中的搜索的工作原理是什么? 關於搜索文件的源碼 急!!!怎样连接访问有密码的Access 数据库? 在上海找工作的看过来! 我是初学者,帮我看看为什么onserverclick就起作用? 这些帖子居然成为经典,请看此问题!!!!!!!!! 关于recordset的问题解决方法? 目录选择对话框。 简单问题,界面左边进行树形控制,怎样调用对话框(不是切换视) 在线等候帮助!!! 使用过F1book的朋友请看一下! 怎样让弹出的窗口位于显示屏幕中间的位置。而不是两边。 急,高手请进,如何将sQLserver7备份到局域网中另一台计算机的硬盘上 请高手:怎样改变ListView的表头的颜色,字体. 中国武侠剧一定要的必备情节 安装问题 这不是真的!VC的速度还没有VB快! 兄弟改名了 关于网页的打印(急,200分)? 新操作系统,老编程工具 这样能兼容吗? 记得每天点一点你的竞争对手。 我是一个VC初学者,请问这几句代码是什么意思? 2万元寻人力资源软件 友情链接,我的网站http://fullstrong.myetang.com/ ODBC高手请进,高分送出! 写email地址搜寻类软件,有没有利润? 初级XML的问题 友情链接,我的网站http://fullstrong.myetang.com/ 为什么我的excel文件打不开 请问如何在DataGrid中假如CheckBox控件? 高手帮忙看一下邮件发送的错误提示 IIS问题:如何使web application在iis管理mmc中不可见 2万元寻人力资源管理软件 友情链接,我的网站http://fullstrong.myetang.com/ 使用jdom遇到的莫名其妙的问题(有关Element.getChildren()返回类型?) 运行速度的问题如何解决? 对ISO98版的c++支持最好的编译器是什么(unix\win\dos)? sqlserver网络备份是错误码42000。详情请看。。。 急!!请问如何通过程序检测一个系统中的Office版本(比如:中文版,英文版) 请问有人知道上海伍尔特国际咨询公司的朋友嘛 ? 怎样在信件里面自动添加信息? 2万元寻人力资源管理软件 友情链接,我的网站http://fullstrong.myetang.com/ 有没有人统计过windows有多少个api加上shell呢? 求英国1689年《权利法案》主要内容 100分贝在100米外声音减弱为多少分贝? 洗脸盆,都有什么牌子?怎么挑-选? 英国颁布《权利法案》的意义在于A、、||\保证资产阶级独掌共和国大全B为限制王劝提供法律保障C使一会的自由选举国王权利 、D正式宣告英国君主制的废除只有一个大安 关于化学方程式配平的经典题目(初二)我要出一张试卷,需要很多的题目,希望大家可以提供一些,不管是填空还是应用都行,还有就是,关于化学方程式的比例式的计算题, 洗脸盆选什么材质的好? 牙齿是不是骨头 求化学方程式配平的练习初中刚学不要太难,但也不要太简单附答案 一物体在做匀加速直线运动,在第一个ts内的位移为x1,第二个ts内位移为x2,则物体在第一个ts末的速度 古希腊陶器有什么特点 需要重点内容 半瓷 和 白云土 区别我想问问半瓷和白云土的区别 比如同意一个色釉杯子 一个做成白云土价格3元 那么做成半瓷的话价格差多少? 一个物体做自由落体运动,计算:ts内跟2ts内重力所做的功之比. 古希腊陶瓷瓶麻烦大神帮忙找找这个瓶子的相关信息 如何区分新老瓷器?谢谢 物体做自由落体运动,在第ts内通过的位移是hm,则t是()A.(2h+g)/2g B.(2h-g)/2g C.2h/g D.√(2h/g)我怎么算的是D 70分贝的声音有多大? 有谁知道瓷肌医生和瓷肌有什么区别? 以大小水平v的速度抛出一质量为m的物块,ts后物体下落一段距离v不变,速度方向相反,则:A 风力对物体做功为零B 风力对物体做负功C 物体机械能减少0.5mggttD 风力对物体的冲量大小2mv 15分贝的声音有多大,列举例子.挖土机,等一些建筑房子的的机器运行时,分贝为多少左右。 2分贝大概多大声音RT我想知道一个例子,2分贝大概多大,比如呼吸声大概几分贝啊心跳声,大概几分贝啊能给个1-10分贝每个分贝的感觉嘛? 有一个梯形物体浸没在水中,水的密度P,深度为H,物块高度为h,体积为V,较小的下底面面积为S,与容器底精密接触,其间无水,则物块所受浮力为答案要用所给条件表示 如何区分物理的杠杆的动力臂与阻力臂,动力与阻力如何区分省力杠杆,费力杠杆,等臂杠杆(最好请用实际情况来回答) 一分贝的声音到底有多大?正常人能感觉得到的声音有多少分贝?正常人能觉得多少分贝的声音算大或者清楚?多少分贝的声音算噪音污染? 下面几题怎么解释 帮下忙 初三科学5.如图所示,电源的输出电压恒定不变,现将一个灯泡L接在离电源很近的AB两点时,灯泡L耗费的功率为25W,若将灯泡L接在离电源较远的CD两点时,灯泡L耗费的功 探究小苏打和白醋混合后的变化 1.把玻璃片盖上,用手摸玻璃杯,有什么感觉?2.用燃烧的细木条深入杯中、观察的什么现象,根据这个信息、你可以做出什么样子的推断? 玻璃脸盆是怎么制做的 初三科学第三题求讲解 在做小苏打和白醋混合实验时,用手触摸一下玻璃杯外壁,会有凉凉的感觉,为什么会出现这种现象? 原子种类 质子数 中子数 核外电子数 相对原子质量氢                  1         &# 实验名,气体性质,周期规律,运算、配平方法什么的要说明白,不然很难看懂 小苏打和白醋怎么混合比较好?实验时玻璃杯上为什么要盖上玻璃片? 初二化学12检验糖尿病人的尿液,要配制8%的硫酸铜溶液200g,下列配置过程中正确的是A 只需托盘天平和量筒两种仪器B 砝码放在左盘上,称取16g无水硫酸铜C 用量筒量取184ml水D 把无水硫酸铜倒 一物体由静止开始做匀加速直线运动,在ts内通过的位移xm,则它从出发开始通过x/4所用的时间 小苏打和白醋怎么混合·比较好?实验时玻璃杯上为什么要盖上玻璃片? 作匀加速直线运动的物体,在ts内的位移仅决定于C. 在测定氧气的体积分数的实验中,为什么橡皮塞塞得过慢和弹簧夹未夹紧会导致测得氧气体积偏大? 小苏打和白醋混合后玻璃杯是发冷还是发热3勺白醋,1勺小苏打的情况下还是发热吗 几个做匀变速运动的物体,在ts内的位移最大的是A 加速度最大的 b 初速度最大的 c 末速度最大的 d 平均速度最大的 硝酸铅溶液配制时为什么必须加入硝酸? 扭矩的单位牛米是不是可以这么解释假设,力的作用点为X轴的O点,那在Y轴距O点1米点上施加一个平行与X轴的1N的力,那我们就认为对与O点来说就受到了1米*1N的力矩,那力矩的单位就是Nm了. 问题 3道初三科学竞赛题(要讲解)11.已知浓硫酸比稀硫酸的密度大,质量分数分别为90%和10%的两种硫酸溶液等体积混合后所得溶液的质量分数为 AA.大于50% B.等于50% C.小于50% D.无法 新民主主义时期和社会主义建设时期的标志性事件 增加10牛米扭矩和10千瓦的功率对汽车动力影响有多大?两车价格相差1万人民币. r原子的核外m层与k层上的电子数相等,下列说法正确的是:a r的氧化物分子式为r2ob r能置换下硫酸中的氢c r是非金属元素d r不与硫酸铜反应 列举民主革命和社会主义建设两个不同时期的其他阶段的标志性事件并做相应评述 九上物理杠杆 如何找动力和阻力现在补课的老师在教,但是我没有听懂,知道的大哥大姐们帮帮忙啊我动力和阻力不会找要是能有图帮我理解就更好了谢谢! 初三科学题.请详解.1.如图1所示,要使重为10牛的物体,保持与水平成45度角的方向匀速直线运动,应对物体施加 (10) 牛的力,此力的方向为(竖直向上) 2.图二 一个人在火车车厢内向车位方向抛出 社会主义建设时期的标志性事件并做相应评述 向焰心斜向插入一支细短玻璃管,发现玻璃管的上口,发现玻璃管中无明显现象,在玻璃管的上口点燃,上口产生火焰,说明焰心物质的性质是(写出2个} 初中物理杠杆中动力和阻力的方向如何 下列说法正确的是( )A.氢氧化钠晶体中不存在离子,所以,它的晶体不能导电B.氯化钡溶液在通电时能发生电离,所以,氯化钡溶液能导电C.在水溶液中电离出氢离子或酸根离子的化合物可能是 从社会转型的角度看,制定《权利法案》的意义在于A.建立了资产阶级的君主立宪政体 B.标志着英国资产阶级革命结束C.实现了从自然经济到商品经济的转变 D.实现了从“人治”到“法治 我们人类最高能发出多少分贝的声音?我门发出的惊天一吼能否镇碎玻璃? 向盛有水(为了便于观察,液体为红色)的试管中慢慢注入3毫升浓硫酸,此时可观察到U形管内液面的变化是( )A.A侧液面高于B侧液面 B.B侧液面高于A侧液面C.无变化 D.A、B两侧液面同时升高某同 从社会转型的角度看,英国1689年《权利法案》的颁布表明A,国王已经有名无实,权利被架空b,资产阶级和贵族害怕人民而同封建势力妥协c,以法律为标志的国家权利专制王权d,确立了资本主义社 问一个噪声在空气中衰减的问题 点声源每隔25米在空气中衰减多少分贝 计算公式是什么线声源(300米)每隔25米在空气中衰减多少分贝 计算公式是? 30~40分贝的声音有多大? 火车在进入隧道前必鸣笛.声音在空气中的速度为340m/s火车在进入隧道前必鸣笛.若火车速度为80km/h,声音在空气中的速度为340m/s,司机在鸣笛2s后听到自隧道口处的山岸反射的回声,则鸣笛时火车 声音的分贝数随着声源数量的改变而改变吗?如有两个声音为75dB的声源同时发生,那么是75dB还是多少呢?请说明一下原因。 一分贝声音有多大
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘