自定义时序曲线

SwiftUI 可以精细控制动画的运动方式，完全自定义贝塞尔路径，匹配我们想要的加速度或者减速度。

比如，我们创建一条时序曲线，在动画中心部分非常缓慢，但在边缘部分剧烈跳动。

extension Animation {
    static var edgeBounce: Animation {
        Animation.timingCurve(0.7, -0.5, 0.3, 1.5)
    }
    
    static func edgeBounce(duration: TimeInterval = 0.2) -> Animation {
        Animation.timingCurve(0.7, -0.5, 0.3, 1.5, duration: duration)
    }
}

有了这个扩展，我们现在就可以使用自定义时序曲线创建动画，就像使用内置曲线一样：

struct Custom_timing_curves: View {
    @State private var offset = -200.0
    
    var body: some View {
        Text("Hello, World!")
            .offset(y: offset)
            .animation(.edgeBounce(duration: 2).repeatForever(autoreverses: true), value: offset)
            .onTapGesture {
                offset = 200
            }
    }
}

时序曲线的运动效果，如下图所示

贝塞尔曲线的各种 X/Y 值以及运动的效果，可以到 https://cubic-bezier.com 网站进行调整，并查看具体的运动效果。

---

参考 Paul Hudson 《Pro SwiftUI》