Ich habe einen SVG-Pfad wie folgt:
%Vor% Ich kann den Pfad rendern, aber ich finde keinen Weg, den Pfad zu animieren, so dass es so aussieht, als wäre es "draw", als ob mit Bleistift. Der Knoten animate funktioniert für einzelne Coords, nicht jedoch für Pfade.
Ich werde schließlich diese Animation in einer iPhone App entweder mit einem Parser oder mit einem UIWebView verwenden.
Versuchen Sie, "stroke-dashoffset" zu animieren (beachten Sie, dass Sie ein passendes 'stroke-dasharray' mit ihm), siehe dieses Beispiel . Die Länge des Pfades, der berechnet werden muss, um dies erfolgreich verwenden zu können, kann über ein Skript wie folgt abgerufen werden:
%Vor%Sehen Sie sich die Quelle im Beispiel an, um zu sehen, wie es geht.
Ich habe lange versucht, dies zu tun, ohne zusätzliche Skripte zum Header hinzufügen zu müssen (ich habe keine Ahnung, dass Javascript nicht geholfen hat), also hier ist die Lösung:
%Vor%Ich habe hier zusätzliche Zeilenumbrüche zur besseren Lesbarkeit hinzugefügt.
Dies ist legal in SVG (obwohl nicht in HTML), weil svg:animate element erlaubt onload , was die meisten HTML-Elemente nicht tun.
Nachdem Sie Ihren SVG-Pfad gerendert haben, damit er so aussieht, als würde er mit einem Bleistift gezeichnet, können Sie einfach alles mit einer undurchsichtigen Ebene überdecken und dann die Bewegung dieser Ebene entlang des Pfades animieren.
Um die CGPath zu finden, entlang der Sie die Ebene verschieben, können Sie diese Bibliothek verwenden:
Ссылка
Dadurch werden die SVG-Daten in einem UIBezierPath analysiert. Dann:
%Vor%
