Informatik :: JavaScript :: Elemente bewegen

Elemente bewegen

Um Elemente wie Grafik, Text, Tabelle u.a. zu bewegen, geht man wie folgt vor:

Im Beispiel wird eine beschriftete Grafik von links unten nach rechts oben bewegt.

Etwas schwieriger gestaltet sich eine Bewegung, die von der Geradlinigkeit abweicht, z.B. eine Sinusbewegung.
Hier muss jeder y-Wert in Abhängigkeit vom x-Wert berechnet werden.
z.B. y=200-100*Math.sin(0.05*x)


Wie kommt man aber zu einer Kreisbewegung?
Die Kreisgleichung lautet: a) x² + y² = r² (Mittelpunkt M(0;0)) bzw. b) (x-xM)² + (y-yM)² =r² (Mittelpunkt M(xM;yM))
Formt man die Gleichung b) nach y um, erhält man:
Angenommen der Mittelpunkt liegt 200 Pixel vom linken Rand und 200 Pixel von oben entfernt und der Radius soll auch 200 Pixel betragen.
Damit erhält man:
Wie man leicht sieht, erhält man für jeden x-Wert 2 y-Werte, so z.B. für x=40 y1=320 und y2=80
Daher sind für die Kreisbewegung unter Verwendung von x-y-Koordinaten (kartesische Koordinaten) 2 Funktionen nötig, eine für den oberen Halbkreis (nennen wir sie oben()) und eine für den unteren Halbkreis (nennen wir sie unten()).
Wenn wir die Kreisbewegung bei 0 Grad beginnen, so ist x=400 und damit y=200.
Wenn wir in mathematisch positiven Sinn drehen, also zunächst den oberen Halbkreis von rechts nach links durchlaufen, erhalten wir z.B. für x=300:
Nun müssen wir nur noch aufpassen, dass wenn der obere Halbkreis zu Ende ist (x=0), der untere Halbkreis von links nach rechts durchlaufen wird.
Wenn man will, kann man nach Beenden des unteren Halbkreises wieder von vorn beginnen.

Wenn du gut beobachtet hast, wirst du festgestellt haben, dass bei 0 Grad und 180 Grad die Bewegung schneller wurde und bei 90 Grad und 270 Grad relativ langsam ablief.

Um eine konstante Bahngeschwindigkeit zu erreichen eignen sich Polarkoordinaten.
Hier gilt: und mit
Damit wird die Funktion bewegen() wesentlich einfacher. Wir brauchen nur noch eine Funktion und müssen nur den Winkel phi um einen konstanten Wert erhöhen (z.B. 1 Grad =Pi/180=0.017)

Aufgabe 1:

Versuche zunächst verschiedene Bewegungen

  1. geradlinig von links nach rechts
  2. geradlinig von rechts unten nach links oben
  3. Sinusbewegung
  4. Kreisbewegung

mit dem in der Datei bewegung.html vorhandenen Container!

Aufgabe 2:

Speichere zunächst die Datei sportler_L.html und die Grafiken sportler.jpg, comaneci.jpg, fraser.jpg, killy.jpg, lewis.jpg, pele.jpg, prost.jpg und spitz.jpg in deinem Homeverzeichnis!
Alle mit den einzelnen Sportlern, sollen sich zunächst außerhalb des Fensters befinden.
Diese Bereiche sind so zu bewegen, dass sie sich geradlinig auf die zentrale Grafik zu bewegen und auf der jeweils entgegengesetzten Seite der Grafik, wie in der gegebenen Datei zu sehen ist, zum Stehen kommen.
Die Bewegung kann einzeln oder gleichzeitig erfolgen.

       

Aufgabe 3:

Eine Laufschrift (Textticker) soll sich in einem einzeiligen Textfeld und in der Statuszeile von rechts nach links bewegen.

Hinweise: