使用一行jQuery的SVG动画插件问题 [英] Problems using the jQuery SVG animation plugin on a line
问题描述
我已经做了一些关于戳但文档似乎对这个问题有点稀疏，一两件事情不累加，
I've done some poking about but the documentation seems a little sparse on the subject, and one or two things aren't adding up,
我试图让一行来跟踪动画元素，我对这样的设计是使用同样的动画变量作为该行的X1统筹，盒元素
使用Javascript（jQuery的最新，SVG插件+ SVG动画插件）
Javascript (latest jQuery, SVG Plugin + SVG Animation Plugin)
$(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/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>
有一些问题在这里，首先，显而易见的一个，这就是目前的code设置X1的位置到最左边，因为我不会告诉添加到原始值。
There are a few problems here, firstly, the obvious one, which is that the current code sets the position of the X1 to the far left because I'm not telling to add to the original value.
我不使用的+ =改变的原因是+ =什么'打破了code出于某种原因，即使是普通的数字值。
The reason I'm not using '+=change' is that '+=anything' breaks the code for some reason, even a generic numerical value.
最后，即使我刚刚设置的第一X1动画的价值说500，第二个为0，只有第一个会火，第二动画被跳过。这种效果是在这里看到过那里的飞线到最左边，然后不要移动。
Finally, even if I just set the value of the first X1 animation to say 500, and the second to 0, only the first will fire, the second animation is being skipped. This effect is seen here too where the lines fly to the far left and then don't move.
我敢肯定，这部分是我的jQuery和JavaScript的极其业余的理解，但我会AP preciate任何建设性的帮助。
I'm sure this is partly my extremely amateur understanding of jQuery and Javascript, but I would appreciate any constructive help.
推荐答案
这是相当具有挑战性在我以前没有使用SVG。
This was rather challenging in that I had not used svg before.
打开和关闭与它玩了几天后，我结束了这一点：
After playing with it on and off for a couple of days, I ended up with this:
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
});
})();
});
请参阅演示。
这实际上是与SVG字符串和非SVG的文本框的混合解决方案。这些元素的动画，每个字符串显示要附加到文本框的方式。
This is actually a hybrid solution with svg strings and non-svg text boxes. These elements are animated in such a way that each string appears to be attached to a text box.
的code是不容易追随并能毫无疑问被简化。最后，我只是高兴能得到的东西的工作。良好的教育对我来说，我希望这是对你有用。
The code is not easy to follow and could no doubt be simplified. In the end, I was just pleased to get something working. Good education for me and I hope it's useful to you .
编辑 - 注释：
您间pretation ：刚想正确的。实际上，我用动画的另一种形式，它的工作原理如下， .animate（属性，选项），其中属性和选项都映射（JavaScript对象）。该方法的这种形式允许步骤中指定选项 - 即。这将发生在动画的每个步骤的操作。在这种情况下，所关心的操作被改变气球串的顶端的位置。
Your interpretation: Just about correct. I'm actually using an alternative form of animate, which works as follows, .animate(properties, options), where properties and options are both maps (javascript objects). This form of the method allows a step option to be specified - ie. an operation that will occur at each step of the animation. In this case, the operation of interest is changing the position of the top end of the balloon string.
I 和'厄尔尼诺'：jQuery的。每（）方法提供了一个便捷的方式来遍历一个普通的JS对象的数组中的元素，在一个jQuery容器中的DOM节点或属性。 。每次的两种形式（）接受一个回调函数，它指定了在操作的每个的迭代来执行。反过来，回调函数接受两个参数重新presenting（对数组和jQuery容器）首页和值 ，或（对于普通JS对象）键和值。在。每（）方法在内部调用回调函数，并插入每个迭代一次的参数。当编写一个回调，你可以叫你喜欢什么论据，我称他们为 I （以下简称首页）和报（以下简称元）。
i and 'el': jQuery's .each() methods offer a convenient way to iterate over the elements in an array, the DOM nodes in a jQuery container, or properties of a plain js object. Both forms of .each() accept a callback function which specifies the operation to perform at each iteration. In turn, the callback function accepts two parameters representing (for array and jQuery container) index and value, or (for plain js object) key and value. The .each() method calls the callback function internally and inserts the parameters once per iteration. When writing a callback, you can call the arguments what you like, and I called them i (short for index) and el (short for element).
订单动画：线路实际上不只是移动一点点，然后停止。即 - 但是，这种操作在步的回调，这是每个动画步骤调用一次进行。必要时，直到动画完成多次。因此，该线跟上其所粘的对象
Line animation: The line actually DOES just move a tiny bit and stop. BUT, this operation is performed in the step callback, it is called once per step of the animation - ie. as many times as necessary until the animation is complete. Thus, the line keeps up with the object to which it is "glued".
这篇关于使用一行jQuery的SVG动画插件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
