沿貝塞爾曲線路徑的一部分對UIView進行動畫處理

Question

我正在嘗試沿貝塞爾曲線路徑的一部分設置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")

但是，這只會將視圖移動到所需的位置，而不會為其設置動畫。 如何在貝塞爾曲線路徑的一部分上為視圖設置動畫？

謝謝

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設置為零和一個時間偏移。 為什么需要它們？ 我建議僅使用以上代碼中的參數嘗試動畫，然后嘗試從中進行調整。