如何在 IOS 中为 SVG 路径设置动画？

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

我尝试了很长时间，而不必在标题中添加额外的脚本（我不知道 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>

为了便于阅读，我在此处添加了额外的换行符。

这在 SVG 中是合法的（虽然在 HTML 中不合法），因为 the svg:animate element allows onload，而大多数 HTML 元素不这样做。

Answer 2

渲染 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"];

Answer 3

尝试为'stroke-dashoffset' 设置动画（请注意，您需要与之匹配的'stroke-dasharray'），请参阅this example。需要计算才能成功使用它的路径长度可以通过如下脚本获取：

var pathlength = yourPathElm.getTotalLength()

在example 上查看源代码以了解它是如何完成的。