多次显示 JS/snap.svg 动画

Question

我想在我的页面上多次在不同的 div 中显示 this animation，并且不断出现错误。有人知道怎么做吗？

我的 html 看起来像这样：

<svg id="globe" viewBox="0 0 900 900">

我只用了一次就很好用。我将它从 #id 更改为 .class 以查看是否可行，但没有成功。真的不知道 javascript 所以我有点不知道如何解决这个问题。

var world = Snap('#globe'),
lines = [],
circles = [];
for (var i = 50; i >= 0; i--) {
    var x = Math.floor(Math.random()*900)
    var y = Math.floor(Math.random()*900)
    var l = world.line(x, y, 450, 450).attr({
        stroke: "#fff",
        strokeWidth: 2
    });
    lines.push(l)
    var c = world.circle(x, y, 4, 4).attr({
        stroke: "#fff",
        strokeWidth: 3,
        fill: "#333"
    });
    circles.push(c)
};
var sun = world.circle(450,450,100,100).attr({
    fill: "#333",
    stroke: "#fff",
    strokeWidth: 3,
    cursor: "-webkit-grab"
});
function orbit() {
for (var i = 0; i < 22; i++) {
    var x = Math.floor(Math.random()*900)
    var y = Math.floor(Math.random()*900)
    lines[i].animate({
            "x1" : x,
            "y1" : y
    }, 6000, mina.ealastic)
    circles[i].animate({
            "cx" : x,
            "cy" : y
    }, 6000, mina.ealastic)
}
setTimeout(function(){orbit()}, 6000, mina.ealastic);
}
orbit();
function proOrbit() {
for (var i = 22; i < 44; i++) {
    var x = Math.floor(Math.random()*900)
    var y = Math.floor(Math.random()*900)
    lines[i].animate({
            "x1" : x,
            "y1" : y
    }, 9000, mina.ealastic)
    circles[i].animate({
            "cx" : x,
            "cy" : y
    }, 9000, mina.ealastic)
}
setTimeout(function(){proOrbit()}, 10000, mina.easeinout);
}
proOrbit();
function antiOrbit() {
for (var i = 44; i <= 50; i++) {
    var x = Math.floor(Math.random()*900)
    var y = Math.floor(Math.random()*900)
    lines[i].animate({
            "x1" : x,
            "y1" : y
    }, 10000, mina.easeinout)
    circles[i].animate({
            "cx" : x,
            "cy" : y
    }, 10000, mina.easeinout)
}
setTimeout(function(){antiOrbit()}, 10000, mina.easeinout);
}
antiOrbit();
function light() {
    sun.animate({
            r : 110
    }, 1000, mina.backin, dark)
}
function dark() {
    sun.animate({
            r : 40
    }, 1000, mina.backout, light)
}
light();
start = function() {
        this.ox = parseInt(this.attr("cx"));
        this.oy = parseInt(this.attr("cy"));
        console.log("Start move, ox=" + this.ox + ", oy=" + this.oy);
    }
var move = function(dx, dy) {
        this.attr({"cx": this.ox + dx, "cy": this.oy + dy});
for (var i = 0; i <= 50; i++) {
    lines[i].attr({
        "x2": this.ox + dx,
        "y2": this.oy + dy
    })
}
    }
var stop = function(dx, dy) {
        this.animate({
        "cx": 450,
        "cy": 450
    }, 2000, mina.elastic);

for (var i = 0; i <= 50; i++) {
    lines[i].animate({
        "x2": 450,
        "y2": 450
    }, 2000, mina.elastic);
}
    }
sun.drag(move, start, stop)

Answer 1

Snap 可以通过一个元素或一个元素列表来初始化。如果你把你的代码变成一个函数，你可以多次调用它，例如

<svg class='globe' viewBox="0 0 900 900"></svg>
<svg class='globe' viewBox="0 0 900 900"></svg>

var classes = document.getElementsByClassName('globe')
for (var i=0;i<=classes.length;i++) {
  run(classes[i])
}
function run(element)
{
  var world = Snap(element),
  // other code here...
}

这里是a pen of the result

多次显示 JS/snap.svg 动画

Displaying a JS/snap.svg animation multiple times

javascript

animation

svg

snap.svg