jquery - 带有 Lazy Line Painter 的 Jquery 线条动画

Question

我一直在尝试来自矢量（svg）文件的一些 jquery 动画，我的方法很好，但是为简单的行编写代码非常慢，直到我发现这个极好的小帮助

http://lazylinepainter.info/

非常有帮助，它正是我正在寻找的东西。使用它我制作了这条线动画：

http://bit.ly/YSL5qd

如您所见，动画适用于多条路径，我唯一不知道的是如何同时处理两条线。我试图在两个不同的js文件中实现路径，它不会工作......

有任何想法吗？感谢转发！

标记：

 <div id="svg7" style="width: 1022px; height: 150px; z-index: 9999; position: absolute; top: 50px;"></div>


        <script>window.jQuery || document.write('<script src="scripts/jquery-1.9.1.min.js"><\/script>')</script>
<script src="scripts/strokengine.js"></script>
<script src="scripts/pulsengine.js"></script>
<script src="scripts/main2.js"></script>

Answer 1

您可以将路径数据拆分为两个单独的键/值对，

将动画分配给第二个 div，

然后分别设置您的属性和“绘画”（svg8）。

var pathObj = {
    "svg7": {
        "strokepath": [
            {
                "path": " ... "
            }
        ],
        "dimensions": { ... }
    },
    /* second key / value */ 
    "svg8": {           
        "strokepath": [ 
            {
               "path": "..."
            }
        ],
        "dimensions": { ... }
    }
}; 

<div id="svg7"></div>
<div id="svg8"></div>  


// second lazyline instance
$('#svg8').lazylinepainter({
     "svgData": pathObj,
     "strokeWidth": 3,
     "strokeColor": "#89171a"
}).lazylinepainter('paint'); 

见下文;

http://jsfiddle.net/J8nC3/4/

这是lazylinepainter 的一个领域，在不久的将来会更容易实现。

谢谢凸轮