0

私はベクトル（svg）ファイルからいくつかのjqueryアニメーションを試してきました.私のアプローチは良かったのですが、この優れた小さな助けが

http://lazylinepainter.info/

ちょうど私が探していたもので、非常に役に立ちました。これを使用して、このラインアニメーションを作成しました：

http://bit.ly/YSL5qd

アニメーションが複数のパスで機​​能することがわかるように、私が理解できない唯一のことは、2 つの行を同時にランチする方法です。2 つの異なる 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>
4

1 に答える 1

1

パス データを 2 つの別個のキーと値のペアに分割できます。

アニメーションを 2 番目の 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 の領域です。

カムに感謝

于 2013-04-13T21:04:37.833 に答える