UIKit Dynamics入门
看E问文章时,发现了Dynamics,uikit动力,找了不错的入门文章。
From:http://blog.csdn.net/baecheung/article/details/11911061
本文涉及到的WWDC2013 Session有
- Session 206 Getting Started with UIKit Dynamics
- Session 221 Advanced Techniques with UIKit Dynamics
什么是UIKit动力学(UIKit Dynamics)
那么,应该怎么做呢
UIKit动力学实现的结构
为了实现动力UI,需要注册一套UI行为的体系,之后UI便会按照预先的设定进行运动了。我们应该了解的新的基本概念有如下四个:
- UIDynamicItem:用来描述一个力学物体的状态,其实就是实现了UIDynamicItem委托的对象,或者抽象为有面积有旋转的质点;
- UIDynamicBehavior:动力行为的描述,用来指定UIDynamicItem应该如何运动,即定义适用的物理规则。一般我们使用这个类的子类对象来对一组UIDynamicItem应该遵守的行为规则进行描述;
- UIDynamicAnimator;动画的播放者,动力行为(UIDynamicBehavior)的容器,添加到容器内的行为将发挥作用;
- ReferenceView:等同于力学参考系,如果你的初中物理不是语文老师教的话,我想你知道这是啥..只有当想要添加力学的UIView是ReferenceView的子view时,动力UI才发生作用。
光说不练假把式,来做点简单的demo吧。比如为一个view添加重力行为:
<span class="line-number" style="margin: 0px; padding: 0px;">1</span> <span class="line-number" style="margin: 0px; padding: 0px;">2</span> <span class="line-number" style="margin: 0px; padding: 0px;">3</span> <span class="line-number" style="margin: 0px; padding: 0px;">4</span> <span class="line-number" style="margin: 0px; padding: 0px;">5</span> <span class="line-number" style="margin: 0px; padding: 0px;">6</span> <span class="line-number" style="margin: 0px; padding: 0px;">7</span> <span class="line-number" style="margin: 0px; padding: 0px;">8</span> <span class="line-number" style="margin: 0px; padding: 0px;">9</span> <span class="line-number" style="margin: 0px; padding: 0px;">10</span> <span class="line-number" style="margin: 0px; padding: 0px;">11</span> <span class="line-number" style="margin: 0px; padding: 0px;">12</span> <span class="line-number" style="margin: 0px; padding: 0px;">13</span> |
|
代码很简单,
- 以现在ViewController的view为参照系(ReferenceView),来初始化一个UIDynamicAnimator。
- 然后分配并初始化一个动力行为,这里是UIGravityBehavior,将需要进行物理模拟的UIDynamicItem传入。
UIGravityBehavior
的initWithItems:
接受的参数为包含id的数组,另外UIGravityBehavior
实例还有一个addItem:
方法接受单个的id。就是说,实现了UIDynamicItem委托的对象,都可以看作是被力学特性影响的,进而参与到计算中。UIDynamicItem委托需要我们实现bounds
,center
和transform
三个属性,在UIKit Dynamics计算新的位置时,需要向Behavior内的item询问这些参数,以进行正确计算。iOS7中,UIView和UICollectionViewLayoutAttributes已经默认实现了这个接口,所以这里我们直接把需要模拟重力的UIView添加到UIGravityBehavior里就行了。 - 把配置好的UIGravityBehavior添加到animator中。
- strong持有一下animator,避免当前scope结束被ARC释放掉(后果当然就是UIView在哪儿傻站着不掉)
运行结果,view开始受重力影响了:
重力作用下的UIview
碰撞,我要碰撞
没有碰撞的话,物理引擎就没有任何意义了。和重力行为类似,碰撞也有一个UIDynamicBehavior
子类来描述碰撞行为,即UICollisionBehavior
。在上面的demo中加上几句:
<span class="line-number" style="margin: 0px; padding: 0px;">1</span> <span class="line-number" style="margin: 0px; padding: 0px;">2</span> <span class="line-number" style="margin: 0px; padding: 0px;">3</span> <span class="line-number" style="margin: 0px; padding: 0px;">4</span> <span class="line-number" style="margin: 0px; padding: 0px;">5</span> <span class="line-number" style="margin: 0px; padding: 0px;">6</span> <span class="line-number" style="margin: 0px; padding: 0px;">7</span> <span class="line-number" style="margin: 0px; padding: 0px;">8</span> <span class="line-number" style="margin: 0px; padding: 0px;">9</span> <span class="line-number" style="margin: 0px; padding: 0px;">10</span> <span class="line-number" style="margin: 0px; padding: 0px;">11</span> <span class="line-number" style="margin: 0px; padding: 0px;">12</span> <span class="line-number" style="margin: 0px; padding: 0px;">13</span> <span class="line-number" style="margin: 0px; padding: 0px;">14</span> <span class="line-number" style="margin: 0px; padding: 0px;">15</span> <span class="line-number" style="margin: 0px; padding: 0px;">16</span> <span class="line-number" style="margin: 0px; padding: 0px;">17</span> <span class="line-number" style="margin: 0px; padding: 0px;">18</span> <span class="line-number" style="margin: 0px; padding: 0px;">19</span> |
|
也许聪明的你已经看到了,还是一样的,创建新的行为规则(UICollisionBehavior),然后加到animator中…唯一区别的地方是碰撞需要设定碰撞边界范围translatesReferenceBoundsIntoBoundary将整个参照view(也就是self.view)的边框作为碰撞边界(另外你还可以使用setTranslatesReferenceBoundsIntoBoundaryWithInsets:这样的方法来设定某一个区域作为碰撞边界,更复杂的边界可以使用addBoundaryWithIdentifier:forPath:来添加UIBezierPath,或者addBoundaryWithIdentifier:fromPoint:toPoint:来添加一条线段为边界,详细地还请查阅文档);另外碰撞是有回调的,可以在self中实现UICollisionBehaviorDelegate
。
最后,只是直直地掉下来的话未免太无聊了,加个角度吧:
<span class="line-number" style="margin: 0px; padding: 0px;">1</span> |
|
结果是这样的,帅死了…这在以前只用iOS SDK的话,够写上很长时间了吧..
碰撞和重力同时作用的动力UI
碰撞的delegate可以帮助我们了解碰撞的具体情况,包括哪个item和哪个item开始发生碰撞,碰撞接触点是什么,是否和边界碰撞,和哪个边界碰撞了等信息。这些回调方法保持了Apple一向的命名原则,所以通俗易懂。需要多说一句的是回调方法中对于ReferenceView的Bounds做边界的情况,BoundaryIdentifier将会是nil,自行添加的其他边界的话,ID自然是添加时指定的ID了。
- – collisionBehavior:beganContactForItem:withBoundaryIdentifier:atPoint:
- – collisionBehavior:beganContactForItem:withItem:atPoint:
- – collisionBehavior:endedContactForItem:withBoundaryIdentifier:
- – collisionBehavior:endedContactForItem:withItem:
其他能实现的效果
除了重力和碰撞,iOS SDK还预先帮我们实现了一些其他的有用的物理行为,它们包括
- UIAttachmentBehavior 描述一个view和一个锚相连接的情况,也可以描述view和view之间的连接。attachment描述的是两个点之间的连接情况,可以通过设置来模拟无形变或者弹性形变的情况(再次希望你还记得这些概念,简单说就是木棒连接和弹簧连接两个物体)。当然,在多个物体间设定多个;UIAttachmentBehavior,就可以模拟多物体连接了..有了这些,似乎可以做个老鹰捉小鸡的游戏了- -…
- UISnapBehavior 将UIView通过动画吸附到某个点上。初始化的时候设定一下UISnapBehavior的initWithItem:snapToPoint:就行,因为API非常简单,视觉效果也很棒,估计它是今后非游戏app里会被最常用的效果之一了;
- UIPushBehavior 可以为一个UIView施加一个力的作用,这个力可以是持续的,也可以只是一个冲量。当然我们可以指定力的大小,方向和作用点等等信息。
- UIDynamicItemBehavior 其实是一个辅助的行为,用来在item层级设定一些参数,比如item的摩擦,阻力,角阻力,弹性密度和可允许的旋转等等
UIDynamicItemBehavior有一组系统定义的默认值,
<span class="line-number" style="margin: 0px; padding: 0px;">1</span> <span class="line-number" style="margin: 0px; padding: 0px;">2</span> <span class="line-number" style="margin: 0px; padding: 0px;">3</span> <span class="line-number" style="margin: 0px; padding: 0px;">4</span> <span class="line-number" style="margin: 0px; padding: 0px;">5</span> <span class="line-number" style="margin: 0px; padding: 0px;">6</span> <span class="line-number" style="margin: 0px; padding: 0px;">7</span> <span class="line-number" style="margin: 0px; padding: 0px;">8</span> <span class="line-number" style="margin: 0px; padding: 0px;">9</span> <span class="line-number" style="margin: 0px; padding: 0px;">10</span> <span class="line-number" style="margin: 0px; padding: 0px;">11</span> <span class="line-number" style="margin: 0px; padding: 0px;">12</span> <span class="line-number" style="margin: 0px; padding: 0px;">13</span> <span class="line-number" style="margin: 0px; padding: 0px;">14</span> <span class="line-number" style="margin: 0px; padding: 0px;">15</span> <span class="line-number" style="margin: 0px; padding: 0px;">16</span> <span class="line-number" style="margin: 0px; padding: 0px;">17</span> <span class="line-number" style="margin: 0px; padding: 0px;">18</span> <span class="line-number" style="margin: 0px; padding: 0px;">19</span> <span class="line-number" style="margin: 0px; padding: 0px;">20</span> <span class="line-number" style="margin: 0px; padding: 0px;">21</span> <span class="line-number" style="margin: 0px; padding: 0px;">22</span> <span class="line-number" style="margin: 0px; padding: 0px;">23</span> <span class="line-number" style="margin: 0px; padding: 0px;">24</span> <span class="line-number" style="margin: 0px; padding: 0px;">25</span> <span class="line-number" style="margin: 0px; padding: 0px;">26</span> <span class="line-number" style="margin: 0px; padding: 0px;">27</span> <span class="line-number" style="margin: 0px; padding: 0px;">28</span> <span class="line-number" style="margin: 0px; padding: 0px;">29</span> <span class="line-number" style="margin: 0px; padding: 0px;">30</span> <span class="line-number" style="margin: 0px; padding: 0px;">31</span> <span class="line-number" style="margin: 0px; padding: 0px;">32</span> <span class="line-number" style="margin: 0px; padding: 0px;">33</span> <span class="line-number" style="margin: 0px; padding: 0px;">34</span> <span class="line-number" style="margin: 0px; padding: 0px;">35</span> <span class="line-number" style="margin: 0px; padding: 0px;">36</span> <span class="line-number" style="margin: 0px; padding: 0px;">37</span> |
|
viewDidiLoad时先在现在环境中加入了重力,然后监测到pan时附加一个UIAttachmentBehavior,并在pan位置更新更新其锚点,此时UIAttachmentBehavior和UIGravityBehavior将同时作用(想象成一根木棒连着手指处和view)。在手势结束时将这个UIAttachmentBehavior移除,view将在重力作用下下落。整个过程如下图:
Drag & Drop
UIKit力学的物理学分析
这样类比之后的结论是,如果将1单位的UI力学中的力等同于1牛顿的话:
- 1000单位的UI质量,与现实世界中1kg的质量相当,即一个点等同一克;
- 屏幕的100像素的长度,约和现实世界中0.99米相当(完全可以看为1米)
- UI力学中的默认密度,约和现实世界的0.1kg/m2 相当
UIKit动力学自定义
除了SDK预先定义好的行为以外,我们还可以自己定义想要的行为。这种定义可以发生在两个层级上,一种是将官方的行为打包,以简化实现。另一种是完全定义新的计算规则。
- 继承一下UIDynamicBehavior(在这里UIDynamicBehavior类似一个抽象类,并没有具体实现什么行为)
- 在子类中实现一个类似其他内置行为初始化方法
initWithItems:
,用以添加物体和想要打包的规则。当然你如果喜欢用其他方式也行..只不过和自带的行为保持API统一对大家都有好处..添加item的话就用默认规则的initWithItems:就行,对于规则UIDynamicBehavior提供了一个addChildBehavior:的方法,来将其他规则加入到当前规则里 - 没有第三步了,使用就行了。
<span class="line-number" style="margin: 0px; padding: 0px;">1</span> <span class="line-number" style="margin: 0px; padding: 0px;">2</span> <span class="line-number" style="margin: 0px; padding: 0px;">3</span> <span class="line-number" style="margin: 0px; padding: 0px;">4</span> <span class="line-number" style="margin: 0px; padding: 0px;">5</span> <span class="line-number" style="margin: 0px; padding: 0px;">6</span> <span class="line-number" style="margin: 0px; padding: 0px;">7</span> <span class="line-number" style="margin: 0px; padding: 0px;">8</span> <span class="line-number" style="margin: 0px; padding: 0px;">9</span> <span class="line-number" style="margin: 0px; padding: 0px;">10</span> <span class="line-number" style="margin: 0px; padding: 0px;">11</span> <span class="line-number" style="margin: 0px; padding: 0px;">12</span> <span class="line-number" style="margin: 0px; padding: 0px;">13</span> <span class="line-number" style="margin: 0px; padding: 0px;">14</span> <span class="line-number" style="margin: 0px; padding: 0px;">15</span> <span class="line-number" style="margin: 0px; padding: 0px;">16</span> <span class="line-number" style="margin: 0px; padding: 0px;">17</span> <span class="line-number" style="margin: 0px; padding: 0px;">18</span> <span class="line-number" style="margin: 0px; padding: 0px;">19</span> <span class="line-number" style="margin: 0px; padding: 0px;">20</span> <span class="line-number" style="margin: 0px; padding: 0px;">21</span> <span class="line-number" style="margin: 0px; padding: 0px;">22</span> <span class="line-number" style="margin: 0px; padding: 0px;">23</span> <span class="line-number" style="margin: 0px; padding: 0px;">24</span> |
|
另一种比较高级一点,需要对计算完全定义。在默认的行为或者它们组合不能满足禽兽般的产品经理/设计师的需求是,亲爱的骚年..开始自己写吧..其实说简单也简单,UIDynamicBehavior里提供了一个@property(nonatomic, copy) void (^action)(void)
,animator将在每次animation step(就是需要计算动画时)调用这个block。就是说,你可以通过设定这个block来实现自己的行为。基本思路就是在这个block中向所有item询问它们当前的center和transform状态,然后开始计算,然后把计算后的相应值再赋予item,从而改变在屏幕上的位置,大小,角度等。
UIKit动力学的性能分析和限制
总结
总之就是一套全新的UI交互的视觉体验和效果,但是并非处处适用。在合适的地方使用可以增加体验,但是也会有其他方式更适合的情况。所以拉上你的设计师好基友去开拓新的大陆吧…
深入:http://www.onevcat.com/2013/09/spring-list-like-ios7-message/
UIKit Dynamics入门相关推荐
- iOS7—Day by day—Day0:UIKit Dynamics
这篇文章是天天品尝iOS7甜点系列的一部分,你可以查看完整的系列目录:天天品尝iOS7甜点 伴随着介绍苹果的iOS7,将会使你清晰的认清设备和现实世界的相互作用,UIKit Dynamics就是众多新 ...
- iOS7 UIKit Dynamics 的初步研究
这回开始学习iOS7新的UIKit Dynamics,我看有人翻译成UIKit 力学,我觉得倒挺贴切的,所以就借来用一用. 这个UIKit力学系统里要设计到四个东西: 1.UIDynamicAnima ...
- iOS7新特征汇总[05]初窥UIKit动力(UIKit Dynamics)
本文转载自:破船之家 本文地址:iOS7新特征汇总[05]初窥UIKit动力(UIKit Dynamics) QQ20130615-6 此图来此WWDC视频 小引 通过之前的4篇文章,笔者把iOS7中 ...
- iOS UIKit Dynamics(物理碰撞,动画)
早期技术文章搬家,原文链接 大部分人或许觉得动画用UIView 或是CoreAnimation的动画效果,那为何还需要UIKit 中的UIDynamic? 答:UIDynamic 为使用者提供更符合现 ...
- 2013 CocoaChina微信精选之技术汇
为了方便更多朋友能尽快获得技术.游戏开发以及应用设计等方面的信息,我们从去年开始通过微信向大家推送信息,并且我们也收到了大家积极的反馈和建议,在此感谢大家的关注和支持.2014年,我们将一如既往地陪伴 ...
- macOS开发入门教程 : Part 2
原文:How To Make A UIViewController Transition Animation Like in the Ping App 作者:Luke Parham 译者:kmyhy ...
- macOS开发入门教程: Part 3
原文:How To Make A UIViewController Transition Animation Like in the Ping App 作者:Luke Parham 译者:kmyhy ...
- iOS中的动力学:Dynamics【1】
iOS7建议我们创建的界面具有物理特性,而不只是像素的集合,可以响应触摸.手势.屏幕方向改变等事件,让用户与界面之间有更深入的交互,而不是像iOS6那样在软件界面上模仿现实世界的纹理而已.或许你会认为 ...
- Swift实现UIKit Dynamic动画
iOS7引入了UIKit Dynamics,可以帮助开发者开发出更接近真实世界的动画效果.之前,用户如果要做出这样的效果,需要话很多的时间在物理计算和Core Animation上.现在,所有的一切都 ...
最新文章
- LibreOffice 3.6.6 修复了 50 个 Bug
- centos配置oracle自启,centos 下配置oracle11gR2开机自启
- 再见IE浏览器(IE之死2021 年 8 月 17 日)
- 全栈工程师之路-中级篇之小程序开发-第二章第五节小程序中的Promise
- gulp与webpack的区别
- discuz 标签详解
- excel去重怎么操作_EXCEL根据进货、出货求库存怎么操作
- html2cavans
- URLSession实现iTunes搜索听歌
- 二分专题(不定期更新)
- java毕业生设计在线教育平台计算机源码+系统+mysql+调试部署+lw
- Android中的事件处理总结
- 函数极限什么时候可以拆分
- amd显卡跑人工神经网络,amd显卡能跑神经网络吗
- 步进电机五根线怎么接_第一讲:老冯三分钟教会你步进电机接线
- Scratch-陶陶摘苹果
- 信号与系统时域分析(4)——冲激响应与阶跃响应
- 715. Range 模块
- artTemplate-3.0(与项目实际结合)
- c语言编写计算ackerman函数的递归函数ack(n,x,y),第六章函数与宏定义实验报告二...
热门文章
- 【ArchSummit】社交元宇宙的技术挑战与探索
- Apache ZooKeeper【动物管理员】
- Unity 学习 Tilemap
- 中国危废处理行业深度调研与未来发展规划研究报告2022-2027年新版
- android照片备份软件下载,照片备份云相册app-照片备份云相册安卓版下载v1.5-乐游网安卓下载...
- homebrew php 扩展,Mac homebrew-1.5以后安装php扩展的方法
- (附源码)计算机毕业设计SSM流浪动物救助系统
- Windows - 文件系统 学习/收集
- vue2.0中的退出登录问题
- 云脉文档管理系统,工作中的实用工具