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

问题描述：

我有一个像这样的 SVG 路径:

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>

我可以渲染路径，但似乎无法找到一种方法来使路径具有动画效果，使其看起来像用铅笔一样被绘制".animate 节点适用于单个坐标，但不适用于路径.

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.

我最终会在 iPhone 应用程序中使用解析器或 UIWebView 使用此动画.

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

答

尝试为 'stroke-dashoffset 设置动画'(请注意，您需要一个匹配的 'stroke-dasharray')，请参阅此示例.可以通过如下脚本获取需要计算才能成功使用它的路径的长度:

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.

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

相关推荐