你如何在IOS中创建SVG路径的动画？(How do you animate an SVG path in IOS?)

你如何在IOS中创建SVG路径的动画？(How do you animate an SVG path in IOS?)

我有一个像这样的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。

I have an SVG path like this:

<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>

I can render the path but can't seem to find a way to make the path animate so that it looks like it is "being draw" as if with pencil. The animate node works for single coords but not for paths.

I will eventually end up using this animation in an iPhone app either with a parser or with a UIWebView.

最满意答案

尝试设置'stroke-dashoffset'的动画效果 （请注意，您需要使用匹配的'stroke-dasharray' ），请参阅此示例 。 需要计算以便能够成功使用它的路径的长度可以通过如下脚本获取：

var pathlength = yourPathElm.getTotalLength()

查看示例中的源代码以了解它是如何完成的。

Try animating the 'stroke-dashoffset' (note that you need a matching 'stroke-dasharray' with it), see this example. The length of the path that needs to be computed to be able to use this successfully can be fetched via script like:

var pathlength = yourPathElm.getTotalLength()

View source on the example to see how it's done.