Objekt Bewegung in Javascript

[Dominik]

Hallo zusammen,
bin ein kleiner hobbyprogrammierer und habe folgendes Problem:

Soll für nen freund ein javascript schreiben, bei dem mehrere jpg's sich auf verschiedenen vordefinierten Routen (mit Koordinaten.. sprich wegpunkten) quer über den screen bewegen und sich dann auf einem Platz sammeln.. langsam transparent werden und verschwinden.
Optional noch mit einer schleife rund um die mausposition..

Nachdem ich leider nur für objecte in style fündig wurde.. und das auch meist nur für ein movement von start to endpoint, versuche ich jetzt mal mein Glück hier.. :)

Das ganze sollte noch dazu recht flüssig aussehen..

Habt ihr irgendwelche Ideen?

Lg, Dom

[Multi]

und das auch meist nur für ein movement von start to endpoint,

Ja und? Ein Pfad besteht doch auch nur aus mehreren Start- und Endpunkten.
Also nimm das, was du hast und gibt ihm einfach mehrere ANfangs- und Endpunkte.

[Dominik]

Würde ich ja gerne ;)
Mir fehlt allerdings das nötige Wissen...
Deswegen wollte ich wissen, ob ihr vielleicht so eine Animation in tween-form als freescript kennt, oder vielleicht ein ebook, wo diese art von movement beschrieben wird.
Lg

und das auch meist nur für ein movement von start to endpoint,

Ja und? Ein Pfad besteht doch auch nur aus mehreren Start- und Endpunkten.
Also nimm das, was du hast und gibt ihm einfach mehrere ANfangs- und Endpunkte.

[Felix Riesterer]

Lieber Dominik,

Habt ihr irgendwelche Ideen?

ja.

Liebe Grüße,

Felix Riesterer.

[Dominik]

Hi Felix,

werde aus dem Link leider nicht ganz schlau..
Objekte sind bei mir alle statisch ohne koordinatenorientierte Bewegung..
Lg, Dominik

Lieber Dominik,

Habt ihr irgendwelche Ideen?

ja.

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo Dominik,

Objekte sind bei mir alle statisch ohne koordinatenorientierte Bewegung..

willkommen in der schönen Javascript-Welt. Nicht alle Besucher einer Seite habe Browser, die die benötigten Methoden unterstützen und nicht alle User heben Javascript eingeschaltet. Offensichtlich gehörst du auch dazu. Bei mir jedenfalls ist die Seite ja mal sowas von dynamisch ...

@Felix: Da hast ja schon eher ein abschreckendes Beispiel programmiert, so auf dem Niveau der Seite von Franz: bunt und dynamisch, leider oder auch zum Glück (?) nicht mehr online.

Gruß, Jürgen

[Dominik]

Hy Jürgen,

vielen Dank für's willkommenheißen :)

Bei mir funktionierts mehr oder weniger auch.. wenn der button gleich zig male gedrückt wird ;)

Allerdings hab ich jetzt.. unter ständigen drücken... nicht das gefunden, was ich suche...
Brauche einfach einen Ansatz für .. object bei position x sowieso y sowieso erstellen.. timeline .. goto x.. y.. timeline ... goto x.. y..
sagen wir mal ganz einfach.. object bei x0,y0 erstellen in 5sec solls zu x200,y200 sliden, dann in 5sec weitersliden zu x500,y100 .. etc.
und das ganze.. in nicht geradliniger bewegung mit stops bei den definierten koordinaten, sondern flüssig und mit leichter ellipsenbewegung.

Funktioniert das so überhaupt in javascript oder muss ich auf flash zurückgreifen (was ich ja eigentl. vermeiden wollte ;) )

Cheers, Dominik

Hallo Dominik,

Objekte sind bei mir alle statisch ohne koordinatenorientierte Bewegung..

willkommen in der schönen Javascript-Welt. Nicht alle Besucher einer Seite habe Browser, die die benötigten Methoden unterstützen und nicht alle User heben Javascript eingeschaltet. Offensichtlich gehörst du auch dazu. Bei mir jedenfalls ist die Seite ja mal sowas von dynamisch ...

@Felix: Da hast ja schon eher ein abschreckendes Beispiel programmiert, so auf dem Niveau der Seite von Franz: bunt und dynamisch, leider oder auch zum Glück (?) nicht mehr online.

Gruß, Jürgen

[JürgenB]

Hallo Dominik,

Funktioniert das so überhaupt in javascript oder muss ich auf flash zurückgreifen (was ich ja eigentl. vermeiden wollte ;) )

Felix' Beispiel zeigt, das Animationen mit Javascript möglich sind. Dazu brauchst du Wissen über:

• Grundkenntnisse in HTML und CSS
    vor allem das Positionieren von Elementen
• Grundlagen von Javascript
    Variablen, Schleifen, Abbfragen ...
• Arrays
    für die Koordinaten, evtl. auch Objekte
• evtl. mathematische Funktionen, wie z.b. Sinus/Cosinuns und Exponentialfunktion
• die Methoden setTimeout / setIntervall
    für die Animation und deren Tempo
• Zugriff auf das style-Objekt
    um die "Puppen tanzen zu lassen"
• bestimmt habe ich noch was vergessen

Gruß, Jürgen

[JürgenB]

Ein Besuch bei Struppi lohnt sich meistens:

Tweening – Effekte mit Javascript

Gruß, Jürgen

[Dominik]

Hey, super :)
Das hilft mir schonmal ein großes stück weiter.
Vom Programmieren her sollts nicht so schlimm sein, nachdem ich doch einiges mit vba am hut hab..
Mal schaun, was ich daraus bastln kann.
Danke dir vielmals.

Lg

Ein Besuch bei Struppi lohnt sich meistens:

Tweening – Effekte mit Javascript

Gruß, Jürgen

[Felix Riesterer]

Lieber JürgenB,

@Felix: Da hast ja schon eher ein abschreckendes Beispiel programmiert, so auf dem Niveau der Seite von Franz: bunt und dynamisch, leider oder auch zum Glück (?) nicht mehr online.

man muss es mit den Animationen ja nicht übertreiben (wie in meinem Beispiel), aber wenn Du die anderen Beispielseiten angeschaut hast, dann ist Dir sicher aufgefallen, dass man die Effekte gezielt (mit Klassennamen bei den jeweiligen Elementen) hinzufügen kann.

Das JavaScript ist nur eine Art Framework um Grußkarten mit Animationen zu "würzen", wenn man das will. Leider haben sich meine Schüler bisher noch nicht für dieses Projekt interessiert, sodass mein Animator-Script bisher nur als "proof-of-concept" sein Schattendasein fristet.

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo Felix,

ich sehe gerade, dass ich bei meiner Antwort den ":)" vergessen habe. Ich finde es auch reizvoll, zu testen, was mit Javascript alles möglich ist. Ob es dann umgesetzt wird, ist eine andere Sache.

Gruß, Jürgen