如何動畫一行來跟蹤移動的CSS元素？

UPDATE - I had asked for help fixing my first attempt at this using the SVG animate plugin which there is now a solution to (follow this link), which effectively answers this question. Though attr() as Jleagle pointed out could also lead to a solution如何動畫一行來跟蹤移動的CSS元素？

我有動畫使用jQuery CSS元件的陣列，以及下一階段是要跟蹤的每個元件具有圖形直線。該線的一端應該保持固定，並且與該元素一起移動。

我想我可以用SVG和適當的SVG jQuery插件來實現這一點，但我遇到了很多問題我想知道我是否應該從不同的方向接近它。

以下是帶有三條SVG行的動畫框的代碼，以便您可以看到我所得到的結果。 There is also a JS fiddle of the site

的Javascript

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

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

function act(jqObj, speed, change) { 

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

}; 
for(i = 0; i < balloons.length; i++) { 
    var speed = 2000 + Math.random() * 501; 
    var change = 10 + Math.random() * 26; 

    act(balloons[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="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 id="linePad" 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>

來源

2012-05-10 Olivier Butler

獲取氣球的座標並用attr（）更新線條座標？ – 472084

謝謝，我認爲這將工作。 –

你可以把文本，並在相同的代碼和樣式的文本的位置的元素。
然後你不需要修復兩個對象的動畫。
希望這是好的。

來源

2012-05-10 14:23:13

我不確定如何解決問題，你指的是什麼文字？我指的是一條線，如同一條圖形線，而不是像一行文字那樣。 –

如何動畫一行來跟蹤移動的CSS元素？

回答

相關問題