SwiftUI Animation 的时序曲线创建

Question

连同预定义的动画曲线，这些是使用timingcurve( : : : :duration:)设置时序曲线的选项。它的参数 ( c0x, c0y, c1x, c1y)的含义是什么？曲线是如何建立的？缺乏文档。

Answer 1

我只是根据我们得到的信息尽可能多地猜测。

从文档...

static func timingCurve(_ c0x: Double, _ c0y: Double, _ c1x: Double, _ c1y: Double, duration: Double = 0.35) -> Animation

看起来这四个数字实际上是一对 x, y 坐标。

c0 = (c0x, c0y)
c1 = (c1x, c1y)

我们也知道这将生成一条缓动曲线，该曲线将从时间 0、动画 %age 0 开始并在时间 1、动画 %age 100 结束。

所以......我猜这些参数是三次贝塞尔曲线的控制点。

我们将有四个控制点。

1. 起点 (0, 0)
2. 第一个参数 c0
3. 第二个参数c1
4. 终点 (1, 1)

因此，您需要提供控制点来生成三次曲线，以描述您想要使用的时序曲线。

您可以使用此网站https://cubic-bezier.com/#.17,.67,.82,.38来查看这些属性如何改变曲线。

作为一个基本示例，像“缓入缓出”这样持续时间为 1 秒的时序曲线将使用诸如...

timingCurve(0.42, 0, 0.58, 1, duration: 1.0)

希望有帮助。