2016-04-17 5 views
3

Я анимация SVG-изображения в iOS с помощью Swift. Я смог визуализировать SVG с помощью SVGKit (https://github.com/SVGKit/SVGKit), но для его анимации мне нужно преобразовать элемент пути SVG в UIBezierPath. Я могу сделать это с помощью других библиотек, но было бы неплохо, если бы я мог использовать все это, используя только SVGKit. Я также не нашел прямого пути для получения элемента пути.Как разобрать компонент SVG-пути для UIBezierPath с помощью SVGKit в iOS?

ответ

1

Путь доступен по вызову .path на классах Apple. Я предлагаю вам прочитать документацию Apple CoreAnimation, особенно CAShapeLayer (которая широко используется SVGKit).

Apple также предоставляет код для преобразования в UIBezierPath - повторите поиск документов Apple, чтобы узнать, как это сделать. например:

  • (UIBezierPath *) bezierPathWithCGPath: (CGPathRef) CGPath;
+0

Речь идет не о преобразовании UiBezierPath в CGPath или наоборот. Скорее всего, svg-> UiBezierPath – alexburtnik

+0

OP использует SVGKit. SVGKit хранит * все * как CGPath для рендеринга. SVGKit предоставляет * все * через API Apple, как я описал выше. Пожалуйста, прочитайте более внимательно: это очень касается преобразования между UIBezierPath и CGPath! – Adam

+0

У меня появилось всплывающее сообщение о том, что кто-то отказался от этого ответа. Нет комментариев, просто вниз. Не полезно (особенно, поскольку downvoter ошибается :)) – Adam

1

У меня были те же проблемы с Swift и с использованием SVGKit. Даже после этого simple tutorial и преобразования его в быстрый, я мог бы отобразить 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")