4

我正在使用 Swift 在 iOS 中为 SVG 图像制作动画。我已经能够使用 SVGKit ( https://github.com/SVGKit/SVGKit ) 轻松地渲染 SVG，但要对其进行动画处理，我需要将 SVG 路径元素转换为 UIBezierPath。我可以使用其他库来做到这一点，但如果我可以单独使用 SVGKit 来完成所有这些工作，那就太好了。我还没有找到任何直接的方法来获取路径元素。

4

2 回答 2

5

我在使用 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")
于 2016-11-18T17:43:39.030 回答
2

该路径可通过调用 Apple 类的 .path 来获得。我建议您阅读 Apple CoreAnimation 文档，尤其是 CAShapeLayer（被 SVGKit 大量使用）。

Apple 还提供了转换为 UIBezierPath 的代码 - 同样，请搜索 Apple 文档以获取有关如何执行此操作的详细信息。例如：

  • (UIBezierPath *)bezierPathWithCGPath:(CGPathRef)CGPath;
于 2016-10-14T14:28:12.517 回答