Question

我一直在尝试使用矢量（svg）文件中的一些jquery动画，我的方法很好，但编写简单线条的代码非常慢，直到我找到了这个非常好的小帮助

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

正如你所看到的那样，动画可以使用多条路径，我唯一能想到的就是如何同时在两条线路上吃午餐。我试图在两个不同的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，

然后设置您的属性＆amp; “油漆”（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的一个区域，在不久的将来会更容易实现。

谢谢cam

与Lazy Line Painter的Jquery线动画

1 个答案: