自定義圖層/形狀內的 Swift/ios 波浪填充動畫

Question

我正在嘗試實現類似於下面的 GIF 的填充動畫，但在類似於第二個圖像的非圓形邊界內。 這可以通過一個 UIImage 來完成嗎？

Answer 1

當然，您可以使用 CAShapeLayer 來為繪制形狀的路徑設置動畫。 然后，您將向形狀圖層添加一個遮罩層，將其遮罩為水滴的形狀（這將是水滴形狀的另一個形狀圖層。）

您應該能夠使用單個三次貝塞爾曲線獲得波浪的形狀，其寬度與您要填充的區域的最寬部分一樣寬。 您將創建一個封閉的形狀，即波浪曲線，然后創建一個矩形的側面和底部以創建一個封閉的形狀。

對於波浪動畫，我建議使用一個封閉的 UIBezierPath，它是一個矩形的 3 個邊，然后是一條三次貝塞爾曲線，它的起點和終點在矩形的頂角，中間的兩個控制點分別位於 1/4 和 3 /4 沿 X 維度的矩形。 使這些控制點之一位於框頂線上方，另一個位於頂線下方。 動畫只是切換貝塞爾曲線的 2 個中間控制點的 Y 位置。

這是形狀在 Photoshop 中的樣子：

使貝塞爾曲線路徑比您的水滴形狀更寬，因此不會移動的頂部曲線的末端不在視野范圍內。

您可以將該貝塞爾曲線路徑的 CGPath 安裝到 CAShapeLayer 中。 然后，您將重復的、自動反轉的 CABasicAnimation 添加到形狀圖層，該圖層將交換頂部曲線的兩個中間控制點的 Y 位置，因此波峰和波谷將切換。

接下來，您將創建包含封閉水滴形狀的第二個 CAShapeLayer，並將水滴形狀圖層安裝為波浪圖層上的蒙版。

最后，當您更改滑塊時，您將上下移動整個波形圖層的 Y 位置。