Как я могу анимировать рисунок svg path в моем быстром приложении?

Question

В моем приложении ios swift у меня есть файл SVG - это форма маркера карты, теперь я хочу нарисовать его с помощью анимации. Мне удалось отобразить рисунок благодаря использованию pocketSVGhttps://github.com/pocketsvg/PocketSVG/ Мой код выглядит следующим образом:

@IBOutlet weak var mainLogoView: UIView! 

override func viewDidLoad() { 
    super.viewDidLoad() 

    let url = Bundle.main.url(forResource: "mainLogo", withExtension: "svg")! 

    //initialise a view that parses and renders an SVG file in the bundle: 
    let svgImageView = SVGImageView.init(contentsOf: url) 

    //scale the resulting image to fit the frame of the view, but 
    //maintain its aspect ratio: 
    svgImageView.contentMode = .scaleAspectFit 

    //layout the view: 
    svgImageView.translatesAutoresizingMaskIntoConstraints = false 
    mainLogoView.addSubview(svgImageView) 

    svgImageView.topAnchor.constraint(equalTo: mainLogoView.topAnchor).isActive = true 
    svgImageView.leftAnchor.constraint(equalTo: mainLogoView.leftAnchor).isActive = true 
    svgImageView.rightAnchor.constraint(equalTo: mainLogoView.rightAnchor).isActive = true 
    svgImageView.bottomAnchor.constraint(equalTo: mainLogoView.bottomAnchor).isActive = true 


    Timer.scheduledTimer(timeInterval: TimeInterval(2), target: self, selector: "functionHere", userInfo: nil, repeats: false) 

} 

func functionHere(){ 
    self.performSegue(withIdentifier: "MainSegue", sender: nil) 
} 

Так в основном в моем ViewController я добавил на раскадровке в view называется mainLogoView, а затем я отображая там файл SVG. Теперь, поскольку это формальный маркер, очень похожий на это: http://image.flaticon.com/icons/svg/116/116395.svg Я хочу нарисовать его - в течение 2 секунд я хочу нарисовать форму вокруг круга.

Как я могу это сделать?

===== EDIT:

Следуя совету I Джоша закомментирована большую часть кода в моем viewDidLoad и сделал вместо этого:

let url = Bundle.main.url(forResource: "mainLogo", withExtension: "svg")! 

    for path in SVGBezierPath.pathsFromSVG(at: url) 
    { 
     var layer:CAShapeLayer = CAShapeLayer() 
     layer.path = path.cgPath 
     layer.lineWidth = 4 
     layer.strokeColor = orangeColor.cgColor 
     layer.fillColor = UIColor.white.cgColor 
     mainLogoView.addSubview(layer) 
    } 

но теперь последняя строка выдает ошибку

Cannot convert value of type 'CAShapeLayer' to expected argument type 'UIView' 

Кроме того, после редактирования моего кода - не могли бы вы дать мне подсказку, как я могу использовать метод Джоша здесь?

Answer 1

Вместо использования метода imageView преобразуйте SVG в cgPath. Назначьте этот путь к CAShapeLayer и добавьте этот слой формы к вашему представлению. Вы можете анимировать endStroke в CAShapeLayer в следующем виде:

func animateSVG(From startProportion: CGFloat, To endProportion: CGFloat, Duration duration: CFTimeInterval = animationDuration) { 
     let animation = CABasicAnimation(keyPath: "strokeEnd") 
     animation.duration = duration 
     animation.fromValue = startProportion 
     animation.toValue = endProportion 
     animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) 
     svgLayer.strokeEnd = endProportion 
     svgLayer.strokeStart = startProportion 
     svgLayer.add(animation, forKey: "animateRing") 
    }