如何在我的 swift 应用程序中为绘图 svg 路径设置动画？

Question

在我的 ios swift 应用程序中，我有一个SVG文件 - 它是地图标记的形状，现在我想用动画来绘制它。由于使用了pocketSVG https://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 秒的时间内我想绘制形状围绕圆圈。

我该怎么做？

======编辑：

按照 Josh 的建议，我注释掉了我的大部分代码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'

另外，在编辑我的代码之后 - 你能给我一个提示，我如何在这里使用 Josh 的方法？

Answer 1

而不是使用 imageView 方法将您的 SVG 转换为 cgPath。将此路径分配给 CAShapeLayer 并将该形状图层添加到您的视图中。您可以为 CAShapeLayer 的 endStroke 设置动画，如下所示：

    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")
    }