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

前端之家收集整理的这篇文章主要介绍了你如何在IOS中设置SVG路径的动画?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个像这样的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节点适用于单个坐标,但不适用于路径.

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

解决方法

尝试为 ‘stroke-dashoffset’设置动画(请注意,您需要与它匹配 ‘stroke-dasharray’),请参阅 this example.需要计算才能成功使用此路径的路径长度可以通过以下脚本获取
var pathlength = yourPathElm.getTotalLength()

查看example上的源代码,了解它是如何完成的.

猜你在找的iOS相关文章