Question

更新 - I had asked for help fixing my first attempt at this using the SVG animate plugin which there is now a solution to (follow this link), which effectively answers this question. Though attr() as Jleagle pointed out could also lead to a solution

我使用jQuery动画了一系列css元素，下一步是使用图形直线跟踪每个元素。该行的一端应保持固定，并随元素一起移动。

我认为我可以通过SVG和相应的SVG jQuery插件实现这一目标，但我遇到了很多问题我想知道我是否应该从不同的方向处理它。

下面是带有三个SVG行的动画框的代码，这样你就可以看到我得到的内容。 There is also a JS fiddle of the site

的Javascript

$(function() {
var balloons = [$("#box1"), $("#box2"), $("#box3")];

var lines = [$("#line1"), $("#line2"), $("#line3")];

function act(jqObj, speed, change) {

    jqObj.animate({
        'left' : change
    }, speed).animate({
        'left' : -change
    }, speed, function() {
        act(jqObj, speed, change);
    });

};
for( i = 0; i < balloons.length; i++) {
    var speed = 2000 + Math.random() * 501;
    var change = 10 + Math.random() * 26;

    act(balloons[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="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 id="linePad" 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>

Answer 1

您可以将文本和元素放在同一个标签中，并设置文本的位置然后你不需要修复两个对象的动画希望这没关系。

如何设置线条动画以跟踪移动的CSS元素？

1 个答案: