任何繪製路徑動畫的技巧？

Question

有沒有使用石英模擬手寫的方法？

我的意思是點A之間的路徑，B和C. 我想路出來點A和動畫去到B點，然後C.

想到什麼是兩種選擇做到這一點：

1. 醜 - 創建路徑，然後掩蓋它並移動面具以顯示路徑。 花費大量的時間來創建和不可靠和醜陋的黑客

2. 移動點A，B，C和他們之間畫線。

3. 某種方式可以沿着離開小徑的路徑爲圓圈設置動畫效果嗎？

任何技術，例子？

謝謝。

Answer 1

正如在上面的評論中提到的，一個理想的API可以讓你沿着路徑繪製任意的段，但是我沒有看到任何這樣的API。

另一種方法是定義你的路徑是謹慎的段。然後使用NSBezierPath的元素方法沿着路徑走，並沿着定時器或使用NSAnimation繪製每個段。這種方法的問題是不允許你使用任何任意路徑。

Answer 2

製作一個CAShapeLayer，然後動畫它的path。

Answer 3

貝塞爾曲線定義了一種基於通常稱爲t的無關參數來獲取一組點的方法。要渲染完整曲線，可以評估0到1之間的t，並從每個點到下一個點繪製一條線。要渲染小於完整曲線，可以將t從0評估爲小於1的數字。要繪製曲線的動畫效果，您可以評估點並在定時器上繪製線段。

您可以在任意t處分割貝塞爾曲線。這樣做將允許您將曲線傳遞給系統以繪製或在CAShapeLayer中使用。

手寫字母通常是一系列貝塞爾曲線或貝塞爾樣條曲線。一條曲線的終點是下一條曲線的起點。將t看作從零到樣條線中的分段數量。如果有3條曲線，則將t看作從0到3。當t在1和2之間時，將第一個段和第二個段的一部分傳遞給系統進行繪製。

你可以閱讀約DeCasteljau's algorithm分裂bezier曲線。下面是在一個平面上三次Bezier曲線代碼示例：

// initial curve is four point x0,y0 , x1,y1 , x2,y2 , x3,y3 
// x0,y0 and x3,y3 are the anchors 
// point to split curve at is 0<t<1 

nt = 1.0 - t; 
x01 = nt * x0 + t * x1; 
y01 = nt * y0 + t * y1; 
x12 = nt * x1 + t * x2; 
y12 = nt * y1 + t * y2; 
x23 = nt * x2 + t * x3; 
y23 = nt * y2 + t * y3; 
x012 = nt * x01 + t * x12; 
y012 = nt * y01 + t * y12; 
x123 = nt * x12 + t * x23; 
y123 = nt * y12 + t * y23; 
x= nt * x012 + t * x123; 
y= nt * y012 + t * y123; 

// now the new curve you want is 
// x0,y0 , x01,y01 , x012,y012 , x0123,y

// the other half of the curve, discarded in your case, is 
// x0123,y, x123,y123 , x23,y23 , x3,y3 

因此，考慮一系列描述你的手寫文字的曲線，你會從0到動畫T，其中T是曲線的數量。計算t = T-floor（T），當t不爲零時，用它在n = floor（T）處分割曲線。