Wie SVG-Pfad-Komponente zu UIBezierPath mit SVGKit in iOS analysieren?

Question

Ich animiere ein SVG-Bild in iOS mit Swift. Ich konnte das SVG leicht mit SVGKit (https://github.com/SVGKit/SVGKit) rendern, aber um es zu animieren, muss ich das SVG-Pfadelement in UIBezierPath konvertieren. Ich kann dies mit anderen Bibliotheken tun, aber es wäre schön, wenn ich all das mit SVGKit allein machen könnte. Ich habe keinen direkten Weg gefunden, um das Pfadelement zu erhalten.

Answer 1

Der Pfad ist durch Aufrufen von .path in Apples Klassen verfügbar. Ich schlage vor, Sie lesen die Apple CoreAnimation-Dokumentation, insbesondere CAShapeLayer (das von SVGKit stark verwendet wird).

Apple bietet auch Code für die Konvertierung in UIBezierPath - suchen Sie erneut in der Apple-Dokumentation nach Details dazu. Beispiel:

• (UIBezierPath *) bezierPathWithCGPath: (CGPathRef) CGPath;

Answer 2

Ich hatte die gleichen Probleme mit Swift und mit SVGKit. Auch nachdem ich diesem simple tutorial gefolgt bin und es in swift umwandelte, konnte ich das SVG aber die Zeichnungslinie nicht animieren. Was für mich gearbeitet wurde PocketSVG Schalt

Sie haben eine Funktion über jede Schicht zu durchlaufen, und das ist, wie ich es verwendet, um eine SVG-Datei zu animieren:

let url = NSBundle.mainBundle().URLForResource("tiger", withExtension: "svg")! 
    let paths = SVGBezierPath.pathsFromSVGAtURL(url) 

    for path in paths { 
    // Create a layer for each path 
    let layer = CAShapeLayer() 
    layer.path = path.CGPath 

    // Default Settings 
    var strokeWidth = CGFloat(4.0) 
    var strokeColor = UIColor.blackColor().CGColor 
    var fillColor = UIColor.whiteColor().CGColor 

    // Inspect the SVG Path Attributes 
    print("path.svgAttributes = \(path.svgAttributes)") 

    if let strokeValue = path.svgAttributes["stroke-width"] { 
     if let strokeN = NSNumberFormatter().numberFromString(strokeValue as! String) { 
     strokeWidth = CGFloat(strokeN) 
     } 
    } 

    if let strokeValue = path.svgAttributes["stroke"] { 
     strokeColor = strokeValue as! CGColor 
    } 

    if let fillColorVal = path.svgAttributes["fill"] { 
     fillColor = fillColorVal as! CGColor 
    } 

    // Set its display properties 
    layer.lineWidth = strokeWidth 
    layer.strokeColor = strokeColor 
    layer.fillColor = fillColor 

    // Add it to the layer hierarchy 
    self.view.layer.addSublayer(layer) 

    // Simple Animation 
    let animation = CABasicAnimation(keyPath:"strokeEnd") 
    animation.duration = 4.0 
    animation.fromValue = 0.0 
    animation.toValue = 1.0 
    animation.fillMode = kCAFillModeForwards 
    animation.removedOnCompletion = false 
    layer.addAnimation(animation, forKey: "strokeEndAnimation")