帶圓點的動畫線圖

Question

我偶然發現了一個有趣的問題，我不知道如何解決它。我有一個線圖，數據點用圓點標記。此刻，我爲線條本身創建了一個CAShapeLayer，並且還爲每個點創建了CAShapeLayer。

該行正在使用strokeEnd動畫關鍵路徑進行動畫。它正在工作。然而，稍微負面的影響是，一旦我打開圖形，我就會看到所有已經繪製的數據點，然後通過它們對線條進行動畫處理。

理想情況下，我想以這樣的方式改變這種行爲，即在開始時什麼都沒有顯示，並且隨着線條獲得動畫數據點，一旦線條穿過它們，就會繪製數據點。

我一直在想這個問題一段時間了，我找不到解決這個問題的優雅方法。在我看來，應該有一個相當簡單的方法來實現我想要的。也許我應該創建一個複合路徑（但是，我該如何指定一條線需要被描邊，而點需要被填充？）。

任何人都可以請指導我在正確的方向嗎？

Answer 1

有很多方法可以解決這個問題。

假設圖形的X增量是恆定的，而且您正在使用線性定時，則可以簡單地將總動畫時間除以數據點的數量，然後計算需要添加點的時間當該行進入該X位置時的圖形。只需在適當的時間間隔將點形狀圖層添加到父視圖的圖層中即可。

您也可以更改繪圖方法，將圖形路徑添加到您的圖形路徑中，一次一個，一個定時器，並同時添加點形狀。這會給你一個循序漸進的動畫，而不是一個平滑的線條畫。