沿着贝塞尔曲线的一部分为UIView制作动画

Question

我正在尝试沿着bezier路径的一部分动画UIView.我发现了一种使用此代码将视图移动到路径的任何部分的方法:

let animation = CAKeyframeAnimation(keyPath: "position")

animation.path = trackPath.cgPath

animation.rotationMode = kCAAnimationRotateAuto
animation.speed = 0
animation.timeOffset = offset
animation.duration = 1
animation.calculationMode = kCAAnimationPaced
square.layer.add(animation, forKey: "animate position along path")

但是,这只会将视图移动到所需的点,并且不会为其设置动画.如何在Bezier路径的一部分上为视图设置动画？

谢谢

Answer 1

您可以通过修改"完整"动画的时间和包装它的动画组来完成此操作.

为了说明这种动画的定时如何工作,想象 - 而不是沿着路径动画一个位置 - 一个颜色被动画化.然后,从一种颜色到另一种颜色的完整动画可以这样说明,其中右边的值是在稍后的时间 - 所以最左边是起始值,最右边是结束值:

请注意,此动画的"时间"是线性的.这是故意的,因为最终结果的"时间"将在稍后配置.

在这个动画中,想象一下我们只想动画中间三分之一,动画的这一部分:

只有几个步骤可以动画动画的这一部分.

首先,将"完整"动画配置为具有线性定时(或者沿着路径动画;具有节奏计算模式)并具有"完整"持续时间.

例如:如果您要为动画的三分之一设置动画,需要花费1秒钟,请将完整动画配置为3秒.

let relativeStart = 1.0/3.0
let relativeEnd   = 2.0/3.0

let duration      = 1.0
let innerDuration = duration / (relativeEnd - relativeStart) // 3 seconds

// configure the "complete" animation
animation.duration = innerDuration

这意味着当前动画如下所示(完整动画):

接下来,为了使动画"开始"进入完整动画的三分之一,我们将其时间"偏移"持续时间的三分之一:

animation.timeOffset = relativeStart * innerDuration

现在,动画如下所示,从其结束值到其起始值的偏移和包装:

接下来,为了仅显示此动画的一部分,我们创建一个具有所需持续时间的动画组,并仅向其添加"完整"动画.

let group = CAAnimationGroup()
group.animations = [animation]
group.duration = duration

即使该组包含3秒长的动画,它也会在1秒后结束,这意味着永远不会显示2秒的偏移"完成"动画.

现在,组动画就像这样说明,在"完整"动画的三分之一后结束:

如果仔细观察,你会发现这个(未淡出的部分)是"完整"动画的中间三分之一.

现在该组在所需值之间设置动画动画,可以进一步配置它(组),然后将其添加到图层.例如,如果您希望此"部分"动画反转,重复并具有时序曲线,则可以在组上配置这些内容:

group.repeatCount = HUGE
group.autoreverses = true
group.timingFunction = CAMediaTimingFunction(name: "easeInEaseOut")

使用此附加配置,动画组将如下所示:

作为一个更具体的例子,这是我使用这种技术创建的动画(实际上所有代码都来自该示例),它像钟摆一样来回移动图层.在这种情况下,"完整"动画是沿着完整圆的路径的"位置"动画

Answer 2

我前几天做了一个类似的动画：

// I want the animation to go along the circular path of the oval shape
let flightAnimation = CAKeyframeAnimation(keyPath: "position")
flightAnimation.path = ovalShapeLayer.path
// I set this one to make the animation go smoothly along the path
flightAnimation.calculationMode = kCAAnimationPaced
flightAnimation.duration = 1.5
flightAnimation.rotationMode = kCAAnimationRotateAuto
airplaneLayer.add(flightAnimation, forKey: nil)

我看到您设置speed为零和时间偏移。你为什么需要它们？我建议仅使用上述代码中的参数来尝试动画，然后尝试从中进行调整。