Как вы анимируете путь SVG в IOS?

Question

У меня есть SVG-путь, подобный следующему:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1"  baseProfile="full"> 
    <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" />
</svg>

Я могу отобразить путь, но не могу найти способ оживить путь так, чтобы он выглядел так, как будто он «рисуется».как будто с карандашом.Узел animate работает для отдельных координат, но не для путей.

В конечном итоге я буду использовать эту анимацию в приложении для iPhone с парсером или с UIWebView.

Answer 1

Попробуйте анимировать 'stroke-dashoffset' (обратите внимание, что вам нужен соответствующий 'stroke-dasharray' с ним), см. этот пример . Длина пути, который должен быть рассчитан для успешного использования, может быть получена с помощью сценария, например:

var pathlength = yourPathElm.getTotalLength()

Просмотрите исходный код на примере , чтобы увидеть, как это делается.

Answer 2

Я долго пытался сделать это, не добавляя дополнительные скрипты в заголовок (что я понятия не имею, что javascript не помог), поэтому вот решение:

<path d="..." stroke-dasharray="">
  <animate attributeName="stroke-dashoffset" from="" to="0" dur="1s" begin="0s"
           onload="var length = parentNode.getTotalLength();
                   parentNode.setAttribute('stroke-dasharray',length+','+length);
                   this.setAttribute('from',length)" />
</path>

Iздесь добавлены дополнительные разрывы строк для удобства чтенияHTML элементы не имеют.

Answer 3

Как только вы рендерили свой SVG-путь, чтобы он выглядел так, как будто он рисуется карандашом, вы можете просто покрыть все это непрозрачным слоем, а затем анимировать движение этого слоя вдоль пути.

Чтобы найти CGPath, вдоль которого вы будете перемещать слой, вы можете использовать эту библиотеку: https://github.com/arielelkin/PocketSVG

Это позволит проанализировать данные SVG в UIBezierPath.Тогда:

SvgToBezier *myBezier = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:@"M176.17,369.617c0,0,335.106-189.361,214.894,38.298s129.787,282.978,178.723,42.553C618.724,210.042,834.681,87.702,790,307.915" rect:CGRectMake(0,0,1024,768)];

UIBezierPath *myPath = myBezier.bezier;

CAKeyframeAnimation *mySVGPathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
bounceAnimLeft.duration = 3;
bounceAnimLeft.path = myPath.CGPath;

[myObjectToMove.layer addAnimation:mySVGPathAnimation forKey:@"pathAnimation"];