如何动画一行追踪移动CSS元素？ [英] How to animate a line to track a moving CSS element?
问题描述
更新 - <一个href=\"http://stackoverflow.com/questions/10526137/problems-using-the-jquery-svg-animation-plugin-on-a-line\">I曾要求帮助使用SVG动画插件，它现在是（请点击此链接），从而有效地回答了这个问题的解决方案在这个固定我的第一次尝试。虽然ATTR（）作为Jleagle指出，也有可能导致一个解决方案
我有动画使用jQuery CSS元素的数组，而下一个阶段是跟踪每个元素具有的图形直线。该行应保持固定的一端，并与元素的一招。
我以为我可以使用SVG和相应的SVG jQuery插件做到这一点，但我已经遇到这么多问题的我不知道是否我应该从不同的方向接近它。
下面是code为动画框有三个SVG线，所以你可以看到我在获得。 也有一个网站的JS小提琴
的JavaScript
$（函数（）{
变种气球= [$（＃BOX1），$（＃box2的），$（＃BOX3）];VAR线= $（＃一号线），$（＃2号线），$（＃3号线）];函数法（jqObj，速度变化）{ jqObj.animate（{
左：改变
}，速度）.animate（{
左：-change
}，速度快，功能（）{
法案（jqObj，速度，变化）;
}）;};
对于（i = 0; I＆LT; balloons.length;我++）{
VAR速度= 2000 +的Math.random（）* 501;
VAR变化= 10 +的Math.random（）* 26; 法案（气球[I]，速度变化）;
}
}）;
HTML / CSS
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;的概念页＆LT证明; /标题＆GT;
＆LT;风格类型=文/ CSS＆GT;
html的。体{
位置：绝对的;
} .box的{
位置：绝对的;
宽度：100像素;
高度：100像素;
位置：绝对的;
背景色：红色;
}
＃{BOX1
保证金左：300像素;
的margin-top：60像素
}
＃{BOX2
保证金左：500像素;
的margin-top：20px的
}
＃{BOX3
保证金左：700像素;
的margin-top：50px的
}
＆LT; /风格＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =main.js＆GT;＆LT; / SCRIPT＆GT;＆LT; /头＆GT;
＆LT;身体GT; ＆LT; DIV CLASS =盒子ID =BOX1＆GT;
PROJ 1
＆LT; / DIV＆GT;
＆LT; DIV CLASS =盒子ID =BOX2＆GT;
PROJ 2
＆LT; / DIV＆GT;
＆LT; DIV CLASS =盒子ID =BOX3＆GT;
PROJ 3
＆LT; / DIV＆GT; ＆LT; SVG ID =linePad的xmlns =http://www.w3.org/2000/svg版本=1.1＆GT;
＆LT;行ID =一号线X1 =350Y1 =160X2 =550Y2 =500的风格=行程：RGB（255,0,0）;笔画宽度：2/＆GT ;
＆LT;行ID =2号线X1 =550Y1 =120X2 =550Y2 =500的风格=行程：RGB（255,0,0）;笔画宽度：2/＆GT ;
＆LT;行ID =3号线X1 =750Y1 =150X2 =550Y2 =500的风格=行程：RGB（255,0,0）;笔画宽度：2/＆GT ;
＆LT; / SVG＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
您可以把文本，并在相同的标记和样式的文本的位置的元素。结果
那么你并不需要解决两个物体的动画。结果
希望这是确定。
I have animated an array of css elements using jQuery, and the next stage is to track each element with a graphical straight line. One end of the line should remain fixed and one move with the element.
I thought I could accomplish this with SVG and the appropriate SVG jQuery plugin, but I've run into so many problems I wondered if I should just approach it from a different direction.
Below is the code for the animated boxes with three SVG lines so you can see what I'm getting at. 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>
You could put the text and the elements in the same tag and style the position of the text.
Then you don't need to fix the animation of two objects.
Hope this is OK.
这篇关于如何动画一行追踪移动CSS元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
