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

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


王坚:未来一年阿里云会有很大变化 梁胜:开源并不是做好软件的唯一方式 如何为IE 10编写特定的样式 MySQL手册许可证更改乃是Bug惹得祸 开源世界高峰论坛首批演讲议题公布 测试工程师的心灵鸡汤:谦虚、不沉默、有危机感、不断努力 高德地图API“沿图有你,晒出你的LBS应用”活动拉开帷幕! 谁能找出Windows 8.1的安全漏洞,就将获得微软10万美元奖金! 【直击美国云计算】Facebook分享数据中心新网络架构Fabric 【直击美国云计算】OCP发起产业界的Maker运动 红帽刘长春:开源是推动云计算和大数据发展的重要力量 【直击美国云计算】出货量达x86的20多倍 ARM或将成为数据中心主角 孙小群:将SAP HANA打造为开放的PaaS平台 GitHub推出重大改进:强调速度、内容和交互性 如何打造测试工程师精英团队? 如何做个有“钱”途的测试工程师? 苹果开始关注企业移动化 iOS 7的10大办公功能 “开源群英会2013” 参会名单(持续更新中) 微软Builder2013前瞻 主打跨平台工具及服务 CMDN 29期:软件测试与管理之路 微软IE10与HIT FM 携手打造全新HTML5官网 专访GenMyModel CTO:一款全新在线建模工具背后的故事 【直击美国云计算】Jason Hoffman:数据和计算的融合将破坏全球利润 【直击美国云计算】如何做Hadoop、流处理框架等技术的采用选择 【直击美国云计算】细数云技术领域成王败寇:从SaaS到SDN 【直击美国云计算】谷歌Jeff Dean:成功的关键是专注 致远V5发布:强调大协同,企业移动化真来了 Mailbox:六星期实现从零到百万用户及日处理亿条消息 代码审查,也要天时地利人和 Clash of Clans产品总监:游戏中的商品定价一开始就要高 移动互联网最核心的竞争是:设计的竞争 DELPHI文本操作得一個小問題,請各位指教!!!! 关于鼠标左键单击与按住不放的区别? 高分求问,数据源的问题! 建议增加我的收藏夹功能 求教包容器问题 一个三层数据库的问题: VB爱好者们,帮小弟个忙!!!谢谢 怎么样动态建立一个新的ADOTable?? 十万火急,关于Unix平台下C编程(FTP传输方面) 我的英文还凑合,那么我应该选择4 中文版,还是 5英文版?(众所周知,5中文版翻译太差) 求开发 ActiveX Libary 的详细步骤! Com Object 与 Automation Object 区别,如何用? 用VB如何处理多个用户同时操作一个DBF文件的错误? 一个进程为VC2.0, 另一个为VC6编的MFC程序。如何控制从第2个控制第一个进程? 请assdeng(山野村夫)看看 pb,delphi,vb三种快速成型的语言都分别适合开发那些软件?欢迎大家来讨论 请问各位同仁如何设置sybase anywhere服务器参数? 串口通讯能否用pb做成动态连接库的形式?(急) 怎样使Response.redirect打开一个新窗口 为什么环境变量替换不正确? 怎么打开foxpro中,通过剪切板考过去的图片,dbimage和image控件都不能打开,显示“bitmap is not valid” vaj中如何使用自己的JAR? 怎样改变当前窗口的大小,是当前窗口最大化? 高手争峰 如何把一个log文件读到数据结构中去 请教一个很菜的问题:) 这个程序有什么问题? 怎样做???? 简单问题,可就是搞不定!! 请问jsp中servelet在win2000中的设置方法,需要下载什么类库文件么? 一个新问题,那就是点击工具栏的退出按钮以后只退出当前打开的窗口,而不是整个应用! 如何在 index.htm 中引用 count.asp ? 远程数据库访问的问题--亟待高手们解答 王国荣的电子信箱是哪里? 我的程序生活 先给50分,稍后在加:我正在做一个系统,需要做到每次开机时提醒用户有哪些事情要做! [Tips]获取Memo&Richedit中光标坐标的最简单方法! 急急,如何才能把图片的底色与窗口的底色自然地融为一体? 如何改变按钮的颜色? 在mtml help workshop 中如何制作带上下文关联ID的帮助 调试程序时,控制台程序与直接建立的C++程序有区别吗? 给菜鸟推荐本书 VB调用外部DLL问题 【洗心革面,重新做人,割发断指,庄严声明】 从今以后 kook 不近女色,不灌疯水,以 panda_w 为榜样,苦练VC,研习汇编,做一个 CSDN 的正面典型! 谁有ULTRAEDIT 的注册码 能否推荐几本关于VB提高和关于VB数据库的书 紧急问题,关于SSL通过MS PROXY String类的问题 连接数据库的东东真是奇怪! 如何打开pdm格式文件 ===========灌水传说=========== 奇怪的问题,怎么办? 要用一元一次方程解 急就!在五一期间,小明,小亮等同学随家长一同到某公园游玩.其中票价是:成人每张35元,学生按成人五折优惠:团体票16人以上(含16人)按成人票六折优惠.小明爸爸说: 上海教育出版社七年级上寒假生活p27、p30、p45!p27:香烟烟雾对小金鱼的影响p30:乐器与演奏p45:拓展研究 gugu 在五一期间,小明,小亮等同学随家长一同到某公园游玩.其中票价是:成人每张40元,学在五一期间,小明,小亮等同学随家长一同到某公园游玩.其中票价是:成人每张40元,学生按成人五折优惠:团 七年级寒假生活答案(上海教育出版社) 答案 快,明天下午要用!是人教版的一单元二节! 在“五一”期间,小明、小亮等同学随家长一同到某公园游玩,下面是购买门票时话爸爸:大人门票是每张35元,学生门票是五折优惠,我们一共12人,共用350元.小明:爸爸,等一下让我算一算,换一 上海2014七年级寒假生活像科学家那样思考 老师要求写很多,搜到的只有一些完整的,其它的不详细,速救! 在五一期间,小明、小亮等同学随家长一同向某公园游玩,下面是购买门票时,小明与他爸爸的对话票价; 成人每张40元.学生;按成人票5折优惠..团体;【16人以上,含16人】按成人票6折优惠.爸 上海教育出版社 红色封面的!第一单元语文是阅读感悟是荷包蛋第二第三单元的答案 宇宙外面的外面的外面的 边界是啥子?比较好奇. 星期天爸爸妈妈带小明去游公园,买一张门票一共用去17.5元一张,一张成人票与三个儿童票的价钱相等,一张成人票多少元? 山东版寒假生活p30数学题请帮我一道题.相当于走迷宫.顺序:每一个字都走一遍,一个只能走一次,假 寒 乐 快 乐 快 ←入口快 乐 寒 假 寒 假 →出口乐 快 假 寒 假 寒寒 假 快 乐 快 乐假 寒 乐 宇宙边界在哪 星期天爸爸妈妈带小明去游公园,买门票一共用去17.5元,一张成人票与三张儿童票的价钱相等,一张成人票多少元? 初二寒假生活P30研究题在正三角形ABC所在平面内是否存在这样的点P,使以点P和点A,B,C中任意两点为顶点的三角形都是等腰三角形?如果存在的话,这样的点P有几个? 宇宙有边界? 爸爸妈妈带小红游公园,公园门票公用去10.5元,已知一张大人与三张小孩的票价相等 形容寒假生活的成语 宇宙有多大?有没有科学家研究过?宇宙的尽头是什么?宇宙的外面是什么? 六一时,爸爸妈妈带带小明逛公园,买门票共用去10.5元,已知一张大人票价与三张小孩子票价钱数相等.一张大人票多少元? 小学六年的生活可以用-----(填成语)来形容,也让我认识了许多好朋友,我们每天在一起----(填成语)在这即将毕业的时刻,我想对他们说-----(填古诗).说到古诗,我在学校阅览室读了许多,每次 科学家发现宇宙正处在( )之中.火速 需要 列方程:四张门票共花了11元.成人门票每张4元.儿童门票每张多少元?(两个大人,两个儿童) 调查问卷的结构、组成和种类是怎样的? 空间素材是一朵静态的花朵图形就是那种动态的花朵的图片 小明一家去动物园买门票共花了21元成人票6元儿童票3元小明家可能去几个大人和小孩 我要具体的,好一点的,有时间地点的…… 好看的花 特别的花要介绍 爸爸妈妈带小玲和同学去公园,买门票一共需要多少钱成人;每张5元儿童每张2.5元?爸爸妈妈带小玲和同学去公园,买门票一共需要多少钱成人;每张5元儿童每张2.5元 生物学调查表,要有特色一点哦! 《荷兰的花》文中形容荷兰花美丽的四字词语 小芳和爸爸妈妈去公园玩,门票用去22.5元,一张儿童票价是成人票价的一半,一张成人票价是多少钱要算式 生物问卷调查1你平时是否吃早餐?A是 B只吃一点 C否2你的早点包括A面包 B牛奶 C米饭 D鸡蛋3你是否每天都喝牛奶?A是 B偶尔 C从不4你是否每天都吃鸡蛋?A是 B偶尔 C从不5你是否经常吃零食?A是 B还 关于花多花美花香的四字词语 20个大人和4个孩子去买票,怎么买最合算(成人20儿童10团体10人以上12)价格表成人:20元儿童:10元团体:(10人或10人以上)12元 如何制作生物调查表我记得第一步是发现问题,然后是什么? 用四字词语描写春天开的花.比如娇艳美丽的玫瑰. 五一,2个成人带小明去公园,买票用10.5元知一张大人票价和三张小孩票价相等,一张大人,小孩票各多少?用去、10.5 到目前为止,科学家已发现并分类记载的生物种类超过了()种 描写美丽的花的四字词语有哪些? 六(3)班36名同学去景湖公园游玩,公园的具体收费情况如下:儿童票每张8元,四十张开始可以享受团体票价,团体票价按五分之一优惠.算一算,怎样购买门票最合算,可以少付多少元? 某公园的成人票是20元,儿童票价是8元,甲旅行团成人和儿童共有20名;乙旅行团的成人数是甲的旅行团的2倍而儿童人数则是甲旅行团的一半,已知两个旅行团共花费了816元购买门票,你能求出甲 分类单位的大小与生物种类和生物所具有的共同特征有什么关系? 某公园的票价是:每人10元;一次购票满30张,每张可少收2元.某班有26名同学去公园游玩,当班长准备好钱到钱到售票处买26张票时,爱动脑筋的数学课代表喊住班长,他提议买30张票,但有的同学 某公园的成人票价是20元,儿童票价是8元甲旅行团有x名成人和y名儿童,乙旅行的成人成人数是旅行团的2倍,儿童是甲旅行团的2分之一,求两个旅行团门票费用的总数? 地点新会不明+我Q632291981 某校初一年级[1]班组织学生去公园游玩,该班有50名同学组织了划船活动.[1]他们一共租了10条船,并且每条船都坐满了人,那么大、小船各租了多少只[2]他们租船一共花了多少元钱 某公园的成人票价每张是20元,儿童票价每张是8元,甲旅行团有X名成人和Y名儿童; (包括生物名称 数量 生活环境 归类) 春节期间,七(1)班的明明、丽丽等同学随家长一同到某公园游玩票价:成人每张35元学生按成人票5折优惠团体票(16人以上或16人):俺成人票的6折优惠)爸爸:大人们票每张35元,学生门票是5 某公园的成人票价是每张15元,儿童票价是每张8元,甲旅行团有x名成人和y名儿童;乙旅行团的成人数是甲旅行团的2倍,儿童数是甲旅行团的二分之一.(1)求甲,乙两个旅行团的门票总费用和 (2) 怎样做一个初一的生物调查表 春节期间,六(1)班的明明、丽丽等同学随家长一同到某公园游玩,下面是购买门票时,明明与他爸爸的对话(如图),是根据图中的信息,(1)明明他们一共去了几个成人,几个学生?(2)请你帮助 某公园的成人票价每张是10元,儿童票价每张是8元,甲旅行团有x名成人和y名儿童;乙旅行团的成人数是甲旅行团成人数的2倍,儿童数是甲旅行团儿童数的1/2,两个旅行团的门票费用总和为( 初一生物调查表是格式哦!不是答案!速回!再详细的~~~~ 在五一期间,小明,小亮等同学随家长一同到某公园游玩,下面是购买门票时,小明与他爸爸的对话,爸爸;大人门票每张35元,学生问票是5折优惠.我们一共12人,共需350元.小明:爸爸,让我算一算,换 某公园成人票价20元,儿童票价8元,甲旅游团x名成人和y名儿童;乙旅游团的成人是甲旅游团的2倍,儿童是甲旅游团的1/2.(1)求两个旅游团的门票总费用是多少.(2)当x=10人,y=5人时,求两个旅游 调查人:班级:调查时间:天气:调查地点:数量:生活环境:要求调查8到18种还有调查地点只能写什么土地、花丛,因为是要实地调查
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn