UIKit 力学教程

calendar Nov 17, 2015 · 3 分钟 阅读 · iOS UIKit

文章来源：http://www.cocoachina.com/industry/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 到界面上。

编译运行，你可以看到如下图所示方块：

1

如果你在真机上运行 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];

我稍后再解释这些代码，现在，你只需编译运行你的程序。你应该会看到方块渐渐地加速下坠，直到落到屏幕之外，如下图所示：

2

在刚添加的代码中，出现了一些力学相关的类：

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 作为边界。

编译并运行，你会看到方块在碰到屏幕底部之后，轻轻弹起，并最终静止，如下图所示：

3

这是一个很赞的行为，特别是看到如此少的代码量。

处理碰撞

接下来你要添加一个固定的障碍物，他会跟下落的方块碰撞并相互影响。在 viewDidLoad 中添加方块的代码之后加入以下代码：

  1. UIView* barrier = [[UIView alloc] initWithFrame:CGRectMake(0, 300, 130, 20)];
  2. barrier.backgroundColor = [UIColor redColor];
  3. [self.view addSubview:barrier];

编译并运行应用，你可以看到一个红色的“障碍物”横跨在屏幕中间。但是你会发现他没有起到任何作用，方块直接穿过了障碍物：

4

这显然不是你想要的，这也说明了很重要的一点：力学只影响关联到行为上的视图。

下面是一个简单的示意图：

5

关联 UIDynamicAnimator 到提供坐标系的参考视图，然后添加一个或多个行为来对关联的物体施加作用力。大部分行为可以与多个物体关联，每个物体可以与多个行为关联。上图展示了当前应用中的行为以及他们的关系。

当前代码里的行为都没有涉及到障碍物，因此在力学引擎中，这个障碍物并不存在。

使物体响应碰撞

为了让方块与障碍物碰撞，找到初始化碰撞行为的代码并用下面的代码替代：

  1. _collision = [[UICollisionBehavior alloc] initWithItems:@[square, barrier]];

碰撞实例需要知道它所影响的每一个视图，因此添加障碍物到列表中使得碰撞对障碍物也有作用。

编译并运行应用，两个物体碰撞并相互影响，如下图所示：

6

碰撞行为在每个关联的物体周围形成一个边界，使得这些物体从可以互相穿越的物体变成实体无法穿越。

更新一下前面的示意图，现在碰撞行为与两个视图都关联起来了：

7

但是现在还有一些有出入的地方。我们希望障碍物是不可移动的，但是当前设置下，当两个物体碰撞的时候，障碍物被撞开并且旋转着落向屏幕底部。

更奇怪的是，障碍物从底部弹起后似乎没有趋于静止的意思。这是因为重力没有对障碍物产生影响，这也解释了为什么在方块撞到障碍物之前它没有移动。

你需要另一种解决问题的思路。既然障碍物是不可移动的，那么力学引擎就没有必要知道它的存在。但是如何检测碰撞呢？

不可见的边界和碰撞

把碰撞行为的初始化代码改回原先的样子，使他只知道方块的存在：

  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];

上述代码添加了一个不可见的边界，它正是障碍物的上边界。红色障碍物对用户依然是可见的，但是力学引擎不知道它的存在；相反，添加的边界对于力学引擎是可见的，对于用户是不可见的。当方块下落的时候，看起来与障碍物发生了碰撞，其实它碰到了不可移动的边界。

编译并运行应用，你看到的效果如下图所示：

8

方块现在从障碍物的边界弹起，旋转，然后继续落到屏幕底部直到静止。

到现在为止，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
  3. @property (nonatomic, readwrite) CGPoint center;
  4. @property (nonatomic, readonly) CGRect bounds;
  5. @property (nonatomic, readwrite) CGAffineTransform transform;
  7. @end

UIDynamicItem 协议为力学引擎提供了读写 center 和 transform 属性的权限，使它可以根据内部的计算结果移动物体。同时提供了 bounds 的读权限，用以确定物体的大小，这不但在计算物体边界的时候被用到，同时在物体受力时用于计算物体的质量。

这个协议说明力学引擎与 UIView并不耦合，其实 UIKit 中还有一个类也实现了这个协议 – UICollectionViewLayoutAttributes。所以可以通过力学引擎对 collection views 实现动画效果。

碰撞通知

到现在，你添加了一些视图和行为，然后让力学引擎接手剩下的任务。在接下来的内容中你会看到如何接收物体碰撞时的通知。

打开 ViewController.m 并且实现 UICollisionBehaviorDelegate 协议:

  1. @interface ViewController ()
  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. }];

上述代码会改变碰撞的物体的背景色为黄色，然后渐变回灰色。

编译运行，看一下实际效果：

9

每次方块与边界发生碰撞的时候，它都会闪现黄色。

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，意味着方块在每次弹起的时候速度都会减慢。

编译运行应用，你会发现现在的方块比之前更有弹性，如下：

10

注： 如果你想知道我是如何生成如上图片来展现方块的历史位置，其实相当简单！我给行为的 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;
  5.     UIView* square = [[UIView alloc] initWithFrame:CGRectMake(30, 0, 100, 100)];
  6.     square.backgroundColor = [UIColor grayColor];
  7.     [self.view addSubview:square];
  9.     [_collision addItem:square];
  10.     [_gravity addItem:square];
  12.     UIAttachmentBehavior* attach = [[UIAttachmentBehavior alloc] initWithItem:view
  13. attachedToItem:square];
  14.     [_animator addBehavior:attach];
  15. }

上面的代码检测到方块和障碍物的第一次接触时，创建第二个方块并添加到碰撞和重力行为中。此外，设置了一个吸附行为，实现两个物体之间加入虚拟的弹簧的效果。

编译运行应用，当原有的方块撞到障碍物时，你应该会看到一个新的方块出现，如下：

11

虽然两个方块看起来被连接到一起，但是因为没有在屏幕上画线条或是弹簧，你并不会看到视觉上的联系。

接下来做什么？

现在你应该比较了解 UIKit 力学的核心概念了。

如果你有兴趣学习更多关于 UIKit 力学的内容，可以关注我们的新书 iOS 7 教程集。

来源：raywenderlich