Kurz zum Verständnis bitte Java und JavaScript nicht vermischen, das sind grundverschiedene Sachen, gemeinsam haben sie lediglich Teile des Namens :D JavaScript ist wie der Name sagt eine Skriptsprache für z.B. Browser, Java hingegen ist eine Hochsprache
Hier mal ein kleiner kommentierter Ansatz:
- Code: Alles auswählen
<script type="text/javascript">
/* Bewegt Objekt mit der ID "id" um (deltaX/deltaY) */
function moveTo(id, deltaX, deltaY) {
var obj = document.getElementById(id);
/* Aktuelle position herausfinden */
var currentX = parseInt(obj.style.marginLeft);
var currentY = parseInt(obj.style.marginTop);
/* Hier am besten noch Schritte einfuegen, d.h. jede Zeiteinheit ein Pixel bewegen bis gewuenschte Position erreicht wurde */
obj.style.marginLeft = (currentX + deltaX) + "px";
obj.style.marginTop = (currentY + deltaY) + "px";
}
window.onload = function () {
moveTo("butterfly",100,100);
moveTo("butterfly",100,100);
moveTo("butterfly",-100,-100);
moveTo("butterfly",-100,-100);
}
</script>
<img src="butterfly.gif" id="butterfly" alt="Der Schmetterling" />
Das ist jetzt freilich eine sehr einfache Version, der Schmetterling würde hier lediglich von einem Punkt verschwinden und in einem anderen Auftauchen, es wäre also keine Richtige Bewegung von A nach B sonder eher ein Biemen :D Deshalb sollte man die Verschiebung in viele Schritte aufteilen also X Pixel pro Y Zeit (z.B. Mit Hilfe der setTimeout-Funktion).
Den Ansatz hab ich dir nur der Vollständigkeit halber geliefert, die klügere Wahl wäre wohl eine Bibliothek wie jQuery es ist zu verwenden was die Sache extrem vereinfachen würde:
- Code: Alles auswählen
$.ready(
function () {
$.("butterfly").animate(
{
left: '+=100',
top: '+=100'
},
1000,
'linear'
);
}
);
Hier wird, sobald die Seite geladen wird das Objekt mit der ID "butterfly" animiert. Die Parameter der Animation kannst du als Argumente an die Funktion "animate" übergeben. Hier wird das Objekt z.B. um 100 nach rechts und 100 nach unten verschoben.
Das zweite Argument (hier: 1000) ist die Dauer des Effektes in Millisekunden, für uns also die Antwort auf die Frage wie lange der Schmetterling von A nach B brauchen soll. Der letzte Parameter ist hier sozusagen die Art der Bewegung, hier habe ich linear verwendet, da du wenn du mehrere Bewegungen hintereinander machst der Schmetterling zwischendrin langsamer werden wuerde was glaube ich nicht gewünscht ist, kannst dir ja überlegen.
Jetzt kannst du damit den Schmetterling schön bewegen, doch nur geradlinig. Wenn du Kurven drin haben willst dann denk dir eine schöne Sinus/Cosinus-Funktion aus :D
Die Dokumentation (und Beispiele) zur jQuery Funktion findest du übrigens unter
http://api.jquery.com/animate/ .
Ich hoffe ich konnte dir einen verständlichen Einstieg vermitteln, wenn du dich ein bisschen reinfuchst sollte es nicht so schwierig sein, wir stehn dir ja bei
Viele Grüße,
Guillermo
... Nun denn, angenommen ich habe meinen fertigen Schmetterling als Gif fertig, wie stell ich das dann mit Java an? - Sorry, nicht mein Fachgebiet. Ich bin eher der Grafiker