ChatHeads 是 Facebook.app 6.0 版中的一个新功能，当有人给您发消息时，在 iOS 应用中会出现小气泡。这是一个很棒的功能，并且使用了非常酷的动画。

该项目尝试重新实现此功能，并了解动画是如何完成的。我不会完全支持此项目来实现 ChatHeads 的所有功能。它应该仅说明 ChatHeads 的部分是如何实现的。

构建项目

在构建项目之前，不要忘记运行 git submodule update --init。我在上次更新中添加了 SKBounceAnimation 和 CAAnimationBlocks。

设计

Facebook.app 中的 ChatHeads 是显示好友头像的小气泡。它们可以被拖拽，并且在释放时会吸附到屏幕的左侧或右侧边缘。如果按住 ChatHeads 气泡，则会显示对话视图，并且气泡排列在屏幕顶部。

该项目的目标是实现与 ChatHeads 气泡的交互（拖拽和释放，按下）以及动画。

交互概念

ChatHeads 气泡总是吸附到屏幕的左侧或右侧边缘。它们的一部分移动到屏幕外，以避免占用太多空间。气泡可以绕屏幕拖拽，并在释放时会根据位置自动吸附到屏幕边缘。

所有动画都添加了漂亮的弹跳效果，使其感觉更自然。例如，当在屏幕中央释放 ChatHeads 时，气泡会吸附到边缘并来回弹跳。

动画弹跳取决于速度，因此当气泡移动很快时，它们也会弹跳得更多。

动画

我已经尝试实现所有动画，使之与 Facebook.app 中的动画感觉一致。有一些小的动画最初被我忽略了。以下是一些更详细的解释。

触摸和拖拽

触摸泡泡时，它将缩小以产生深邃的触感。释放或拖动泡泡后，它会再次放大，并伴随着可爱的弹跳动画。

视频

拖放

泡泡可以在屏幕上任何地方拖动，而不会阻止底层的用户界面。释放泡泡后，它会移动到预设的位置。动画结束时，会有轻微的弹跳效果。弹跳效果的强度取决于释放位置和目标位置之间的距离。

视频

按下

如果按下泡泡（触摸但未移动），它会移动到屏幕顶部，并在其下方出现一个新视图。Facebook在这个视图中展示了对话历史。这个弹出视图也和其他动画一样，也采用了相同的弹跳效果。

视频

实现

类

主要两个类是 CHDraggableView 和 CHDraggingCoordinator。 CHDraggableView 可以拖动，且可以包含任意视图。在这个项目中， CHAvatarView 代表了添加到 CHDraggableView 的 ChatHead 泡泡。 CHDraggingCoordinator 是 CHDraggableView 的代理，负责确定视图应该停靠的位置。泡泡的动画在 CHDraggableView 中完成。

动画

弹跳效果是动态根据释放位置和目标位置之间的距离计算的。 为了得到弹跳的强度，我计算了起点和终点之间的 `distance` 和 `angle`。`bounceDistance` 是 `distance` 的 4%。 基于角度，我计算出 `deltaX = sin(angle) * bounceDistance` 和 `deltaY = cos(angle) * bounceDistance`。

泡泡首先被动画到弹跳位置，然后到终点。

更新 2013-04-24 现在的弹跳动画是基于弹簧质量阻尼系统。感谢 Joe Ricioppo 的建议。

Soroush Khanlou 有篇文章在这里解释了弹簧质量阻尼的数学原理，并在另一篇文章中基于这些原理实现了 Objective-C 中的弹跳动画，名为 SKBounceAnimation。这个库根据以下公式计算弹跳动画的值。

使用这个公式和正确的 omega (0.06) 和 alpha (0.04) 值，一个简单的 1d 动画可以从 x = 300 到 x = 100 同时发生变化。

这是做弹跳动画的更好方法。

头像绘制

泡泡的绘制是在 CHAvatarView 中通过使用图片，并添加黑色下拉阴影和白色内阴影来完成的。