我使用下面的代码为我的动画:
let animation = CABasicAnimation()
animation.keyPath = "position.x"
animation.fromValue = 0
animation.toValue = 300
animation.timingFunction = .init(name: .easeInEaseOut)
animation.duration = 2
nsView.layer?.add(animation, forKey: "basic")
如果您查看2秒内看到的代码,我们将从0更改为300,我希望访问中间的计算值,如:0.0, 0.2, 0.3, ..., 300.0
与CABasicAnimation一起使用,那么我该如何执行此操作?
1条答案
按热度按时间eit6fx6z1#
对于正在进行的动画,您可以通过访问您正在制作动画的属性来获取它在
presentation()
层中的进度。如果您想要动画的每一帧,您可以连接CVDisplayLink
(适用于macOS)或CADisplayLink
(适用于iOS)。示例代码:
也就是说,
CAMediaTimingFunction
s只是三次Bezier曲线,因此可以在不运行动画的情况下计算动画进度。正如你在维基百科页面上看到的,曲线是由四个控制点参数化定义的,我们可以使用getControlPoint
获得这些控制点。之后,我们可以得到曲线的y坐标方程,用参数t表示,但是t不是时间,曲线的x坐标是动画的时间,所以我们需要用x坐标来表示t,我们已经可以用三次方程,用控制点来表示x(见维基百科上的方程),所以我们只需要解方程。这向你展示了从哪里开始。
最后,我们只需要代入x,也就是时间,得到参数t,然后代入y坐标方程。
我们可以这样写一个函数:
注意,我使用了this gist中的三次解算器,它计算所有的根,请随意使用另一个更快的算法。
default
定时函数的用法示例:在图形上绘制结果如下所示:
这与
default
文档中显示的图形非常相似。要将此应用于特定的动画,只需线性缩放函数的时间和输出。例如,对于持续时间为2且动画在0到300之间的动画: