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

Question

在我的 ios swift 应用程序中，我有 SVG 文件 - 它是 map 标记的形状，现在我想用动画绘制它。由于使用了 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 中，我在 Storyboard上添加了一个名为 mainLogoView 的 view，然后我在那里显示 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 并将该形状图层添加到您的 View 中。您可以按如下方式为 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")
    }