Animation mehrerer Objekte

[jack]

Guten Morgen zusammen,

ich bräuchte mal einen Tipp für ein konzeptionelles Problem.

Ich habe ein Objekte mit Hilfe von JS animiert:

function Animal() {
        this.vor = this.forward = function(dDistance) {
                this.doneDistance = 0;
                this.distance = dDistance;
                setTimeout("window."+this.divId+".nextStep()", 1);
        };

this.nextStep = function(dStep) {
                this.doneDistance += curDistance;
                this.posX = this.posX+deltaX;
                this.posY = this.posY+deltaY;
                this.draw();

if (this.doneDistance<this.distance) {
                        setTimeout("window."+this.divId+".nextStep("+this.step+")", 0);
                }

};
}

Animiert werden wird das Objekt durch zB folgende Befehlssequenz:

var a = new Animal();
a.vor(50)
a.vor(100)

Jetzt habe ich nur das Problem, das zwar mit a.vor(50) gestartet wird, dann aber gleich a.vor(100) ausgeführt wird. a bewegt sich also nur um 100 vor und nicht um 150. Das liegt an der setTimeout-Methode.

Jetzt könnte man das ganze so ändern, dass die Animation mit Hilfe einer while-Schleife abläuft, so dass nach a.vor(50) erstmal das vollständig abgearbeitet wird und danach die nächste Zeile gelesen wird.

Dann habe ich aber das Problem, dass ich keine zwei Animals gleichzeitig laufe lassen kann:

var a = new Animal();
a.vor(50)

var b = new Animal();
b.vor(50)

Gleichzeitig ginge nur, dass ich am Anfang alle Objekte generiere und diese dann gleichzeitig mit Hilfe einer Schleife bewege. Allerdings weiß ich am Anfang noch gar nicht die Anzahl der Objekte.

[wahsaga]

hi,

Jetzt habe ich nur das Problem, das zwar mit a.vor(50) gestartet wird, dann aber gleich a.vor(100) ausgeführt wird. a bewegt sich also nur um 100 vor und nicht um 150. Das liegt an der setTimeout-Methode.

Dazu sollte dir diese Diskussion einen Ansatz bieten.

Dann habe ich aber das Problem, dass ich keine zwei Animals gleichzeitig laufe lassen kann:

Packe beim Erstellen eines solchen Objektes alle "Bewegungsanweisungen" in ein Array, wo sie dann sukzessive - über setTimeout oder setInterval - abgearbeitet werden.

gruß,
wahsaga

[jack]

Dazu sollte dir diese Diskussion einen Ansatz bieten.

Witzig. Da hat schon jemand meine Arbeit gemacht. Ich hatte die gleiche Idee nach dem ich Kara bei der ETH gesehen habe.

Packe beim Erstellen eines solchen Objektes alle "Bewegungsanweisungen" in ein Array, wo sie dann sukzessive - über setTimeout oder setInterval - abgearbeitet werden.

Brilliante Idee. Allerdings muss ich erst noch nachschauen, ob alles, ws ich damit machen will auch umsetzen lässt. Da habe ich dann bei so etwas  wie

function zeichnePythagorasbaum(stufe, seite, alpha){
 var katheteA=seite*Math.sin(alpha/180.0*Math.PI);
      var katheteB=seite*Math.cos(alpha/180.0*Math.PI);
      if (stufe>0){
  quadrat(seite);     // Start links unten
            t.stiftHoch();      // mit Blick nach oben
            t.vor(seite);
            t.drehen(alpha);
            t.stiftRunter();     // linke obere Ecke
            zeichnePythagorasbaum(stufe-1, katheteB, alpha);
            t.stiftHoch();
            t.drehen(-90);
            t.vor(katheteB);
            t.stiftRunter();
            zeichnePythagorasbaum(stufe-1, katheteA, alpha);
            t.stiftHoch();
            t.drehen(-90);
            t.vor(katheteA);
            t.drehen(-alpha);    // rechte obere Ecke
            t.vor(seite);       // zurueck nach links unten
            t.drehen(-90);
            t.vor(seite);
            t.drehen(-90);
            t.stiftRunter();
      }
}

schon so meine Bedenken.

Ich nehme mal an, dass der Ansatz mit dem Array für einfache Fälle genügt. Aber es mir genügt...?

Ich werde auf alle Fälle mal darüber nachdenken. Vielen Dank.