Jesteś na dobrej drodze dzięki Twojemu obiektowi ball (chociaż nazwałbym go balls). Do dynamicznego tworzenia elementu circle to zrobić:
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
Następnie należy ustawić jego atrybuty (circle.setAttribute) i dołączyć go do elementu id="Sun2".
Oto makeBall funkcja, która robi to na podstawie obiektu specyfikacji mijamy, w którym ma dwie podobiekty: element, który definiuje element, a animation który definiuje animację:
function makeBall(spec) {
// Create the element
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set its various attributes
["id", "cx", "cy", "r", "class"].forEach(function(attrName) {
circle.setAttribute(attrName, spec.element[attrName]);
});
// Add it to the sun
document.getElementById("Sun2").appendChild(circle);
// Remember its animation settings in `ball`
ball[spec.element.id] = spec.animation;
}
Następnie użyć to tak:
makeBall({
element: {id: "blue", class: "st1", cx: "375.4", cy: "289.7", r: "10"},
animation: {speed: 1.2, spin: 100, side: 0.0}
});
ostatni kawałek jest zastąpienie ożywione z czymś, co działa dynamicznie z właściwościami wewnątrz ball:
function animate() {
Object.keys(ball).forEach(function(id) {
rotationball(id);
});
}
Oto przykład usuwania blue i red ze znacznikami i dodając je dynamicznie, kiedy zacząć. Ja również pozbyć objectX i sprawiają, że rotacja zawsze być w stosunku do black i związał się kilka pól do wykorzystania podczas dodawania nowej piłki:
var ball = {};
makeBall({
element: {id: "blue", class: "st1", r: "10"},
animation: {speed: 1.2, spin: 20, side: 0.0}
});
makeBall({
element: {id: "red", class: "st2", r: "10"},
animation: {speed: 1.2, spin: 40, side: 120.0}
});
makeBall({
element: {id: "yellow", class: "st3", r: "10"},
animation: {speed: 1.2, spin: 60, side: 240.0}
});
function makeBall(spec) {
// Create the element
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set its various attributes
["id", "cx", "cy", "r", "class"].forEach(function(attrName) {
if (spec.element[attrName]) {
circle.setAttribute(attrName, spec.element[attrName]);
}
});
// Add it to the sun
document.getElementById("Sun2").appendChild(circle);
// Remember its animation settings in `ball`
ball[spec.element.id] = spec.animation;
}
function addObject() {
// Create a spec to use with makeBall from the fields
var spec = {
element: {
id: document.getElementById("new-id").value,
class: document.getElementById("new-class").value,
r: parseFloat(document.getElementById("new-r").value)
},
animation: {
speed: parseFloat(document.getElementById("new-speed").value),
spin: parseFloat(document.getElementById("new-spin").value),
side: parseFloat(document.getElementById("new-side").value)
}
};
// Some minimal validation
if (!spec.element.id || !spec.element.r || !spec.animation.speed || !spec.animation.spin || isNaN(spec.animation.side)) {
alert("Need all values to add a ball");
} else if (ball[spec.element.id]) {
alert("There is already a ball '" + spec.element.id + "'");
} else {
// Do it!
makeBall(spec);
}
}
function rotation(coorX, coorY, object) {
object.side += (1.0/object.speed);
var ang = object.side * 2.0 * Math.PI/180.0;
var r = object.spin;
return {
x: Math.cos(ang) * r - Math.sin(ang) * r + coorX,
y: Math.sin(ang) * r + Math.cos(ang) * r + coorY
};
}
function rotationball(circle) {
var x, y, x_black, y_black, e, newpos, black;
// We always rotate around black
black = document.getElementById("black");
// Get this circle and update its position
e = document.getElementById(circle);
x_black = parseFloat(black.getAttribute("cx"));
y_black = parseFloat(black.getAttribute("cy"));
newpos = rotation(x_black, y_black, ball[circle]);
e.setAttribute("cx", newpos.x);
e.setAttribute("cy", newpos.y);
}
function animate() {
Object.keys(ball).forEach(function(id) {
rotationball(id);
});
}
var animateInterval = setInterval(animate, 1000/60);
.st0 {
fill: black;
}
.st1 {
fill: blue;
}
.st2 {
fill: red;
}
.st3 {
fill: yellow;
}
.st4 {
fill: orange;
}
<div>Add ball:
<label>
ID: <input type="text" id="new-id" value="newball">
</label>
<label>
R: <input type="text" id="new-r" value="10">
</label>
<label>
Speed: <input type="text" id="new-speed" value="1.2">
</label>
<label>
Spin: <input type="text" id="new-spin" value="80">
</label>
<label>
Side: <input type="text" id="new-side" value="0.0">
</label>
<label>
Class: <input type="text" id="new-class" value="st4">
</label>
<button type="button" onclick="addObject()">
Make Ball
</button>
</div>
<div class="spinning">
<svg xmlns="http://www.w3.org/2000/svg" id="solly" viewBox="0 0 1000 600">
<g id="Sun2">
<circle id="black" class="st0" cx="500" cy="300.8" r="10" />
</g>
</svg>
</div>
marginesie: Możesz spojrzeć na używanie requestAnimationFrame zamiast setInterval.
Nota boczna 2: Z tego co wiem, to, co nazwałaś spin, jest w rzeczywistości odległością od środka (np. Promień okręgu, który każda piłka opisuje wokół czarnej kulki).
Pełna treść pytania musi być ** na ** Twoje pytanie, nie tylko powiązane. Linki gniją, sprawiając, że pytanie i jego odpowiedzi stają się bezużyteczne dla ludzi w przyszłości, a ludzie nie powinni wychodzić z witryny, aby ci pomóc.Umieść [mcve] ** w ** pytaniu, najlepiej używając Fragmentów stosu (przycisk '<>' przycisk paska narzędzi), aby umożliwić jego uruchamianie. Więcej: [* Jak zadać dobre pytanie? *] (/ Help/how-to-ask) –
Wygląda na to, że zessx był na tyle uprzejmy, aby to naprawić. –