iOS UIScrollView 动画的力学原理

最新推荐文章于 2024-09-10 14:18:02 发布

卡卡西Sensei

最新推荐文章于 2024-09-10 14:18:02 发布

阅读量1.9k

点赞数

分类专栏： # UIScrollView 文章标签： UIScrollView UIScrollView原理

原文链接：https://mp.weixin.qq.com/s/5JSiTywD0r3_O7l2OxWZxw

版权

UIScrollView 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

UISpringTimingParameters

译者 | MartinRGB
来源 | MARTIN‘S GRAPHIC NOTES
英文链接 | https://medium.com/@esskeetit/how-uiscrollview-works-e418adc47060#8fc0

Yandex.Metro 在 iOS 跟 Android 端共同使用了用 C++ 编写的 MetroKit 库。其中有一个 SchemeView 用来显示地铁地图。我们在实现这个程序的时候发现我们需要重新实现滚动功能。因此我们采用了 UIScrollView 作为参考，因为我们觉得它的动画表现非常自然和谐。

我们将开发流程分成三块，用来实现 UIScrollView 的三种力学运动行为。第一部分就是衰减。

衰减

第二种就是弹性动画，实现了边缘反弹。

弹性动画

第三种就是橡皮筋效果，实现了边缘外拖动的滚动阻尼。

橡皮筋效果

我将阐述这些动画的力学细节，包括实现他们所用到的数学公式。

测试案例

我们先来看一下用来做测试的 SimpleScrollView，我们将通过这个案例分析 iOS 滚动视图的力学原理、公式，以及改进之处。

跟 UIScrollView 类似，这个自定义类包含 contentView, contentSize 和 contentOffset:

class SimpleScrollView: UIView {
    var contentView: UIView?
    var contentSize: CGSize
    var contentOffset: CGPoint
}

为了手势效果,我们需要处理 UIPanGestureRecognizer 和 handlePanRecognizer 函数。

let panRecognizer = UIPanGestureRecognizer()
 
override init(frame: CGRect) {
    super.init(frame: frame)
    addGestureRecognizer(panRecognizer)
    panRecognizer.addTarget(self, action: #selector(handlePanRecognizer))
}

SimpleScrollView 有两种状态：

. default 无事发生时

. dragging 滚动时

enum State {
    case `default`
    case dragging(initialOffset: CGPoint)
}
 
var state: State = .default

handlePanRecognizer 的实现如下：

@objc func handlePanRecognizer(_ sender: UIPanGestureRecognizer) {
    switch sender.state {
    case .began:
        state = .dragging(initialOffset: contentOffset)
    case .changed:
        let translation = sender.translation(in: self)
        if case .dragging(let initialOffset) = state {
            contentOffset = clampOffset(initialOffset - translation)
        }
    case .ended:
        state = .default
    // Other cases
    }
}

. 当 UIPanGestureRecognizer 进入 .began 状态，我们对 .dragging 状态进行设置

. 当进入 .change 状态，我们计算变化量，并根据滚动视图改变 contentOffset。于此同时，我们调用 clampOffset 函数避免越界。

. 当进入 .ended 状态，我们将 SimpleScrollView 恢复为 .default 状态

我们设置附加属性 contentOffsetBounds ，结合当前的 contentSize 进而定义 contentOffset 的边界。同样起到限制的还有 clampOffset 函数，它也利用边界限制了 contentOffset 。

var contentOffsetBounds: CGRect {
    let width = contentSize.width - bounds.width
    let height = contentSize.height - bounds.height
    return CGRect(x: 0, y: 0, width: width, height: height)
}
 
func clampOffset(_ offset: CGPoint) -> CGPoint {
    return offset.clamped(to: contentOffsetBounds)
}

现在我们完成了 SimpleScrollView 的简单实现。

SimpleScrollView

滚动起了作用，然而没有动画，运动缺乏惯性。随着本文的展开，我们将一点一点添加效果来改进 SimpleScrollView

衰减

我们先从衰减开始。

SDK 中没有提到衰减动画的实现方法。UIScrollView 有一个 DecelerationRate 的属性，可以设置为 .normal 或者 .fast ,你可以用这个属性来调整滚动衰减的速率。文档中提到 DecelerationRate 决定了滚动的衰减率

// A floating-point value that determines the rate of deceleration after the user lifts their finger
var decelerationRate: UIScrollView.DecelerationRate
 
extension UIScrollView.DecelerationRate {
    static let normal: UIScrollView.DecelerationRate // 0.998
    static let fast: UIScrollView.DecelerationRate // 0.99
}

UIScrollView | https://developer.apple.com/documentation/uikit/uiscrollview

而滚动衰减终点的计算公式 —— 当你手指抬起，滚动动画执行完最终停止的衰减动画总变化量，在 WWDC 的 Designing Fluid Interfaces 中有所提及。

// Distance travelled after decelerating to zero velocity at a constant rate.
func project(initialVelocity: Float, decelerationRate: Float) -> Float {
    return (initialVelocity / 1000.0) * decelerationRate / (1.0 - decelerationRate)
}

这个公式只能用来计算变化量，无法用来实现衰减动画，但我们可以用起来作为我们未来公式计算的参考。在上面这段代码中，函数的参数为手势的初始速度和衰减率，通过计算返回了手指抬起滚动停止的滚动变化量。

速度

我们来猜猜 DecelerationRate 的运作机制和含义，文档中是这样描述它的：

当用户抬起手指时，决定衰减率的浮点值。
我们假设，这个比率决定了速度每毫秒的变化量（所有 UIScrollView和速度相关的值都用毫秒表示，UIPanGestureRecognizer则不是如此。

如果手指抬起的瞬间，我们有初速度 v₀，我们选择的衰减率是 DecelerationRate.fast，那么：

. 1 毫秒后速度为 v₀ 的 0.99 倍

. 2 毫秒后速度为 v₀ 的 0.992 倍

. k 秒后速度为 v₀ 的 0. 991000k 倍

衰减运动的速度公式为：

运动方程

速度公式可没有办法实现衰减动画。我们需要找到运动方程：拿到时间决定变化量的方程 x(t)。而速度公式可以帮助我们得到运动方程，我们只需要积分即可：

我们替换速度公式 v(x)，积分得到：

终点变化方程

现在我们可以得出滚动终点总变化量方程，然后跟苹果的公式进行比较。首先我们将 t 设置为无穷大，因为 d 小于 1，因此 d1000t趋于 0 ，我们得到：

现在我们将苹果的公式写成同种形式，进行比较：

两个公式的差异之处：

我们的公式和苹果的公式

然而，如果我们了解自然对数分解成以 1 为邻域的泰勒级数的知识，我们可以发现苹果的公式和我们的公式是近似的。

自然对数 | https://en.wikipedia.org/wiki/Natural_logarithm#Series

如果我们对函数在图形上进行打点绘制，我们可以发现在衰减率接近 1 的时候，图形非常拟合。

我们再会想到苹果的衰减率提供的两个参数都非常接近 1，这意味着苹果的做法是比较正确的。

衰减时间

现在我们只需要获取衰减动画时间就能够构建动画。为了寻找衰减整个过程的变化量，我们之前将时间设置为无穷。但是动画时间不可能是无穷的。

如果我们将运动公式函数通过打点绘制出来，我们发现这个函数是无限趋近于终点 X 的。这个动画从起点开始，很快就运动到终点附近，然后无限趋近于终点，这个趋近过程几乎是不可察觉的。

利用微积分思想，我们可以重塑我们的问题: 我们只需要找到某个时刻 t ，整体运行的变化量足够趋近于最终变化量 X 即可（设误差量为 ε）。按惯例来说，UI 上半像素的误差就不易察觉。

当 T 时刻的变化量和最终变化量的相差绝对值为 ε 时，我们求 T:

我们替换 x 跟 X ，得到时间衰减动画的方程：

现在我们掌握了实现衰减动画的知识，我们将在实现中使用这些公式，改进 SimpleScrollView

衰减实现

我们首先创造一个 DecelerationTimingParameters 结构体，这个结构体包含了衰减动画所需要的信息：

struct DecelerationTimingParameters {
    var initialValue: CGPoint
    var initialVelocity: CGPoint
    var decelerationRate: CGFloat
    var threshold: CGFloat
}

. initialValue 指的是初始的 contentOffset — 抬起手指的位置点。

. initialVelocity 抬起手指的初始速度

. decelerationRate 衰减率

. threshold 确定衰减时间的阈值

根据公式，我们来解出衰减滚动停止的点：

var destination: CGPoint {
    let dCoeff = 1000 * log(decelerationRate)
    return initialValue - initialVelocity / dCoeff
}

求衰减动画时间

var duration: TimeInterval {
    guard initialVelocity.length > 0 else { return 0 }
    
    let dCoeff = 1000 * log(decelerationRate)
    return TimeInterval(log(-dCoeff * threshold / initialVelocity.length) / dCoeff)
}

运动方程：

func value(at time: TimeInterval) -> CGPoint {
    let dCoeff = 1000 * log(decelerationRate)
    return initialValue + (pow(decelerationRate, CGFloat(1000 * time)) - 1) / dCoeff * initialVelocity
}

我们构建一个 TimerAnimation 类，会根据屏幕刷新率每秒执行 60 次回调来做动画（ipad Pro 120 次）:

class TimerAnimation {
    typealias Animations = (_ progress: Double, _ time: TimeInterval) -> Void
    typealias Completion = (_ finished: Bool) -> Void
 
    init(duration: TimeInterval, animations: @escaping Animations,
         completion: Completion? = nil)
}

我们使用 animation block 来让运动方程根据时间改变 contentOffset 。TimerAnimation 的实现参考此仓库

现在我们来改进手势处理函数：

@objc func handlePanRecognizer(_ sender: UIPanGestureRecognizer) {
    switch sender.state {
    case .began:
        state = .dragging(initialOffset: contentOffset)
    case .changed:
        let translation = sender.translation(in: self)
        if case .dragging(let initialOffset) = state {
            contentOffset = clampOffset(initialOffset - translation)
        }
    case .ended:
        state = .default
    // Other cases
    }
}

手指抬起时才执行衰减动画，因此，当切换为T .ended 状态，我们将调用 startDeceleration 函数，将手势的速度传递进去。

@objc func handlePanRecognizer(_ sender: UIPanGestureRecognizer) {
    switch sender.state {
    case .began:
        state = .dragging(initialOffset: contentOffset)
    case .changed:
        let translation = sender.translation(in: self)
        if case .dragging(let initialOffset) = state {
            contentOffset = clampOffset(initialOffset - translation)
        }
    case .ended:
        state = .default
        let velocity = sender.velocity(in: self)
        startDeceleration(withVelocity: -velocity)
 
    // Other cases
    }
}

startDeceleration 的实现：

var contentOffsetAnimation: TimerAnimation?
 
func startDeceleration(withVelocity velocity: CGPoint) {
    let decelerationRate = UIScrollView.DecelerationRate.normal.rawValue
    let threshold = 0.5 / UIScreen.main.scale
 
    let parameters = DecelerationTimingParameters(initialValue: contentOffset,
                                                  initialVelocity: velocity,
                                                  decelerationRate: decelerationRate,
                                                  threshold: threshold)
    
    contentOffsetAnimation = TimerAnimation(
        duration: parameters.duration,
        animations: { [weak self] _, time in
            guard let self = self else { return }
            self.contentOffset = self.clampOffset(parameters.value(at: time))
        })
}

衰减率设置为 DecelerationRate.normal 阈值设置为 0.5

初始化 DecelerationTimingParameters

执行动画，通过 animations block 给运动公式传入动画时间，从而更新视图的contentOffset

结果如下：

衰减

弹性动画

我们用弹性动画来实现边缘的回弹效果。

弹性动画是基于阻尼弹性振荡的原理实现的。所有的弹性动画原理都是想通的，无论是 iOS SDK，Android SDK 还是本文要实现的弹性效果。

弹性动画通常有以下参数p>

. 质量 Mass (m)

. 刚度 Stiffness (k)

. 阻尼 Damping (d)

弹性公式的运动公式如下，也是由上面参数构成：

某些情况下，使用阻尼比 dampingRatio (ζ)，而不是阻尼 damping。他们的关系为下面的公式：

阻尼比

弹性动画中最有意思的参数就是阻尼比，它决定了动画的感受：

阻尼比:0.1 0.5 1.0

阻尼比越接近于 0 ，产生的往复振荡次数越多。越接近于 1 ，往复振荡次数越少。当等于 1 的时候，没有往复运动,仅仅是振幅的衰减变化。

根据阻尼比，阻尼运动分为三种运动类型：

. 0 < ζ < 1 — 欠阻尼，物体会在停止点附近来回周期振荡，阻尼比越接近于 0，振荡次数越多。

. ζ = 1 — 临界阻尼，物体不在终点来回周期振荡，不做周期运动，先短暂增大振幅，然后振荡以指数衰减的形式停止。

. ζ > 1 — 过阻尼，以指数衰减的形式运动到停止点，这种运动很罕见，所以不考虑。

运动方程

运动方程为:

如果想用来描述物体运动，我们需要知道 x(t) 的方程的解来定义运动。我们还需要知道振荡时间，以便动画使用。因为阻尼比不同，方程的解也不同，因此我们需要分开考虑：

欠阻尼

阻尼比小于 1 (欠阻尼），运动方程的解为：

. ω’ — 阻尼自然频率

. β — 附加参数

. C₁ 和 C₂ 系数用来做初始化条件的参数输入：初始位置为 x₀，初始速度为 is v₀:

正弦函数跟余弦函数描述了振荡运动的周期，而指数描述了振荡运动的衰减。

曲线上可以看到运动方程看起来形如正弦函数跟余弦函数所提供的振幅随时间指数衰减。

临界阻尼

现在我们来看一下临界阻尼，运动方程为：

. β — 想同的附加参数;

. C₁ 和 C₂ 系数跟欠阻尼不同，但是他们也是给初始化参数用来提供输入的：

函数曲线图表如下：

终点没有周期往复振荡，仅仅是振幅的指数衰减。

震荡时间

现在我们需要知道振荡时间，跟衰减一样，我们不能给动画使用无限的时间，通过下图我们知道，从某一点开始，振荡幅度和周期不断变小，几乎视觉上不可见：

因此我们还是要设置一个阈值 ε 来确定振荡是否已经足够小了 (例如半个像素)。

欠阻尼系统的时间的解为 (0 < ζ < 1):

临界阻尼系统的时间的解为 (ζ = 1):

综上，我们找到了弹性动画实现的数学公式。

看到这里你会产生疑问：既然 iOS SDK 已经提供了弹性动画的实现，为什么我还要知道弹性动画的原理呢？

因为在我的案例中，没法使用 iOS 的 SDK，因为要跨平台，因此我们要了解弹性动画的原理。但是为什么自定义 SimpleScrollView 需要知道这些呢？为什么 iOS 开发这需要知道这些呢？我们下面来分析以下 iOS SDK 中的弹性动画。

iOS SDK 中的弹性动画分析

iOS SDK 中提供了好几种创建弹性动画的方法，最简单的是 UIView.animate.

UIView.animate

extension UIView {
 
    class func animate(withDuration duration: TimeInterval,
                       delay: TimeInterval,
                       usingSpringWithDamping dampingRatio: CGFloat,
                       initialSpringVelocity velocity: CGFloat,
                       options: UIView.AnimationOptions = [],
                       animations: @escaping () -> Void,
                       completion: ((Bool) -> Void)? = nil)
 
}

UIView.animate 的动画是由 dampingRatio 和 initialSpringVelocity 的参数决定的。但是这个函数的古怪之处在于，我们还需要填一个时间 duration 参数。我们没办法根据 dampingRatio 和 intialSpringVelocity 计算出弹性动画时间，因为我们不知道质量 mass 跟刚度 stiffness，我们也不知道弹性的初始位移。

这个函数主要解决了另外一个问题：我们通过设置阻尼比跟动画时间来决定弹性的动画行为，其余参数在函数的实现中被自动计算出来。

因此, UIView.animate 函数主要用来做给定时间的简单动画，它无需参考坐标系。但这个动画函数无法在滚动视图中使用。

CASpringAnimation

另外一种方式是 CASpringAnimation:

open class CASpringAnimation : CABasicAnimation {
 
    /* The mass of the object attached to the end of the spring. Must be greater
       than 0. Defaults to one. */
    open var mass: CGFloat
    
    /* The spring stiffness coefficient. Must be greater than 0.
     * Defaults to 100. */    
    open var stiffness: CGFloat
 
    
    /* The damping coefficient. Must be greater than or equal to 0.
     * Defaults to 10. */
    open var damping: CGFloat
 
}

想要对 CALayer 的属性进行动画，就必须使用 CASpringAnimation。CASpringAnimation 的参数有质量 mass, 刚度 stiffness 和阻尼 damping，但是没有阻尼比 dampingratio。我们前面说过阻尼比决定了弹性的运动。如果我们不想要回弹振荡，我将其设置为 1 ，如果我们想要强烈的振荡，我们可以将其设置为接近 0.但是 CA 动画没有这个参数。

不过我们之前学了那个转换公式，因此我们可以拓展 CASpringAnimation 类，添加一个结构体来获取阻尼比 damping ratio:

extension CASpringAnimation {
 
    convenience init(mass: CGFloat = 1, stiffness: CGFloat = 100,
                     dampingRatio: CGFloat)
    {
        self.init()
 
        self.mass = mass
        self.stiffness = stiffness
        self.damping = 2 * dampingRatio * sqrt(mass * stiffness)
    }
    
}

与此同时你还需要设置阻尼运动时间，跟 UIView.animate 不同的是 CASpringAnimation 提供了一个 settlingDuration 的属性，能根据 CASpringAnimation 的参数返回一个估算的动画时间:

open class CASpringAnimation : CABasicAnimation {
    
    /* The basic duration of the object. Defaults to 0. */
    var duration: CFTimeInterval { get set }
 
    /* Returns the estimated duration required for the spring system to be
     * considered at rest. The duration is evaluated for the current animation
     * parameters. */    
    open var settlingDuration: CFTimeInterval { get }
 
}

问题在于 settlingDuration 的计算不考虑弹性值的偏移量，也不考虑起点值跟终点值 - fromValue 和 toValue ，你不管怎么设置 fromValue 和 toValue ，settlingDuration 都是一样的。这样设计的目的是为了灵活性，因为 fromValue 和 toValue 可以用来表示任何事情：可以是坐标值，也可以是颜色值 —— 颜色值的偏移量就很难去计算。

当调用 UIView.animate 进行动画时，你可以传入一个动画曲线的参数：例如 .linear, .easeIn, .easeOut, 或 .easeInOut.

这条动画曲线描述了动画进度是如何随时间从 0 到 1 变化的。

WWDC:Advanced Animations with UIKit

在 iOS SDK 中弹性动画的设计也是如此。弹性方程用来表述一个从 0 到 1 变化的动画进度曲线。因此弹性动画值的偏移量始终就是 1，因此 fromValue 和 toValue 的值可以忽略。

WWDC:Advanced Animations with UIKit

UISpringTimingParameters

第三种创建弹性动好的方式，是从 iOS 10 开始的 UISpringTimingParameters。有两种创建 UISpringTimingParameters 的方式:

class UISpringTimingParameters : NSObject, UITimingCurveProvider {
    init(dampingRatio ratio: CGFloat, initialVelocity velocity: CGVector)
    
    init(mass: CGFloat, stiffness: CGFloat, damping: CGFloat,
        initialVelocity velocity: CGVector)
}

最有意思的是，使用的构造方法不同，UISpringTimingParameters 创建出来的动画效果也不同。

如果创建 UISpringTimingParameters 时使用了 mass， stiffness 和 damping 的构造方法，动画时间会被自动计算，我们设置的 duration 被忽略：

let timingParameters = UISpringTimingParameters(mass: 1, stiffness: 100, damping: 10,
                                                initialVelocity: .zero)
 
let animator = UIViewPropertyAnimator(duration: 4, timingParameters: timingParameters)
 
animator.addAnimations { /* animations */ }
animator.startAnimation()
    
print(animator.duration) // 1.4727003346780927

这个设计就很灵活，既然你可以用 animations block 做任何事，这就证明了函数里面动画的偏移量是 0 到 1。但即便你知道了动画的偏移量，知道如何计算动画时间，你也无法自己手动设置。

如果创建 UISpringTimingParameters 时使用了 dampingRatio，那么动画时间就不会被自动计算，你需要设置以下:

let timingParameters = UISpringTimingParameters(dampingRatio: 0.3,
                                                initialVelocity: .zero)
 
let animator = UIViewPropertyAnimator(duration: 4, timingParameters: timingParameters)
 
print(animator.duration) // 4.0

但这个方法在于我们没有足够的信息去计算，跟 UIView.animate 一样，没有质量 mass，没有刚度 stiffness，没有弹性偏移量。

偏移量为零的弹性动画

iOS 弹性动画还有一个常见问题时，没有 0 偏移量的动画 (fromValue == toValue)。因此，你无法快速的实现下面这样的动画：

偏移量为零的弹性动画

即便设置了 initialSpringVelocity，下面的这段代码也不起作用：

UIView.animate(
    withDuration: 5,
    delay: 0,
    usingSpringWithDamping: 0.1,
    initialSpringVelocity: -1000,
    animations: {
       
    })

即便你不断更新 frame ，也不会产生改变:

UIView.animate(
    withDuration: 5,
    delay: 0,
    usingSpringWithDamping: 0.1,
    initialSpringVelocity: -1000,
    animations: {
        self.circle.frame = self.circle.frame
    })

我们后面会看到，为了实现 SimpleScrollView 的回弹效果，你需要实现零偏移量的动画。通过分析 iOS SDK 中弹性动画相关，我们了解到 iOS SDK 的函数不适用于我们的案例，因此我们需要自己实现。

弹性动画实现

为了实现弹性动画，我们使用 SpringTimingParameters 结构体:

struct Spring {
    var mass: CGFloat
    var stiffness: CGFloat
    var dampingRatio: CGFloat
}
 
struct SpringTimingParameters {
    var spring: Spring
    var displacement: CGPoint
    var initialVelocity: CGPoint
    var threshold: CGFloat
}

. spring — 弹性参数;

. displacement - 位移;

. initialVelocity - 初始速度;

. threshold — 用来求动画时间的变化量阈值；

利用公式，我们可以得到动画时间和运动方程 (value:at:):

extension SpringTimingParameters {
    var duration: TimeInterval
    func value(at time: TimeInterval) -> CGPoint
}

橡皮筋效果

现在我们来处理橡皮筋效果。我们前面提到过，这是在边界处拖拽的滚动阻尼效果，而且这个效果不光在滚动中应用，也在我们的缩放手势中😤应用。

因为 iOS 开发文档中没有提到橡皮筋效果是如何实现的。因此我们得靠猜。我们首先根据边界手指拖拽的效果打出 contentOffset 的点生成曲线。然后再思考什么公式比较能近似生成此曲线。

首先，我们试着用弹性公式去套。但是不管怎么尝试，都无法接近图表中的曲线。

最后，我们决定尝试使用简单的多项式拟合曲线。实现方法是选择几个点，然后找出可能曲线上有这几个点的多项式。你可以自己手动计算，也可以去 WolframAlpha 输入这几个点来生成

quadratic fit {0, 0} {500, 205} {1000, 328} {1500, 409}

生成的多项式如下：

多项式曲线和 iOS 的函数曲线非常拟合：

得亏我们知道这个效果的专有名次叫橡皮筋效果，不然我们的研究止步于此。

很快我们就在 twitter 上发现了一个公式：

https://twitter.com/chpwn/status/285540192096497664

. 等式右面的 x 指的是手指的位移量：

. c 是某个比率

. d 指的是滚动视图的尺寸

我们用这个函数构建了一个曲线图表，c 比率使用了 0.55 ，发现曲线契合:

我们再来分析一下这个公式的运作原理，我们来用更清晰的方式写出这个公式：

我们使用不同的 c 比率，选择 812（iPhone X 的高度）作为 d 的值，构建曲线图表：

曲线图表说明 d 影响了橡皮筋效果的刚度：d 越小，橡皮筋效果越硬，就需要更强的拖拽才能驱动内容位移 contentOffset.

从函数我们知道，当 x 趋于无穷时，我们的函数的解无限趋近但小于 d：

这个公式非常方便，因为你可以用 d 来设置最大偏移量。通过这个公式，你可以确保滚动视图的内容永远保留在屏幕上。

橡皮筋效果仅使用了这一个公式，因此让我们来改进我们的 SimpleScrollView 类。

橡皮筋效果实现

我们首先来生命一个 rubberBandClamp 函数，这个函数来源自我们 Twitter 上看到的公式：

func rubberBandClamp(_ x: CGFloat, coeff: CGFloat, dim: CGFloat) -> CGFloat {
    return (1.0 - (1.0 / ((x * coeff / dim) + 1.0))) * dim
}

然后为了方便起见，我们给 rubberBandClamp 函数，添加一个限制 limits :

func rubberBandClamp(_ x: CGFloat, coeff: CGFloat, dim: CGFloat,
                     limits: ClosedRange<CGFloat>) -> CGFloat 
{
    let clampedX = x.clamped(to: limits)
    let diff = abs(x - clampedX)
    let sign: CGFloat = clampedX > x ? -1 : 1
    
    return clampedX + sign * rubberBandClamp(diff, coeff: coeff, dim: dim)
}

函数的运作原理如下：

. 如果 x 在限制 limits 之内，保留 x 原来的值

. 只要 x 在 limits 之外，那么执行 rubberBandClamped

当我们越界拖拽的时候，我们只需要 rubberBandClamp 函数即可。

让我们将此函数拓展为二维，然后创建 RubberBand 结构体:

struct RubberBand {
    var coeff: CGFloat
    var dims: CGSize
    var bounds: CGRect
    
    func clamp(_ point: CGPoint) -> CGPoint {
        let x = rubberBandClamp(point.x, coeff: coeff, dim: dims.width, limits: bounds.minX...bounds.maxX)
        let y = rubberBandClamp(point.y, coeff: coeff, dim: dims.height, limits: bounds.minY...bounds.maxY)
        return CGPoint(x: x, y: y)
    }
}

. 我们用滚动视图的边界作为 bounds 参数 (contentOffset 边界);

. 至于 dimensions — 滚动。视图的尺寸

. clamp 的运作原理如下：当传入的 point 位置点在 bounds 之内的时候，无事发生，如果超出了边界 bounds 的值，那么产生橡皮筋效果。

手势处理函数 handlePanRecognizer 如下：

@objc func handlePanRecognizer(_ sender: UIPanGestureRecognizer) {
    switch sender.state {
    case .began:
        state = .dragging(initialOffset: contentOffset)
    case .changed:
        let translation = sender.translation(in: self)
        if case .dragging(let initialOffset) = state {
            contentOffset = clampOffset(initialOffset - translation)
        }
    case .ended:
        state = .default
        let velocity = sender.velocity(in: self)
        startDeceleration(withVelocity: -velocity)
 
    // Other cases
    }
}

clampOffset 函数如下：

func clampOffset(_ offset: CGPoint) -> CGPoint {
    return offset.clamped(to: contentOffsetBounds)
}

这个函数会对传入的 contentOffset 进行范围限制，对越界的移动产生抵抗力。

为了产生橡皮筋效果，你需要创建 RubberBand 结构，传入滚动视图的尺寸dimensions，滚动视图的偏移量 contentOffset，边界位置 bounds，然后调用 clamp 函数.

func clampOffset(_ offset: CGPoint) -> CGPoint {
    let rubberBand = RubberBand(dims: frame.size, bounds: contentOffsetBounds)
    return rubberBand.clamp(offset)
}

但仅仅这样还不够，之前的滚动回弹动画中，当我们抬起手指的时候，我们先衰减再回弹。但是这个动画中，手势驱动的滚动在内容的边界范围之外。因此在边界范围之外的手势滚动不会触发衰减。因此当越界拖拽之后，视图需要归于原位（也就是最近的边界点），我们需要调用 bounce 函数。

我们在 completeGesture 函数中完成上述的动画逻辑，我们只需要在 handlePanRecognizer 函数中的 .ended 状态中写入我们的逻辑：

case .ended:
    state = .default
    let velocity = sender.velocity(in: self)
    completeGesture(withVelocity: -velocity)
 
// Other cases

这个函数本身非常简单：

func completeGesture(withVelocity velocity: CGPoint) {
    if contentOffsetBounds.contains(contentOffset) {
        startDeceleration(withVelocity: velocity)
    } else {
        bounce(withVelocity: velocity)
    }
}

. 当拖拽滚动视图产生的 contentOffset 在边界之内时，例如，当我们在边界内抬起手指，那么调用 startDeceleration 函数：

. 当我们在边界之外进行拖拽，松手时则调用 bounce 函数，不触发衰减，直接移动到最近的边界点。

视觉效果如下：

我们重修了这三种效果的力学原理，并用原理实现了这三种滚动效果。Yandex.Metro 的 C++ 代码也采用了同样的原理，但是有一些很小但很重要的差异:

⚠️ 在 SimpleScrollView 的案例中，我们对 contentOffset 进行了动画，这是为了展示的简便性。但是更正确的做法是分离各个属性：分开 x， y 以及 scale;

⚠️ 在 SimpleScrollView 的案例中, the bounce 函数被调用了两次，边界内拖拽后松手导致的边缘反弹，以及边界外拖拽松手导致的复位。两个动画的参数完全想通，但我个人建议这两种动画行为采用不同的刚度stiffness参数质量 mass 和阻尼比 damping ratio 也可以分开调节。

案例

实现一整套滚动的需求非常罕见，我们这么做的原因是我们不能用平台的 SDK，这里我来展示一些采用上述函数的案例：

抽屉 - 状态间切换

在 Yandex.Metro 中的上拉抽屉，这种设计模式在一些苹果的应用中也有用到（地图，股市，Find My xxx 等）

这个动画有三种状态：中间态，展开态，收缩态。抽屉不会停在这三种状态之外的状态上。当松开手指的时候，抽屉会滚动到这三个定点中的一个。这里的设计细节在于，当抬起手指的时候，如何判定应该停留在哪个状态的哪个点。

如果按照手指释放的位置跟状态的距离来判定，移动到展开态就很麻烦，因为你需要将手指移动接近屏幕上方的点释放：

定位到最近点

这种实现，用户会感觉抽屉从你手里溜出去了

因此我们需要考虑手势速率。这个算法的实现多种多样，但是最成功的解决方案在 WWDC 的 Designing Fluid Interfaces 中有所展示。采用这个解决方案的思路如下：

. 当手指离开的时候，抽屉的位置和手势的速度是已知的

. 根据上面的两个参数，运用找到抽屉最终会移动到的点的位置。

. 根据这个（符合物理模型、理想的）的点的位置，找到最近的定位点

. 动画滚动到这个定位点。

可以使用衰减动画的公式来寻找定位点。

我们来描述一下这个映射 project 函数，我们传入抽屉的当前位置 (value)，手势初始速度 velocity 以及衰减率 decelerationRate。这个函数会返回一个抽屉理想状态下衰减运动应该移动到的位置的值：

func project(value: CGPoint, velocity: CGPoint, decelerationRate: CGFloat) -> CGPoint {
    return value - velocity / (1000.0 * log(decelerationRate))
}

整个手势的函数如下：

func completeGesture(velocity: CGPoint) {
    let decelerationRate = UIScrollView.DecelerationRate.normal.rawValue
 
    let projection = project(value: self.origin, velocity: velocity,
                             decelerationRate: decelerationRate)
 
    let anchor = nearestAnchor(to: projection)
 
    UIView.animate(withDuration: 0.25) { [weak self] in
       self?.origin = anchor
    }
}

. 首先，选择衰减率为 DecelerationRate.normal;

. 找到理想衰减动画的映射函数的值 projection;

. 寻找最近的定位点 anchor;

. 修改抽屉的动画位置

线性曲线动画

但是这个动画还是不够完美。因为使用了固定的动画时间，动画会看起来不自然，因为这个动画没有考虑到手势的速率，以及手势起点和动画终点的距离。因此需要使用弹性动画：

. 当手指抬起的时候，抽屉位置和手势速度已知

. 传入上述两个参数，得出理想状况下抽屉该衰减移动到的位置。

. 找到和这个位置最近的点：

. 创建弹性动画，移动到该位置点，整个动画偏移量是手势点到终点的距离。

按上面的修改后，completeGesture 函数如下：

func completeGesture(velocity: CGPoint) {
    let decelerationRate = UIScrollView.DecelerationRate.normal.rawValue
    let projection = project(value: self.origin, velocity: velocity,
                             decelerationRate: decelerationRate)
    let anchor = nearestAnchor(to: projection)
    
    let timingParameters = SpringTimingParameters(
        spring: Spring(mass: 1, stiffness: 200, dampingRatio: 1),
        displacement: self.origin - anchor,
        initialVelocity: velocity,
        threshold: 0.5 / UIScreen.main.scale)
    
    originAnimation = TimerAnimation(
        duration: timingParameters.duration,
        animations: { [weak self] _, time in
            self?.origin = anchor + timingParameters.value(at: time)
        })
}

效果如下：

因为阻尼比设置为 1，因此定位点附近的动画不产生周期振荡。如果阻尼比设置为接近于 0，效果如下：

除了一维的变化，这个方法还可以应用到二维的案例中

PiP | Example on GitHub

这是模拟 FaceTime 或 Skype 的画中画的案例，这个算法在 WWDC 中有所阐述。我的这个案例考虑到了动画过渡中手势的作用，修正了状态。

你还可以利用映射方法来实现非同寻常的翻页效果：例如新 App Store 中的下面这个效果

iOS 13 应用商店

这里的翻页效果应用了阻尼振荡。在标准的 UIScrollView 翻页中，所能翻的页面尺寸是一样的，翻页动画行为也不能控制。