Problems using the jQuery SVG animation plugin on

2019-08-08 13:17发布

站内问答 / jQuery
1526 1 4

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,

I'm trying to get a line to track an animated element, my design for this is to use the same animation variables as on the box element for the X1 co-ordinate of the line,

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

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.

The reason I'm not using '+=change' is that '+=anything' breaks the code for some reason, even a generic numerical value.

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.

I'm sure this is partly my extremely amateur understanding of jQuery and Javascript, but I would appreciate any constructive help.

1条回答
对你真心纯属浪费
2楼-- · 2019-08-08 13:35

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)