（转载）UIKIt力学教程

转载自：http://www.cocoachina.com/ios/20131226/7614.html

 

这篇文章还可以在这里找到 英语,
 
Ray：这篇教程节选自 iOS 7 教程集，它是 iOS 7 盛宴的一部分，希望你能喜欢。
 
你可能已经注意到 iOS 7 中似乎有一些自相矛盾的地方，苹果在建议放弃真实世界的隐喻和拟物化同时，又鼓励创造体验真实的用户界面。
 
在实践中这意味着什么呢？iOS 7 的设计目标是鼓励创造能像真实的物理对象一样响应触摸、手势和方向变化的数字界面，而不是像素的简单堆砌。最终，区别于形式上的拟物化，让用户与界面产生更为深刻的联系。
这个任务听起来很艰巨，因为做一个看起来很真实的数字界面，要比做一个体验真实的界面简单得多。值得庆幸的是，你有一些很赞的新工具可以帮助你完成这个任务：UIKit 力学（Dynamics）和动态效果（Motion Effects）。
 
译者注：关于 UIKit Dynamics 的中译名，我与许多开发者有过讨论，有动力、动力模型、动态等译法。但我认为译为力学更为贴切，希望文中出现的力学知识能让你认同我的看法。
 
1.UIKit 力学是一个集成到 UIKit 的完整的物理引擎。它使你可以通过添加诸如重力、吸附（弹簧）和作用力等行为（behavior），创造体验真实的界面。你只需定义你的界面元素需要遵从的物理特性，剩下的事交给力学引擎处理即可。
 
2.动态效果让你能够创造相当酷的视差效果，例如 iOS 7 主屏的动态背景。简单来说，你可以利用手机的加速计提供的数据，开发能够响应手机方向变化的界面。
 
同时使用动态效果和力学效果，是让数字界面和体验变得栩栩如生的利器。当你的用户看到你的应用以一种自然的、动态的形式响应他们的操作时，就和你的应用产生了更深层次的联系。
 
开始吧
UIKit 力学非常有意思，最好的学习方法就是从一些小的例子开始。
 
打开 Xcode，选择 File / New / Project … 然后选择 iOSApplicationSingle View Application 并且命名新的工程为 DynamicsPlayground。创建完工程后，打开 ViewController.m 并且添加下面的代码到 viewDidLoad 的末尾：
 
  1. UIView* square = [[UIView alloc] initWithFrame: 
  2.                                 CGRectMake(100, 100, 100, 100)]; 
  3. square.backgroundColor = [UIColor grayColor]; 
  4. [self.view addSubview:square]; 
 
以上代码简单地添加了一个方块 UIView 到界面上。
编译运行，你可以看到如下图所示方块：
 
 
如果你在真机上运行 App，尝试转动手机，上下颠倒，或者摇动它。什么都没发生？那就对了，理应如此。因为当你向界面中添加一个视图的时候，你希望他保持稳定的 frame，直到你添加一些力学行为到界面中。
 
添加重力
继续编辑 ViewController.m，添加以下实例变量：
 
  1. UIDynamicAnimator* _animator; 
  2. UIGravityBehavior* _gravity; 
 
在 viewDidLoad 末尾添加以下代码：
 
  1. _animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view]; 
  2. _gravity = [[UIGravityBehavior alloc] initWithItems:@[square]]; 
  3. [_animator addBehavior:_gravity]; 
 
我稍后再解释这些代码，现在，你只需编译运行你的程序。你应该会看到方块渐渐地加速下坠，直到落到屏幕之外，如下图所示：
 
在刚添加的代码中，出现了一些力学相关的类：
1.UIDynamicAnimator 是 UIKit 物理引擎。这个类会记录你添加到引擎中的各种行为（比如重力），并且提供全局上下文。当你创建动画实例时，需要传入一个参考视图用于定义坐标系。
 
2.UIGravityBehavior 把重力的行为抽象成模型，并且对一个或多个元素施加作用力，让你可以建立物理交互模型。当你创建一个行为实例的时候，你需要把它关联到一组元素上，一般是一组视图。这样你就能选择受该行为影响的元素，在这个例子中就是指受重力影响的元素。
 
大部分行为有一些可配置属性。比如重力行为允许你改变它的角度和量级。尝试修改这些属性使你的物体向上、侧向或斜向以不同的加速度移动。
 
注意：关于单位：在物理学中，重力（g）单位是米每平方秒，约为 9.8 m/s2。根据牛顿第二定律，你可以用下面公式计算在重力作用下，物体移动的距离：
距离 = 0.5 × g × 时间^2
 
在 UIKit 力学中，公式依然适用，但单位有所不同。单位中的米每平方秒要用像素每平方秒代替。基于重力参数，应用牛顿第二定律你任然可以计算出视图在任意时间的位置。
 
你真的需要了解这些么？未必，你只需要知道更大的 g 意味着掉落得更快，但是了解背后的数学原理有利无弊。
 
设置边界
虽然你看不到，但是当方块消失在屏幕边缘的时候，它其实还在继续下落。为了使它保持在屏幕范围之内，你需要定义一个边界。
 
在 ViewController.m 里添加另一个实例变量：
 
  1. UICollisionBehavior* _collision; 
  2. 在 viewDidLoad 末尾加入以下代码： 
  3. _collision = [[UICollisionBehavior alloc] 
  4.                                       initWithItems:@[square]]; 
  5. _collision.translatesReferenceBoundsIntoBoundary = YES; 
  6. [_animator addBehavior:_collision]; 
 
上面的代码创建了一个碰撞行为，定义了一个或多个边界，以决定相关元素之间如何互相影响。
 
上面的代码没有显式地添加边界坐标，而是设置 translatesReferenceBoundsIntoBoundary 属性为 YES。这意味着用提供给 UIDynamicAnimator 的视图的 bounds 作为边界。
 
编译并运行，你会看到方块在碰到屏幕底部之后，轻轻弹起，并最终静止，如下图所示：
 
这是一个很赞的行为，特别是看到如此少的代码量。
 
处理碰撞
接下来你要添加一个固定的障碍物，他会跟下落的方块碰撞并相互影响。在 viewDidLoad 中添加方块的代码之后加入以下代码：
 
  1. UIView* barrier = [[UIView alloc] initWithFrame:CGRectMake(0, 300, 130, 20)]; 
  2. barrier.backgroundColor = [UIColor redColor]; 
  3. [self.view addSubview:barrier]; 
 
编译并运行应用，你可以看到一个红色的“障碍物”横跨在屏幕中间。但是你会发现他没有起到任何作用，方块直接穿过了障碍物：
 
这显然不是你想要的，这也说明了很重要的一点：力学只影响关联到行为上的视图。
 
下面是一个简单的示意图：
 
关联 UIDynamicAnimator 到提供坐标系的参考视图，然后添加一个或多个行为来对关联的物体施加作用力。大部分行为可以与多个物体关联，每个物体可以与多个行为关联。上图展示了当前应用中的行为以及他们的关系。
当前代码里的行为都没有涉及到障碍物，因此在力学引擎中，这个障碍物并不存在。
 
使物体响应碰撞
为了让方块与障碍物碰撞，找到初始化碰撞行为的代码并用下面的代码替代：
 
  1. _collision = [[UICollisionBehavior alloc] initWithItems:@[square, barrier]]; 
碰撞实例需要知道它所影响的每一个视图，因此添加障碍物到列表中使得碰撞对障碍物也有作用。
 
编译并运行应用，两个物体碰撞并相互影响，如下图所示：
 
碰撞行为在每个关联的物体周围形成一个边界，使得这些物体从可以互相穿越的物体变成实体无法穿越。
 
更新一下前面的示意图，现在碰撞行为与两个视图都关联起来了：
 
但是现在还有一些有出入的地方。我们希望障碍物是不可移动的，但是当前设置下，当两个物体碰撞的时候，障碍物被撞开并且旋转着落向屏幕底部。
 
更奇怪的是，障碍物从底部弹起后似乎没有趋于静止的意思。这是因为重力没有对障碍物产生影响，这也解释了为什么在方块撞到障碍物之前它没有移动。
 
你需要另一种解决问题的思路。既然障碍物是不可移动的，那么力学引擎就没有必要知道它的存在。但是如何检测碰撞呢？
 
不可见的边界和碰撞
把碰撞行为的初始化代码改回原先的样子，使他只知道方块的存在：
 
  1. _collision = [[UICollisionBehavior alloc] initWithItems:@[square]]; 
然后，添加如下边界：
 
  1. // add a boundary that coincides with the top edge 
  2. CGPoint rightEdge = CGPointMake(barrier.frame.origin.x + 
  3.                                 barrier.frame.size.width, barrier.frame.origin.y); 
  4. [_collision addBoundaryWithIdentifier:@"barrier" 
  5.                             fromPoint:barrier.frame.origin 
  6.                               toPoint:rightEdge]; 
 
上述代码添加了一个不可见的边界，它正是障碍物的上边界。红色障碍物对用户依然是可见的，但是力学引擎不知道它的存在；相反，添加的边界对于力学引擎是可见的，对于用户是不可见的。当方块下落的时候，看起来与障碍物发生了碰撞，其实它碰到了不可移动的边界。
 
编译并运行应用，你看到的效果如下图所示：
 
方块现在从障碍物的边界弹起，旋转，然后继续落到屏幕底部直到静止。
 
到现在为止，UIKit 力学的强大之处可见一斑：你只需要几行简单的代码就可以实现相当复杂的效果。在这背后有许多复杂的逻辑，在下个章节会涉及力学引擎与应用中物体交互的具体方式。
 
碰撞的背后
每一个力学行为都有一个 action 属性，你可以定义一个 block 使其在动画的每一步被执行。添加下面的代码到 viewDidLoad：
 
  1. _collision.action =  ^{ 
  2.     NSLog(@"%@, %@",  
  3.           NSStringFromCGAffineTransform(square.transform),  
  4.           NSStringFromCGPoint(square.center)); 
  5. }; 
 
上面的代码记录了下落的方块的中点位置核 transform 属性。编译并运行应用，你可以在 Xcode 的控制台中看到调试信息。
 
在前 400 毫秒左右你会看到类似这样的信息：
 
  1. 2013-07-26 08:21:58.698 DynamicsPlayground[17719:a0b] [1, 0, 0, 1, 0, 0], {150, 236} 
  2. 2013-07-26 08:21:58.715 DynamicsPlayground[17719:a0b] [1, 0, 0, 1, 0, 0], {150, 243} 
  3. 2013-07-26 08:21:58.732 DynamicsPlayground[17719:a0b] [1, 0, 0, 1, 0, 0], {150, 250} 
 
可以看到力学引擎在动画过程中不断改变方块的中点位置，或者说它的 frame。
 
当方块撞到障碍物的时候，它开始旋转，这时候的调试信息类似这样：
 
  1. 2013-07-26 08:21:59.182 DynamicsPlayground[17719:a0b] [0.10679234, 0.99428135, -0.99428135, 0.10679234, 0, 0], {198, 325} 
  2. 2013-07-26 08:21:59.198 DynamicsPlayground[17719:a0b] [0.051373702, 0.99867952, -0.99867952, 0.051373702, 0, 0], {199, 331} 
  3. 2013-07-26 08:21:59.215 DynamicsPlayground[17719:a0b] [-0.0040036771, 0.99999201, -0.99999201, -0.0040036771, 0, 0], {201, 338} 
 
你可以看到力学引擎根据物理模型计算并同时改变 transform 属性和 frame 属性来定位视图。
 
虽然这些属性的具体取值没什么意思，但是很重要的一点是他们每时每刻都在改变。因此如果你尝试用代码改变物体的 frame 或者 transform 属性，这些值会被覆盖。这意味着当你的物体受力学引擎控制的时候，你不能通过 transform 来缩放你的物体。
 
力学行为的方法名里用的是 items 而不是 views，这是因为想要使用力学行为的对象只需实现 UIDynamicItem 协议即可，定义如下：
 
  1. @protocol UIDynamicItem  
  2.   
  3. @property (nonatomic, readwrite) CGPoint center; 
  4. @property (nonatomic, readonly) CGRect bounds; 
  5. @property (nonatomic, readwrite) CGAffineTransform transform; 
  6.   
  7. @end 
 
UIDynamicItem 协议为力学引擎提供了读写 center 和 transform 属性的权限，使它可以根据内部的计算结果移动物体。同时提供了 bounds 的读权限，用以确定物体的大小，这不但在计算物体边界的时候被用到，同时在物体受力时用于计算物体的质量。
 
这个协议说明力学引擎与 UIView并不耦合，其实 UIKit 中还有一个类也实现了这个协议 – UICollectionViewLayoutAttributes。所以可以通过力学引擎对 collection views 实现动画效果。
 
碰撞通知
到现在，你添加了一些视图和行为，然后让力学引擎接手剩下的任务。在接下来的内容中你会看到如何接收物体碰撞时的通知。
 
打开 ViewController.m 并且实现 UICollisionBehaviorDelegate 协议:
 
  1. @interface ViewController ()  
  2.   
  3. @end 
 
还是在 viewDidLoad 中，在初始化碰撞行为后，设置当前 view controller 为其代理（delegate），代码如下：
 
  1. _collision.collisionDelegate = self; 
然后，添加一个碰撞行为的代理方法：
 
  1. - (void)collisionBehavior:(UICollisionBehavior *)behavior beganContactForItem:(id)item  
  2.             withBoundaryIdentifier:(id)identifier atPoint:(CGPoint)p { 
  3.     NSLog(@"Boundary contact occurred - %@", identifier); 
  4. } 
 
当碰撞发生的时候，这个代理方法会被调用并且在控制台打印出调试信息。为了避免控制台的信息太乱，你可以删除之前在 _collision.action 里添加的调试信息。
 
编译运行，物体相互碰撞，你会在控制台看到如下信息：
 
  1. 2013-07-26 08:44:37.473 DynamicsPlayground[18104:a0b] Boundary contact occurred - barrier 
  2. 2013-07-26 08:44:37.689 DynamicsPlayground[18104:a0b] Boundary contact occurred - barrier 
  3. 2013-07-26 08:44:38.256 DynamicsPlayground[18104:a0b] Boundary contact occurred - (null) 
  4. 2013-07-26 08:44:38.372 DynamicsPlayground[18104:a0b] Boundary contact occurred - (null) 
  5. 2013-07-26 08:44:38.455 DynamicsPlayground[18104:a0b] Boundary contact occurred - (null) 
  6. 2013-07-26 08:44:38.489 DynamicsPlayground[18104:a0b] Boundary contact occurred - (null) 
  7. 2013-07-26 08:44:38.540 DynamicsPlayground[18104:a0b] Boundary contact occurred - (null) 
 
从调试信息中可以看到方块碰了两次障碍物，也就是之前添加的不可见的边界。(null) 则是指参考视图的边界。
 
这些调试信息读起来很有意思（认真的），但是如果能在碰撞时触发一些视觉反馈，那就更有意思了。
 
在输出调试信息的代码之后添加如下代码：
 
  1. UIView* view = (UIView*)item; 
  2. view.backgroundColor = [UIColor yellowColor]; 
  3. [UIView animateWithDuration:0.3 animations:^{ 
  4.     view.backgroundColor = [UIColor grayColor]; 
  5. }]; 
 
上述代码会改变碰撞的物体的背景色为黄色，然后渐变回灰色。
 
编译运行，看一下实际效果：
 
每次方块与边界发生碰撞的时候，它都会闪现黄色。
 
UIKit 力学会根据物体的 bounds 计算并自动设置它们的物理属性（如质量或弹性系数）。接下来你会看到如何使用 UIDynamicItemBehavior 类控制这些物理属性。
 
设置物体属性
在 viewDidLoad 的末尾，添加下面的代码：
 
  1. UIDynamicItemBehavior* itemBehaviour = [[UIDynamicItemBehavior alloc] initWithItems:@[square]]; 
  2. itemBehaviour.elasticity = 0.6; 
  3. [_animator addBehavior:itemBehaviour]; 
 
上面的代码创建了一个物体行为（item behavior），把它关联到方块，然后添加该行为到动画实例（animator）。弹性系数属性（elasticity）控制物体的弹性，取 1.0 表示完全弹性碰撞，也就是说碰撞中没有能量或速度的损失。你刚刚设置了方块的弹性系数为 0.6，意味着方块在每次弹起的时候速度都会减慢。
 
编译运行应用，你会发现现在的方块比之前更有弹性，如下：
 
注： 如果你想知道我是如何生成如上图片来展现方块的历史位置，其实相当简单！我给行为的 action 属性添加了一个简单的 block，每执行五次，用当前方块的中点位置和 transform 属性，添加一个新的方块到当前视图。
 
在上面的代码中，你只改变了物体的弹性系数，然后物体的行为类还有很多其他可以调整的属性。有下列属性：
 
elasticity（弹性系数） – 决定了碰撞的弹性程度，比如碰撞时物体的弹性。
friction（摩擦系数） – 决定了沿接触面滑动时的摩擦力大小。
density（密度） – 跟 size 结合使用，来计算物体的总质量。质量越大，物体加速或减速就越困难。
resistance（阻力） – 决定线性移动的阻力大小，这根摩擦系数不同，摩擦系数只作用于滑动运动。
angularResistance（转动阻力） – 决定转动运动的阻力大小。
allowsRotation（允许旋转） – 这个属性很有意思，它在真实的物理世界没有对应的模型。设置这个属性为 NO 物体就完全不会转动，无力受到多大的转动力。
 
动态添加行为
现在的情况下，你的应用设置系统的所有行为，然后由力学引擎处理系统的物理行为，直至所有物体静止。在下一步中，你会看到如何动态添加或删除行为。
 
打开 ViewController.m 并添加如下实例变量：
 
  1. BOOL _firstContact; 
添加下面的代码到碰撞代理方法 collisionBehavior:beganContactForItem:withBoundaryIdentifier:atPoint: 的末尾：
 
  1. if (!_firstContact) 
  2. { 
  3.     _firstContact = YES; 
  4.   
  5.     UIView* square = [[UIView alloc] initWithFrame:CGRectMake(30, 0, 100, 100)]; 
  6.     square.backgroundColor = [UIColor grayColor]; 
  7.     [self.view addSubview:square]; 
  8.   
  9.     [_collision addItem:square]; 
  10.     [_gravity addItem:square]; 
  11.   
  12.     UIAttachmentBehavior* attach = [[UIAttachmentBehavior alloc] initWithItem:view 
  13.                                                                attachedToItem:square]; 
  14.     [_animator addBehavior:attach]; 
  15. } 
 
上面的代码检测到方块和障碍物的第一次接触时，创建第二个方块并添加到碰撞和重力行为中。此外，设置了一个吸附行为，实现两个物体之间加入虚拟的弹簧的效果。
 
编译运行应用，当原有的方块撞到障碍物时，你应该会看到一个新的方块出现，如下：
 
虽然两个方块看起来被连接到一起，但是因为没有在屏幕上画线条或是弹簧，你并不会看到视觉上的联系。
 
接下来做什么？
 
现在你应该比较了解 UIKit 力学的核心概念了。
 
如果你有兴趣学习更多关于 UIKit 力学的内容，可以关注我们的新书 iOS 7 教程集。书中结合你在本文学到的内容，有更深入的内容，展示了如何在现实场景中利用 UIKit 力学：
 
用户可以上拉一个食谱来预览它，当用户松开食谱的时候，它会落回菜单中，或是停靠在屏幕顶部。最终的成品是一个有真实物理体验的应用。
 
我希望你喜欢这个 UIKit 力学教程 – 我们觉得这很酷，并且期待看到你在应用中付诸有创意的交互。如果你有任何问题或评论，请加入下面的论坛讨论！
 
你在这个教程中创建的 Dynamics Playground 工程的完整代码可以在 github 上找到，文中每一步编译运行都对应一次提交。
posted @ 2015-06-24 10:41  李自泰  阅读(259)  评论(0)  编辑  收藏  举报