Wie wollen Sie animieren, einen SVG-Pfad in IOS?

Habe ich eine SVG-Pfad wie in diesem Beispiel:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1"  baseProfile="full"> 
    <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" />
</svg>

Ich machen kann das Weg, aber kann nicht scheinen zu finden ein Weg, um den Pfad zu animieren, so dass es aussieht wie es ist "seins ziehen", als ob mit Bleistift. Die animate Knoten funktioniert für Einzel-Koords, aber nicht für Wege.

Ich schließlich mit dieser animation in einer iPhone-app entweder mit einem parser oder mit einem UIWebView.

InformationsquelleAutor Julian | 2011-05-07
  1. 8

    Versuchen zu animieren, die 'stroke-dashoffset' (beachten Sie, dass benötigen Sie einen passenden 'stroke-dasharray' mit ihm), siehe dieses Beispiel. Die Länge des Weges, muss berechnet werden, damit diese erfolgreich abgerufen werden können über ein Skript wie:

    var pathlength = yourPathElm.getTotalLength()

    Anzeigen der Quelle auf der Beispiel, um zu sehen, wie es gemacht wird.

    • Sehr schönes Beispiel, danke! Ich arbeite schon über Ihrem Beispiel isoliert nur die Elemente, die für nur einen Strich. Ich bin fast da, außer dass ich kann nicht herausfinden, ein paar Dinge: 1) Warum ist es, dass, wenn ich entfernen Sie die translate von Ihrem <g> Knoten kann ich nichts sehen? 2) Warum hast du wiederholen, 54 zweimal in der style-Deklaration für stroke-dasharray?
    • 1) weil der Pfad definiert ist, die mit diesem offset (schnelle inkscape-hack). Konnte Sie wandeln auf den Pfad " d "- Attribut und entfernen Sie Sie aus dem " g " - element. 2) nur weil ich denke, es ist mehr klar, es ist im Wechsel zwischen dash Länge und Abstand der Länge, aber es ist in der Tat möglich, nur geben Sie eine einzelne Zahl, wenn Sie gleich sind (der browser erweitern Sie eine gerade Anzahl von Strichen/Lücken) siehe w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty
    • Ausgezeichnet! Vielen, vielen Dank!
    • Ich wundere mich, ich habe bewegt sich in meinen Weg, die reset den Strich streicheln. Gibt es einen Weg, Sie zu umgehen, das? (stretchsketch.com/animate.svg)
    • begin="rect.klicken Sie auf;0s". beginnen Attribute bedeutet, offset-Zeit, nach der die Animation startet. Erklären Sie bitte, was ist rect.klicken Sie auf. Das Rechteck mit der id "rect" hat keine Klick-Handler mit.
    • hmm, ich würde vorschlagen, die Aufteilung der Pfad, wenn es einen moveto, nur um es einfacher zu machen.
    • bedeutet das auslösen der animation, wenn das element mit der id "rect" geklickt, finden Sie unter w3.org/TR/SVG11/animate.html#SyncbaseValueSyntax.

    InformationsquelleAutor Erik Dahlström
  2. 2

    Ich habe versucht, für eine lange Zeit, dies zu tun, ohne dass Sie zusätzliche Skripte in den header (ich habe keine Ahnung von javascript hat nicht geholfen), so ist hier die Lösung:

    <path d="..." stroke-dasharray="">
  <animate attributeName="stroke-dashoffset" from="" to="0" dur="1s" begin="0s"
           onload="var length = parentNode.getTotalLength();
                   parentNode.setAttribute('stroke-dasharray',length+','+length);
                   this.setAttribute('from',length)" />
</path>

    Fügte ich zusätzliche Zeilenumbrüche zur besseren Lesbarkeit hier.

    Dies ist legal in SVG (wenn auch nicht in HTML), weil die svg:animieren - element kann onload, die die meisten HTML-Elemente nicht.

    InformationsquelleAutor bitmask
  3. 0

    Sobald Sie gerendert haben Ihren SVG-Pfad, um es so Aussehen, wie es gezeichnet wird mit Bleistift, können Sie einfach bedecken Sie es alle mit einer lichtundurchlässigen Schicht, und dann animieren die Bewegung dieser Schicht entlang der Weg.

    Finden die CGPath entlang der Sie den layer verschieben Sie können diese Bibliothek verwenden:
    https://github.com/arielelkin/PocketSVG

    Diese analysieren die SVG-Daten in einer UIBezierPath. Dann:

    SvgToBezier *myBezier = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:@"M176.17,369.617c0,0,335.106-189.361,214.894,38.298s129.787,282.978,178.723,42.553C618.724,210.042,834.681,87.702,790,307.915" rect:CGRectMake(0,0,1024,768)];

UIBezierPath *myPath = myBezier.bezier;

CAKeyframeAnimation *mySVGPathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
bounceAnimLeft.duration = 3;
bounceAnimLeft.path = myPath.CGPath;

[myObjectToMove.layer addAnimation:mySVGPathAnimation forKey:@"pathAnimation"];
    • Könnten Sie einige weitere Informationen, wie Sie das Stück code ?
    • Wenn der Pfad in SVG, und Sie möchten, um die animation, wo es sieht aus wie es gezeichnet wird, müssen Sie zuerst die Verwendung der code, den ich oben gepostet zu konvertieren, SVG in eine CGPath. Sobald Sie die CGPath, werfen Sie einen Blick auf diese: oleb.net/blog/2010/12/...
    InformationsquelleAutor Eric
Schreibe einen Kommentar