Beliebige Techniken zum Zeichnen von Pfad animiert?

Question

Gibt es eine Möglichkeit, Handschrift mit Quarz zu simulieren?

Ich meine, es ist ein Weg zwischen Punkten A, B und C. Ich will Weg aus Punkt A kommen und animiert gehen zu Punkt B und dann C.

Was in den Sinn kommt, ist zwei Optionen do it:

1. Hässlich- Erstellen Sie den Pfad, dann maskieren Sie ihn und bewegen Sie die Maske herum, um einen Pfad anzuzeigen. Nimmt viel Zeit zu erstellen und unzuverlässig und hässlich hacken

2. Verschieben Sie Punkte A, B, C und zeichnen Sie Linie zwischen ihnen.

3. Eine Möglichkeit, einen Kreis entlang eines Pfades zu animieren, der den Pfad verlässt?

Alle Techniken, Beispiele?

Danke.

Answer 1

Wie im obigen Kommentar erwähnt, wäre eine ideale API eine API, mit der Sie beliebige Segmente entlang des Pfads zeichnen können, aber ich habe keine solche API gesehen.

Ein anderer Ansatz wäre es, Ihren Weg zu diskreten Segmenten zu definieren. Verwenden Sie dann die Elementmethoden von NSBezierPath, um entlang des Pfads zu gehen und jedes Segment entlang eines Timers oder mithilfe von NSAnimation zu zeichnen. Das Problem bei diesem Ansatz besteht darin, dass Sie keinen beliebigen Pfad verwenden können.

Answer 2

Machen Sie eine CAShapeLayer und animieren Sie dann ihre path.

Answer 3

Eine Bezier-Kurve definiert einen Weg, um eine Menge von Punkten basierend auf einem nicht verwandten Parameter zu erhalten, der normalerweise t genannt wird. Um die volle Kurve darzustellen, werten Sie t zwischen 0 und 1 aus und zeichnen eine Linie von jedem Punkt zum nächsten. Um weniger als die volle Kurve zu rendern, berechnen Sie t von 0 bis zu einer Zahl kleiner als eins. Um das Zeichnen der Kurve zu animieren, können Sie die Punkte auswerten und die Segmente auf einem Zeitgeber zeichnen.

Sie können eine Bezier-Kurve auf ein beliebiges t aufteilen. Dadurch können Sie die Kurve an das zu übergebende System übergeben oder in einem CAShapeLayer verwenden.

Ein handgeschriebener Brief besteht normalerweise aus einer Reihe von Bezier-Kurven oder einem Bezier-Spline. Der Endpunkt einer Kurve ist der Startpunkt der nächsten. Stellen Sie sich t von Null bis zur Anzahl der Segmente im Spline vor. Wenn es 3 Kurven gibt, denke an t von 0 auf 3. Wenn t zwischen 1 und 2 ist, würdest du das ganze erste Segment und einen Teil des zweiten Segments an das System übergeben, um zu zeichnen.

Sie können über DeCasteljau's algorithm zum Aufteilen von Bezier-Kurven lesen. Hier ist ein Codebeispiel für eine kubische Bezier-Kurve auf einer Ebene:

// 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 

So eine Reihe von Kurven gegeben, das Ihre handgeschriebenen Zeichen beschreiben, würden Sie von 0 bis T animieren, wobei T die Anzahl der Kurven ist. Berechne t = T-Boden (T) und wenn t nicht Null ist, nutze es, um die Kurve bei n = Boden (T) aufzuteilen.