Question

我已经做了一些讨论，但文档似乎有点稀疏，并且有一两件事情没有加起来，

我正在尝试使用一条线来跟踪一个动画元素，我的设计是使用与该行的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的位置设置为最左边，因为我没有告诉要添加原始值。

我没有使用'+ =更改'的原因是'+ =任何'由于某种原因打破了代码，甚至是通用数值。

最后，即使我只是将第一个X1动画的值设置为500，第二个设置为0，只有第一个将触发，第二个动画将被跳过。这里也可以看到这种效果，其中线条飞向最左边，然后不移动。

我确信这部分是我对jQuery和Javascript的非常业余的理解，但我会感谢任何建设性的帮助。

Answer 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容器）index和value或（对于普通js对象）key和value的参数。 .each()方法在内部调用回调函数，并在每次迭代时插入一次参数。在编写回调时，您可以调用您喜欢的参数，并将其称为i（index的缩写）和el（元素的缩写）。

线条动画：该线实际上只是移动了一点并停止。但是，此操作在step回调中执行，每动画一次调用一次 - 即。在动画完成之前必要的次数。因此，该线与它“粘合”的对象保持一致。

在一行上使用jQuery SVG动画插件的问题

1 个答案: