你如何在动画的IOS SVG路径？ [英] How do you animate an SVG path in IOS?

问题描述

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

我可以渲染路径，但似乎无法找到一种方法，使路径动画，这样它看起来是被逼平，仿佛铅笔​​。在动画节点适用于单COORDS但不适合的路径。

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.

推荐答案

尝试动画的中风dashoffset （注意，你需要一个匹配中风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路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！