1

我已经做了一些探讨，但是关于这个主题的文档似乎有点稀疏，而且一两件事没有加起来，

我正在尝试获取一条线来跟踪动画元素，我的设计是使用与框元素相同的动画变量作为线的 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 的极其业余的理解，但我将不胜感激任何建设性的帮助。

4

1 回答 1

1

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
        });
    })();
});

See DEMO.

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.

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 .

EDIT - explanatory notes:

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 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".

于 2012-05-11T02:11:48.030 回答