© 2006 Elearning Gemeindenblick GEMEINDENBLICK Bern   DHTML Kurs - Dynamische Webseiten
 

Kurs 5.1  DHTML 
Projekt - Ein Weihnachtsmärchen 2006


Teil 1 - Das universelle Animations-Team

Kurze Einleitung

Während der ersten 4 Teile des Kurses konnte etwas Wissen gesammelt werden. Es ist damit doch schon 
einiges möglich zu machen. Mit abändern oder ausbauen der Befehle und Programmier-Routinen können
interessante Projekte nun geplant und entwickelt werden.

Wir hatten bisher Objekte angezeigt oder versteckt, sie in verschiedener Reihenfolge gestapelt, oder über 
den Bildschirm bewegt.

Bei einem umfangreichen Projekt wie dieses Weihnachtsmärchen, muss man sich einmal eine Gesamtansicht 
schaffen, 
- die Bühne, Ort der Aufführung
- über die Geschichte/ Abfolge der Handlungen
- die Objekte die eingeplant sind
Die Bühne, eine fest abgegrenzte Fläche mit übergelegten Deck-Schicht. Ein Hintergrundbild (Winterlandschaft), 
im Vordergrund ein Tannenbaum.


Das universelle Animations- Duo

Der heimliche Hauptdarsteller ist ein neues universelles Animations/Funktions(-Team).
Wir erinnern uns, die Animation eines Objektes geschieht durch wiederholtes Aufrufen der... 

Funktion moveto die ein Objekt schlussendlich an einen neuen Standort bringt. Dabei kommt es zu 
fortlaufenden Neu-Zuweisungen der laufend addierten Standortskoordinaten bis zum Erreichen 
des Ziels, das mittels Zielkoordination, zum voraus festgelegt wird, und laufend in der nächsten... 

Funktion anim angemeldet und geprüft wird, wenn das Ziel erreicht wird. Universell wird diese Funktion, 
da auch noch weitere Informationen mitverschickt werden können. Die beiden Funktionen können nun 
beliebig oft von verschiedenen Objekten benutzt werden, und lassen damit den Programmiercode nicht 
übergross werden. Ebenfalls nicht nötig ist eine Berechnungs-Anmeldung wie im vorangegangenem 
Beispiel. Hat somit nur Vorteile. 


Beispielaufruf

aufgerufen:                    anim("wolke1",0, 0, 10, 1, 0, 900);
entgegengenommem:  function anim(wer, ystep, miny, maxy, xstep, minx, maxx) {

- der Name des Objekts (wer)

- ystep = im y-Achse (senkrecht), Schrittwert (px) pro Aufruf
- miny  =  "     "    "       " , Startwert (top)
- maxy  =  "    "     "       " , Zielwert (top)

- xstep = im x-Achse (waagrecht), Schrittwert (px) pro Aufruf
- minx  =  "     "    "       " , Startwert (left)
- maxx  =  "    "     "       " , Zielwert (left)  


In der Funktion eingebaut sind:
- 2.Anmeldung der Start-Wert Variablen, 
   Wertübergabe des Startwertes an eine Laufwert-Variable (my, mx). 

- Funktionsaufruf an die Bewegungs-Routine/Funktion moveto

- addieren der y- x-Werte mit y- xstep

- die IF Bedingung  (läuft solange bis ein Bedingung stimmt) &&= hier beide!

- im setTimeout() kommt es nun zu einer neuen Zusammensetzung des Variablen-Packets, das
  dann fortlaufend mitversendet wird mit dem eingestellten Wert (hier=60) an anim() (...an sich selber).


my = miny;
mx = minx;   

moveto (wer,my,mx);

my = my+mystep;
mx = mx+mxstep;

if (my ! =maxy) && (mx !=maxx)  = beide, y-Achsen-/ x-Achsen-Wert müssen ungleich sein 
{
setTimeout('anim("'+wer+'",'+ystep+','+my+','+maxy+','+xstep+','+mx+','+maxx+')',60);
}   ! ['] Einzeichige und Doppelzeichen- ["] Anführungszeichen müssen sich immer abwechseln ('ani(" 'wer' ")
} 

function moveto(wer,mx,my)
{

obj = document.getElementById(wer).style;
        
      obj.top =mx;
      obj.left =my;
}


Was noch wichtig ist!

Bei senkrecht-/waagrechten Bewegungen bleibt immer der dementsprechende STEP-Wert =0, bei
schräg-/ diagonalen Bewegungen haben beide Step-Positionen einen Wert. Zu achten ist noch das 
der Zielwert/ Endwert teilbar ist mit den (Step)Schrittwerten und Anfangswert. Sonst wird die 
Bedingung ja nie erfüllt, was zu einer Endlaufschlaufe führen würde. Weiter ist noch eine Werte-
Änderung nötig in der Achse mit dem STEP=0 Wert, weil sonst die Bedingung augenblicklich 
erfüllt ist und das Objekt sich somit nicht bewegen kann, ein rein theoretischer Wert, da kein 
STEP-(Wert=0) angeben ist, bewegt sich das Objekt ja eh nicht.

Wieso diese etwas unverständliche Handhabung?
Wäre die IF-Abfrage nicht so definiert, würden in den meisten Fällen Schrägbewegungen vorzeitig
beendet. (mit || würde es genügen wenn eine Bedingung zutreffen würde)    



Beispiel Wolkenanimation








Start Wolken Animation














 
 

© Elerning Gemeindenblick Bern Switzerland