私は迅速なアプリで描画svgパスをアニメーションできますか？

Question

私のスウィフトアプリではSVGファイルがあります。マップマーカーの形です。今はアニメーションで描画したいと思います。

@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に私がmainLogoViewと呼ばれるストーリーボードviewに添加し、その後、私はそこにSVGファイルを表示しています：私は次のようにpocketSVGhttps://github.com/pocketsvg/PocketSVG/私のコードの使用のおかげである図面を表示することができました。さて、それは形のマーカーなので、これに非常に似ています：http://image.flaticon.com/icons/svg/116/116395.svg私はそれを描きたい - 2秒の時間の間に私は円の周りの形を描きたい。

私はそれをどのように行うことができますか？

===== EDIT：ジョシュのアドバイスに従い

私は私の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に割り当て、そのシェイプレイヤーをビューに追加します。次のように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") 
    }