Animationen

Bei der Verwendung von Animationen muss WebDevice.Timer.Enable=true gesetzt werden. Jeder Animator besitzt die Eigenschaften und Methoden:
1. Device : die WebDevice, in der der Animator angezeigt wird.
2. Repeating : gibt an, wie oft die Animation wiederholt wird. Ein Wert von -1 wiederholt die Animation unendlich oft.
3. CurrentTime : gibt die Zeit seit Start der Animation in Millisekunden an. (Leseeigenschaft).
4. Duration : ist die Dauer der Animation in Millisekunden.
5. StartDelay : ist die Verzögerung zum Beginn der Animation.
6. Start(): diese Methode wird aufgerufen, um die Animation zu starten.
7. StartAnimate: ein Event, das zu Beginn einer Animation aufgerufen wird.
8. Animate: ein Event, das während der Animation aufgerufen wird.
9. EndAnimate: ein Event, das am Ende einer Animation aufgerufen wird.

Beispiel für eine Animation in WebGL:

Folgende Animationen sind definiert:

ColorAnimator

Besizt die Felder FromColor und ToColor.
Während der Animation wird zwischen diesen linear interpoliert und aus Value kann diese Farbe ausgelesen werden.

MaterialAnimator

Besizt die Felder FromMaterial und ToMaterial.
Während der Animation wird zwischen diesen linear interpoliert und aus Value kann das interpolierte Wert ausgelesen werden.

LinearAnimator

Besizt die Felder vom typ float FromValue und ToValue.
Während der Animation wird zwischen diesen linear interpoliert und aus Value kann das interpolierte Wert ausgelesen werden.

xyzAnimator

Besizt die Felder vom typ xyz From und To.
Während der Animation wird zwischen diesen linear interpoliert (entlang einer Geraden ) und aus Value kann der interpolierte Punkt ausgelesen werden.

TransformAnimator

Besizt die Felder vom typ Matrix FromTransFormation und ToTransFormation.
Während der Animation wird zwischen diesen interpoliert und aus Value kann die interpolierte Matrix ausgelesen werden.

Daneben gibt es noch eine sehr hilfreiche Klasse:

AnimatorSet

Sie besteht aus einer Liste von Animatoren und ist selbst ein Animator. Diese Liste wird abgearbeitet und kann gemäß den allgemeinen Eigenschaften von Animatoren z.B.: unenich oft wiederholt werden.
Ein Animator A kann einfach mit Set.add(A) in ein Set eingebettet werden.

Beispiel für ein Set von Animationen in WebGL:

<html>
<body>
<canvas id="myCanvas" width="600" height="400">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="bridge.js"></script>
<script src="WebDrawing3d.js"></script>
<script src="Classes.js"></script>
<script>   // das HTML Element vom canvas anfordern.
 var canvas = document.getElementById("myCanvas");
 var WebDevice = new Device(canvas);
 WebDevice.BackGround=Color.WhiteSmoke;
 WebDevice.Timer.Enable=true;

function AnimateMaterial1() {
        WebDevice.Material = MaterialAnim1.Value;
    }
    function AnimateMaterial2() {
        WebDevice.Material = MaterialAnim2.Value;
    }
    
    function Enddraw() {
        WebDevice.Paint = null;

}
     function draw() {
        WebDevice.drawSphere(new xyz(3,2,4), 4);

}
     WebDevice.Paint = draw;
   
    var MaterialAnim1 = new MaterialAnimator();
    MaterialAnim1.Device = WebDevice;
    MaterialAnim1.FromMaterial = Material.Gold;
    MaterialAnim1.ToMaterial = Material.Chrome;
    MaterialAnim1.Animate = AnimateMaterial1;

var MaterialAnim2 = new MaterialAnimator();

MaterialAnim2.Device = WebDevice;
    MaterialAnim2.FromMaterial = Material.Chrome;
    MaterialAnim2.ToMaterial = Material.Gold;
    MaterialAnim2.Animate = AnimateMaterial2;
    //MaterialAnim.StartDelay = 10000;
    //MaterialAnim.SetDuration(20000);
    var SetAnim = new AnimatorSet(WebDevice);
    //SetAnim.Millisec = 200000;
    SetAnim.Device = WebDevice;
    //--------------------------
    //SetAnim.StartDelay = 5000;
    SetAnim.add(MaterialAnim1);
    SetAnim.add(MaterialAnim2);
    SetAnim.EndAnimate = Enddraw;
    SetAnim.Start();
 </script>
 </body>
 </html>