前情提要

在上一篇文章（关于知乎的“下一个回答”按钮（一）问题出在哪里？）中我们发现，知乎的“下一个回答”小球按钮拖拽手感极差。

通过慢镜头得知，我们可以拖拽小球，但小球离手之后并没有依照惯性被“扔”出去，而是立即停止了运动。我们的期望是，小球会按照惯性，再往我拖拽的方向前进一段距离。

最后，通过 Spring 动画的方式，我们生成了一个动画曲线，在一个简易的原型中，模拟出了小球在被抛出后的减速过程。

动画与曲线

首先我们对比 Spring 动画、线性动画和淡入淡出：

https://www.zhihu.com/video/1062917706021380096

其中线性动画是最单调无趣的，它的动画曲线（一条笔直的曲线）自始至终毫无波澜：

没有速度变化的动画，对用户而言，每一秒（本文应该精确到毫秒才对）都是煎熬。

相比之下，淡入淡出要有趣得多了。淡入淡出的过程可以描述为：速度为 0 - 加速 - 匀速 - 减速 - 速度为 0。我们可以观察它的曲线：

通过虚线，曲线和两个蓝色的点连接在一起，通过改变这两个蓝色的控制点的位置，我们可以改变曲线的形状。如果把控制点分别拖到左下角和右上角，动画就变成了线性。

通过拖拽这两个控制点，甚至加入更多的控制点，我们可以制造任意形状的曲线。不光可以淡入或者淡出，还可以控制加速、减速的快慢，还可以让动画倒放。

通过仔细的调校，我们甚至……甚至可以模拟出物体运动的真实的物理效果！但调参是缓慢而痛苦的过程，幸好已经有人替我们调好了，那就是 Spring 动画。

上面的视频中的红色小圆，它的「去」和「来」的动画分别用了不同的 Spring 参数：

较小的摩擦力带来了更快的速度，甚至有回弹的效果。

为什么选择 Spring？

在上面的例子中，Spring 动画具有非常快的启动速度。现在已经 2018 年了，花里胡哨的动画只会显得很土，所有的视觉元素都应当为你的内容服务，简单、高效。

除此之外，如果对比 Spring 动画的曲线与其他动画的曲线，你会发现 Spring 的曲线是没有尽头的：

通过结尾处平滑的曲线，过渡到最终的无尽的直线，比如我又用 Spring 做了这个示例：

https://www.zhihu.com/video/1062913756752928768

平滑的过渡带给 Spring 动画完美、自然的收尾，你看不出动画具体是在哪一瞬间结束的，这就是 Spring 动画的「连贯性」。

你应该用「连贯性」来指导你的一切视觉设计，具备这种性质的视觉元素，可以在不同的 App 中反复使用，不用担心会带来什么不协调感。

一些简单的计算

该写点代码了。

其实我早就写好了，在这里：Zhihu Floating Next - GitHub Repository

我们首先要做的是：根据小球脱手时的速度，与小球运动时收到的摩擦力，计算出小球将会发生的位移。

所以问题就来了：第一，速度和摩擦力是多少；第二，怎么根据速度和摩擦力求出位移。

速度是已知的，因为 App 由你控制，你只要测量出用户的手指在离开屏幕时的速度就行……测量听着好像很麻烦，实际上 iOS 已经内置这个方法啦。

手机屏幕是个二维空间，速度是一个向量。如果你还记得初中物理的内容，二维空间中的向量，可以分解为一个 x 轴上的标量和一个 y 轴上的标量。所以速度是用 (x, y) 的向量形式表示的。

然后摩擦力是多少呢？摩擦力多大就由你来决定了。你的 App 是木头做的，黄油做的，还是像知乎一样是砂纸做的？

虽然说是由开发者自己决定，但选择怎样的值可以让用户感觉生动自然呢？总之砂纸是不行的，我们有知乎前车之鉴。好在 iOS 为我们提供了一个大家都习惯的取值，这个值来自 UIScrollView，来自你手机的「设置」、「通讯录」等一切可以滚动的视图。

手指划过屏幕，列表开始滚动，然后渐渐减速，直到停止。这是个广大人民群众喜闻乐见的减速效果，是苹果多年来为我们培养好的用户习惯，而我们只要拿来用就完事儿了。

最后就是位移的计算，直接先看代码：

let decelerationRate = UIScrollView.DecelerationRate.normal.rawValue
let projection = (x: x + (velocity.x / 1000.0) * decelerationRate / (1.0 - decelerationRate),y: y + (velocity.y / 1000.0) * decelerationRate / (1.0 - decelerationRate)
)

第一行代码我们取得了 iOS 为我们提供的减速率，可以认为就是我们要的「摩擦力」，这个 decelerationRate 的值是 0.998。

之后的几行，我们通过苹果提供的公式计算出了 x 轴上的位移和 y 轴上的位移：

将位移加到原坐标点上，计算出了最终的坐标。

代码实现动画

知道了小球的目标坐标，我们就可以用动画来移动它了：

let parameters = UISpringTimingParameters(dampingRatio: 0.98)
let animator = UIViewPropertyAnimator(duration: 1, timingParameters: parameters)
animator.addAnimations(animation)

iOS 提供了很多种实现 Spring 动画的方式，上面代码用的是其中比较简单的一种。

dampingRatio 取值范围是 [0.0, 1.0]，值越小，小球就越容易跑过头，然后在终点处来回弹跳。一般情况下选把值设置为 1.0 或者接近 1.0 就行，避免不必要的动画干扰用户。

然后我们启动这个 animator：

animator.startAnimation()

除了减速之外，我还给小球的活动空间做了个小限制，距离顶部和底部 120 点，距离屏幕两侧 42 点。也加上了知乎原有的、让小球吸附在屏幕左右两侧的功能。

具体细节可以代码：Zhihu Floating Next - GitHub Repository。或者我再写一篇文章？大家觉得有必要吗，欢迎你在评论区留言。

总之最后的效果是这样：

https://www.zhihu.com/video/1062913870171103232