在线使用jQuery SVG动画插件的问题答案

【问题标题】：Problems using the jQuery SVG animation plugin on a line在线使用jQuery SVG动画插件的问题
【发布时间】：2012-05-18 13:28:27
【问题描述】：

我已经进行了一些探讨，但有关该主题的文档似乎有点稀疏，并且一两件事没有加起来，

我正在尝试获取一条线来跟踪动画元素，我的设计是使用与框元素相同的动画变量作为线的 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，第二个设置为 0，也只有第一个会触发，第二个动画会被跳过。这种效果在这里也可以看到，线条飞到最左边，然后不移动。

我敢肯定，这部分是我对 jQuery 和 Javascript 的极其业余的理解，但如果有任何建设性的帮助，我将不胜感激。

【问题讨论】：

标签： jquery css animation svg

【解决方案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 回调中执行的，它在动画的每个步骤中调用一次 - 即。直到动画完成为止。因此，线跟上它“粘合”到的对象。

【讨论】：

哇，太棒了，谢谢！我需要一段时间才能理解这一切，但我希望我最终能理解。
实际上我能够做到这一点，如果我错了，请纠正我，但是第一个函数会为每个框生成一个画布和一个刺，其中一个点与初始框位置和其他在任意位置。然后第二个函数对盒子进行动画处理，并在速度变量中加入一个额外的函数，以将相关行的 X1 位置更改为盒子在最大速度下的当前位置。我不明白的两件事是el和i的使用，为什么线条的动画不只是移动一点点到框的当前位置并停止？
好的，我会尝试在答案的编辑中解释 - 太长了，无法发表评论。
哦，我明白了，它们是 .each API 所必需的。
Oliver，不是必需的 - 没有义务使用传递给回调的这些参数，但它们始终由 .each() 提供，并且在许多情况下非常方便。