✔ Animation innerhalb Zeitspanne X

versuch13

versuch13

Erfahrenes Mitglied
Hi, ich grübel mittlerweile schon ziemlich lange daran, wie es möglich
ist eine Animation mit setInterval innerhalb einer bestimmten Zeitspanne
ablaufen zu lassen.

Ich habe hier mal ein einfaches Beispiel angefertigt.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Animation</title>
<style type="text/css">
#test {
    background:#f00;
    padding:30px;
    position:relative;
}
</style>
<script type="text/javascript">
    
    function initAnimation(element, duration) {
        this.element = document.getElementById(element);
        this.position = this.element.style.top;
        this.to = 120;
        this.duration = duration;
        this.timer = setInterval(steps ,30);
    }

    function steps() {
        this.position++;
        if(this.position >= this.to) {
            clearInterval(this.timer);
        }
        animate();
    }
    
    function animate() {
        this.element.style.top = this.position +'px';
    }

</script>
</head>
<body>
    <button onclick="initAnimation('test', 1000)">animieren</button><br /><br />
    <div id="test">Test</div>
</body>
</html>


Jetzt möchte ich als "duration" gerne eine Zeitspanne in Sekunden oder
Millisekunden übergeben, sagen wir hier im Beispiel jetzt am besten mal
eine Sekunde.
Ich müßte also irgendwie "this.position" nicht jeweils um +1 erhöhen, sondern
in diesem Beispiel um +12. Also, wie kann ich jetzt "this.position" so berechnen
dass die Animation bis zu "this.to" innerhalb der angebenen Zeitspanne durchlaufen
ist?


Danke schon mal. Grüße
 
Rein rechnerisch sollte es so gehen:
Code: 
positionsänderung=((endposition-startposition)/(animationsdauer/animationsinterval))
Bsp:
Startposition:0
Endposition:120
Animationsdauer:1000
Animationsinterval:50
....ergäbe dann 6(Pixel)

Die Funktion wird in 1sek 20x ausgeführt,...20x6=120


In deinem Bsp. wird das allerdings nicht hinhauen, weil this.position undefiniert ist(das Element besitzt Eingangs keinen top-style)
 
Hey vielen Dank. Ich hab teilweise leider mit den einfachsten mathematischen
Rechnungen so meine Probleme. So funktioniert dass schon mal ganz gut.

Ich gebe per alert() hier zum testen mal die vergangen Zeit aus, das kommt nicht
immer ganz hin und liegt ab und zu etwas über der angebenen Zeit, allerdings ist
das nicht so wild.

Nur bin ich da ja jetzt an den Interval von 50 Millisekunden gebunden, denn wenn
ich einen niedrigeren angebe, zum Beispiel 10, dann haut dass nicht mehr ganz
hin.

Code: 
    function initAnimation(element, duration) {
        if(this.timer != null) { return };
        this.element = document.getElementById(element);
        this.position = 0;
        this.from = 0;
        this.to = 120;
        this.duration = duration;
        this.interval = 50;
        this.timer = setInterval(steps, this.interval);
        this.startTime = (new Date).getTime();
    }

    function steps() {
        this.position += ((this.to-this.from)/(this.duration/this.interval));
        if(this.position >= this.to) {
            var time  = (new Date).getTime();
            alert(time-this.startTime);
            clearInterval(this.timer);
            this.timer = null;
        }
        animate();
    }
    
    function animate() {
        this.element.style.top = this.position +'px';
    }

Dazu vielleicht noch eine Idee? Danke aber schon mal für den Ansatz.

Grüße
 
Die Genauigkeit von JS ist da leider recht beschränkt beim zeitlichen Aufruf der Funktionen.
Es dürfte primär von der CPU-Auslastung abhängen,tippe ich mal.

Du kannst zum Test ja mal folgendes probieren, dann siehst du, was ich meine:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
x=0;
y=0;
function testinger()
{
  if(x>100)
    {
      clearInterval(s);
      return;
    }
  x++;
  
  z=new Date().getTime();
  if(y)
    {
      document.getElementsByTagName('body')[0].innerHTML+=(z-y)+' ms<br>';
    } 
  y=z; 
}

window.onload=function()
{
  s=setInterval('testinger()',30)
}
//-->
</script>
</head>
<body>
</body>
</html>
 
Sven Mintel hat gesagt.:
Die Genauigkeit von JS ist da leider recht beschränkt beim zeitlichen Aufruf der Funktionen.
Zum Vergrößern anklicken....


Ok, habe ich jetzt auch schon vermutet, und da es sich ja nur um ein paar Millisekunden
handelt, ist dass ja auch weiter nicht tragisch. Danke für das Beispiel, das macht es ganz
gut deutlich.
Nur die Sache mit dem 50 ms Interval stört mich etwas, da ich ihn gerne niedriger
ansetzen würde, so sieht man dass noch etwas ruckeln.

Richtig ärgerlich ist, dass ich vorgestern im Netz über ein ich denke recht gutes Tutorial zum
animieren mit Javascript gesolpert bin, aber vergessen habe die Seite zu bookmarken.
 
Du bist doch nnicht an die 50ms gebunden....das war nur ein Rechenbeispiel von mir.
Du kannst den Intervall auch niedriger wählen :)
 
Sven Mintel hat gesagt.:
Du bist doch nnicht an die 50ms gebunden....das war nur ein Rechenbeispiel von mir.
Du kannst den Intervall auch niedriger wählen :)
Zum Vergrößern anklicken....

Ah, so hatte ich dass auch verstanden, anfangs, allerdings ist mir beim
testen dann aufgefallen dass die Ungenauigkeit der Zeitspanne teilweise
bis zu 700-800 ms beträgt wenn ich den Interval verringere.
Aber ok, dann passt das so, danke schön!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück