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的{{1}}，然后我在那里显示了SVG文件。现在，因为它是一个形状标记，非常类似于：http://image.flaticon.com/icons/svg/116/116395.svg我想绘制它 - 在2秒的时间内我想在圆周上绘制形状。

我该怎么做？

=====编辑：

根据Josh的建议，我在mainLogoView中注释掉了大部分代码并改为：

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

另外，在编辑我的代码之后 - 你能给我一个提示，我怎么能在这里使用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")
    }

Answer 2

我确实遇到了同样的问题，这是我的解决方案。 svgWidth，svgHeight是svg标签的宽度和高度

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

for path in SVGBezierPath.pathsFromSVG(at: url)
{
    var layer:CAShapeLayer = CAShapeLayer()
    layer.transform = CATransform3DMakeScale(CGFloat(mainLogoView.frame.width/svgWidth), CGFloat(mainLogoView.frame.height/svgHeight), 1)

    layer.path = path.cgPath
    layer.lineWidth = 4
    layer.strokeColor = orangeColor.cgColor
    layer.fillColor = UIColor.white.cgColor
    layer.transform = CATransform3DMakeScale(2, 2, 1)
    mainLogoView.layer.addSublayer(layer)
}

如何在我的swift应用程序中制作绘制svg路径的动画？

2 个答案: