ios - iOSでSVGKitを使用してSVGパスコンポーネントをUIBezierPathに解析するには?

Question

Swift を使用して iOS で SVG 画像をアニメーション化しています。SVGKit ( https://github.com/SVGKit/SVGKit ) を使用して SVG を簡単にレンダリングできましたが、アニメーション化するには、SVG パス要素を UIBezierPath に変換する必要があります。他のライブラリを使用して行うこともできますが、SVGKit だけを使用してすべて行うことができればいいと思います。パス要素を取得する簡単な方法も見つかりません。

Answer 1

Swift と SVGKit の使用で同じ問題が発生しました。この簡単なチュートリアルに従ってSwiftに変換した後でも、SVGをレンダリングできましたが、線画をアニメーション化できませんでした. 私にとってうまくいったのは、PocketSVGに切り替えることでした

各レイヤーを反復する関数があり、これを使用して SVG ファイルをアニメーション化する方法を次に示します。

  let url = NSBundle.mainBundle().URLForResource("tiger", withExtension: "svg")!
  let paths = SVGBezierPath.pathsFromSVGAtURL(url)

  for path in paths {
    // Create a layer for each path
    let layer = CAShapeLayer()
    layer.path = path.CGPath

    // Default Settings
    var strokeWidth = CGFloat(4.0)
    var strokeColor = UIColor.blackColor().CGColor
    var fillColor = UIColor.whiteColor().CGColor

    // Inspect the SVG Path Attributes
    print("path.svgAttributes = \(path.svgAttributes)")

    if let strokeValue = path.svgAttributes["stroke-width"] {
      if let strokeN = NSNumberFormatter().numberFromString(strokeValue as! String) {
        strokeWidth = CGFloat(strokeN)
      }
    }

    if let strokeValue = path.svgAttributes["stroke"] {
      strokeColor = strokeValue as! CGColor
    }

    if let fillColorVal = path.svgAttributes["fill"] {
      fillColor = fillColorVal as! CGColor
    }

    // Set its display properties
    layer.lineWidth = strokeWidth
    layer.strokeColor = strokeColor
    layer.fillColor = fillColor

    // Add it to the layer hierarchy
    self.view.layer.addSublayer(layer)

    // Simple Animation
    let animation = CABasicAnimation(keyPath:"strokeEnd")
    animation.duration = 4.0
    animation.fromValue = 0.0
    animation.toValue = 1.0
    animation.fillMode = kCAFillModeForwards
    animation.removedOnCompletion = false
    layer.addAnimation(animation, forKey: "strokeEndAnimation")