移動尾巴動畫

Question

我想用移動的線條製作一個動畫，類似於尾巴的狗。

我不知道如何開始。我之前使用Core Animation的CAShapeLayer作爲進度條，但不知道它是否適用於此。過去，我還使用PaintCode來幫助定製路徑，例如爲要創建對象的自定義UIBezierPath進行動畫處理。但也不確定PaintCode是否會對此有所幫助。

任何想法？

Answer 1

這不會是那麼難。是的，使用動畫將是一條可行的路線。

我會使圖像的非變化部分成位圖，然後繪製在上面的形狀圖層的動畫。

與形狀圖層動畫的技巧是，你需要使用的形狀有相同數量的控制點動畫的所有部分。

在你的尾巴動畫的情況下，你應該能夠把它繪製出一組二次貝塞爾曲線。您可能可以將尾巴畫成帶有圓形端蓋的單一厚路徑。 （kCGLineCapRound）。您將使起始曲線成爲二次貝塞爾曲線，起點位於尾部直線部分的起點下方，下一個控制點稍微靠右，位於曲線尖端下方，下一個控制點位於上方和左方第一個控制點的位置，但仍然位於尖端的右側，尖端的最後一個控制點。

結束曲線將有第一個控制點位於尾部的相同位置，第二個控制點位於曲線頂部左側，曲線上方的下一個控制點以及大約2/3在基點和尖端之間的方式，以及在尾部尖端的最後一點。

您可能想要使用Adobe Photoshop（或GIMP）中的路徑工具進行操作，並使用它來使用單個二次貝塞爾曲線創建開始和結束尾部曲線形狀，然後記下您使用的控制點位置以及將它們輸入到您的代碼中。

您會創建CAShapeLayer的CABasicAnimation，其中您將fromValue設置爲起始CGPath，將toValue設置爲結束CGPath。只要確保開始和結束路徑具有相同數量的控制點。

我有一個在Github上稱爲RandomBlobs（鏈接）項目，該項目顯示瞭如何動畫使用CGPath S和CABasicAnimation秒的曲線，但它是用Objective-C，而不是使用二次貝塞爾曲線，它創造了另一種稱爲Catmull-Rom樣條曲線。二次Bezier曲線實際上更加簡單設置比噓聲-ROM樣條然而，後面使用CABasicAnimation應該很容易從Objective-C的斯威夫特翻譯，如果你已經有CAShapelayer年代以前工作過動畫變爲CAShapeLayer的想法。您也可以使用一系列Catmull-Rom樣條曲線獲取您之後的尾部動畫。 Catmull-Rom樣條曲線的優點是所有的控制點都在曲線上。