我在iOS中很好地CALayer
沿着(QuadCurve)制作动画。CGPath
但我想使用比Apple提供的少数几个更有趣的缓动功能(EaseIn/EaseOut 等)。例如,反弹或弹性功能。
这些事情可以用 MediaTimingFunction (bezier) 来完成:
但我想创建更复杂的计时功能。问题是媒体时间似乎需要三次贝塞尔曲线,它不足以产生这些效果:
创建上述代码的代码在其他框架中很简单,这使得这非常令人沮丧。请注意,这些曲线将输入时间映射到输出时间(Tt 曲线),而不是时间-位置曲线。例如,easeOutBounce(T) = t返回一个新的t。然后t用于绘制运动(或我们应该设置动画的任何属性)。
所以,我想创建一个复杂的自定义CAMediaTimingFunction
,但我不知道如何做到这一点,或者是否有可能?有没有其他选择?
编辑:
这是步骤中的具体示例。很有教育意义:)
我想沿从点a到b的直线为对象设置动画,但我希望它使用上面的 easeOutBounce 曲线沿直线“反弹”其运动。这意味着它将遵循从a到b的确切线,但将以比使用当前基于贝塞尔曲线的 CAMediaTimingFunction 更复杂的方式加速和减速。
让那条线以 CGPath 指定的任意曲线移动。它仍应沿该曲线移动,但应以与直线示例相同的方式加速和减速。
理论上我认为它应该像这样工作:
让我们将运动曲线描述为关键帧动画move(t) = p,其中t是时间 [0..1],p是在时间t计算的位置。所以move(0)返回曲线起点的位置,move(0.5)精确的中间位置,move(1)终点。使用计时函数time(T) = t提供移动的t值应该给我我想要的。对于弹跳效果,计时函数应为time(0.8)和time(0.8)返回相同的t值(只是一个例子)。只需更换定时功能即可获得不同的效果。
(是的,可以通过创建和连接四个来回的线段来进行线反弹,但这不是必需的。毕竟,它只是一个简单的线性函数,将时间值映射到位置。)
我希望我在这里有意义。