1

私はいくつかの突っ込みをしましたが、ドキュメントは主題に関して少しまばらに見えます、そして1つか2つのことが足し合わされていません、

アニメーション要素を追跡するための線を取得しようとしています。このための私の設計は、線のX1座標のボックス要素と同じアニメーション変数を使用することです。

Javascript（最新のjQuery、SVGプラグイン+ SVGアニメーションプラグイン）

$(function(){
var balloons = [
$("#box1"),
$("#box2"),
$("#box3")
];

var lines = [
$("#line1"),
$("#line2"),
$("#line3")
];

function act(jqObj, lineX, speed, change) {
jqObj
.animate({'left': change}, speed)
.animate({'left': -change}, speed);

lineX
.animate({svgX1: change}, speed)
.animate({sgvX1: -change}, speed, function() {
    act(jqObj, lineX, speed, change);
});
};
for (i = 0; i < balloons.length; i++) {
var speed = 2000 + Math.random() * 501;
var change = 10 + Math.random() * 26;
act(balloons[i], lines[i], speed, change);
}
});

HTML / CSS

<html>
<head>

<title>Proof of Concept Page</title>
<style type="text/css">
 .html .body {position: absolute;}

.box {
 position: absolute;
        width:100px;
        height:100px;
        position: absolute;
        background-color:red;
}
#box1 {
margin-left:300px; margin-top:60px 
}
#box2 {
margin-left:500px; margin-top:20px 
}
#box3 {
margin-left:700px; margin-top:50px 
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript" src="jquery.svganim.js"></script>
<script type="text/javascript" src="main.js"></script>


</head>
<body>
<div  class="box" id="box1">Proj 1</div>
<div  class="box" id="box2">Proj 2</div>
<div  class="box" id="box3">Proj 3</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line id="line1" x1="350" y1="160" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
    <line id="line2" x1="550" y1="120" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
    <line id="line3" x1="750" y1="150" x2="550" y2="500" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

</body></html>

ここにはいくつかの問題があります。まず、明らかな問題です。元の値に追加するように指示していないため、現在のコードがX1の位置を左端に設定していることです。

'+ = change'を使用していない理由は、'+ = anything'が何らかの理由でコードを壊しているためです。これは、一般的な数値であってもです。

最後に、最初のX1アニメーションの値を500に設定し、2番目を0に設定した場合でも、最初のアニメーションのみが起動され、2番目のアニメーションはスキップされます。この効果は、線が左端に飛んで移動しない場合にも見られます。

これは、jQueryとJavascriptについての私の非常に素人的な理解の一部であると確信していますが、建設的な支援をいただければ幸いです。

4

1 に答える 1

1

これは、以前にsvgを使用したことがなかったという点でかなり困難でした。

数日間オンとオフで遊んだ後、私はこれで終わりました：

var $boxes = $(".box"),//coded in HTML
    strings = [];//populated below with sgv lines

$('#canvas').svg({
    onLoad: function(svg) {
        var g = svg.group({
            stroke: 'red',
            strokeWidth: 2
        });
        $boxes.each(function(i, el) { // make one string per box.
            strings.push(svg.line(g, parseInt($(el).css('left')), 18+parseInt($(el).css('top')), 50, 200));
        });
    }
});

//animate the boxes
$boxes.each(function(i, el) {
    var speed = 2000 + Math.random() * 501,
        change = 10 + Math.random() * 26,
        jqObj = $(el),
        initial_left = parseInt(jqObj.css('left')) || 0;
    (function act() {
        jqObj.animate({
            'left': initial_left + change
        }, {
            duration: speed,
            step: function() { //move the string's top end to keep up with the box
                $(strings[i]).animate({
                    svgX1: jqObj.css('left')
                }, 0);
            }
        }).animate({
            'left': initial_left - change
        }, {
            duration: speed,
            step: function() { //move the string's top end to keep up with the box
                $(strings[i]).animate({
                    svgX1: jqObj.css('left')
                }, 0);
            },
            complete: act
        });
    })();
});

DEMOを参照してください。

これは実際には、svg文字列と非svgテキストボックスを使用したハイブリッドソリューションです。これらの要素は、各文字列がテキストボックスに添付されているように見えるようにアニメーション化されます。

コードを理解するのは簡単ではなく、間違いなく単純化することができます。結局、私は何かが機能することを嬉しく思いました。私にとって良い教育であり、それがあなたにとって役立つことを願っています。

編集-注釈：

あなたの解釈：ほぼ正しい。私は実際にアニメーションの代替形式を使用しています。これは次のように機能します.animate(properties, options)。ここで、プロパティとオプションは両方ともマップ（javascriptオブジェクト）です。この形式のメソッドでは、stepオプションを指定できます。アニメーションの各ステップで発生する操作。この場合、対象となる操作は、バルーンストリングの上端の位置を変更することです。

iおよび'el'：jQueryの.each()メソッドは、配列内の要素、jQueryコンテナー内のDOMノード、またはプレーンなjsオブジェクトのプロパティを反復処理するための便利な方法を提供します。どちらの形式も、各反復.each()で実行する操作を指定するコールバック関数を受け入れます。次に、コールバック関数は、（配列およびjQueryコンテナーの場合）および、または（プレーンjsオブジェクトの場合）およびを表す2つのパラメーターを受け入れます。このメソッドは、コールバック関数を内部的に呼び出し、反復ごとに1回パラメーターを挿入します。コールバックを書くとき、あなたはあなたが好きなように引数を呼ぶことができます、そして私はそれらを（の略で）そして（要素の略で）と呼びました。indexvaluekeyvalue.each()iindexel

ラインアニメーション：ラインは実際にはほんの少し動かして停止します。ただし、この操作はstepコールバックで実行され、アニメーションのステップごとに1回呼び出されます。アニメーションが完了するまで、必要な回数だけ。したがって、線はそれが「接着」されているオブジェクトに追いつきます。

于 2012-05-11T02:11:48.030 に答える