Animationen

[Napofis]

Hallo Tutories,

in der letzten Zeit schreib ich viele Animationen mit JS um Menüs zu Animieren und Optisch etwas aufzuwerten.
Das alles klappt super(auch im IE ) nur bei bewegungen hab ich so kleine Probleme. Die Bewegungen sind nicht immer so flüssig wie sie sein sollten.

Ich nutze meistens eine Fuktion die sich mit setTimeout() immer wieder selbst aufruft bis die Ani fertig ist.
Die Werte Speichere ich alle in einem Object.

Nun meine Frage hat einer Tipps für mich, um die Laufzeit von Animationen zu verbessern?
So das die Bewegungen und Farbübergänge Flüssiger werden?

Ich hab zwar nen JavaScript Kompendium vor mir liegen aber die machen es genauso.

 

[Nord-Süd-Richtung]

Hi
ich nutze von Zeit zu Zeit JavaScript um Menüs aufgleiten zu lassen. Um den Slideeffeckt zu erzielen, muss man ein bisschen mit der Zeit und den Pixelwerten ausprobieren, ich habe beispielsweise immer den marginLeft wert erhöht. Dabei muss man halt gucken, umwieviel Pixel das pro x milisekunden bewegt werden soll, je mehr pixel pro x milisekunden, um so schneller, und warscheinlich abgehackter sieht die bewegung aus.

 

[Sven Mintel]

Moin,

eigentlich ist es fast unmöglich, eine halbwegs perfekte Animation in JS hinzubekommen, da dies abhängig ist von Faktoren wie bpsw. Rechnerleistung, verwendetem Browser, und dem was der Benutzer sonst noch alles im Browser tut.

Du kannst das ja mal testen, indem du dir eine Funktion schreibst, welche einfach nur die tatsächlichen Zeitintervalle ausgibt, du wirst feststellen, dass es dort enorme Abweichungen gibt.

 

[Napofis]

Du meinst eine Uhr als beispiel?

Ich hatte gehofft es gibt son paar kleine Tricks um alle noch nen Stück zu verbessern.

Ich hatte die Elemente erst immer per document.getElementById('xxx') angesprochen und das bei jeder Veränderung der Werte, jetzt hab ich herausgefunden wenn man das ganz in einer Variablen speichert das es irgendwie schneller geht, es kommt mir zumindest so vor.

Coderbeispiel

var ele = new Object();
ele.id = document.getElementById('xxx');


function sampleAni() {
  ele.id.style.opacity =1; 
  // sonstige Anweisungen
}

Ich dachte es gibt noch mehr sone Tricks.

Gruß Napofis

 

[Quaese]

Hi,

zunächst sei angemerkt, dass wie schon von Sven erwähnt, der Browser und die zur Verfügung stehende Rechenleistung einen wichtigen Faktor für flüssige Animationen darstellen. Aber auch durch sinnvoll aufgebauten und gut strukturierten Code kann durchaus Einfluss darauf genommen werden.

Das Zuweisen an Referenzen oder Variable verbessert dann die Performanz, wenn der Zugriff sonst über Funktionen oder Methoden erfolgt. Begründung - die internen Routinen, um auf das Element zuzugreifen müssen nicht jedesmal ausgeführt werden. Stattdessen erfolgt der Zugriff direkt über die Referenz oder Variable.

Wie schon von dir erwähnt, zählt hierzu zum Beispiel der Zugriff auf Elemente über die Methoden getElementById, getElementsByTagName oder getElementsByName.

Aber auch das Zuweisen der Länge eines Arrays vor dem Durchlauf einer for-Schleife ist sinnvoller als diese in jeder Prüfung der Schleifenbedingung zu ermitteln.

var intLen = arrHelp.length;
for(var i=0; i<intLen; i++){  // besser als: for(var i=0; i<arrHelp.length; i++)
  // Anweisungen
}

Weiterhin sollte bei sich häufig wiederholenden Abläufen auf den Einsatz von innerHTML verzichtet werden. Hier sind die DOM-Methoden vorzuziehen.

Das sind zumindest meine Erfahrungen, die ich beim Erstellen eines Breakout-Clones gesammelt habe.

Ciao
Quaese

 

[DeluXe]

Klar, wenn das Element in einer Variable gespeichert wird muss es nicht bei jedem Zugriff aus dem DOM heraus gesucht werden, das ist sicher performanter.

Allerdings ist es, wie Sven schon geschrieben hat, unmöglich Animationen unter allen Umständen flüssig zu halten, da es eben Clientseitig geschiet.

Wenn du uns deinen Quellcode zeigst kann man eventuell noch ein paar Tipps geben, aber ansonsten hilft nur eins: Safari nutzen.

 

[Sven Mintel]

Was mir irgendwann mal auffiel, und mich etwas verwunderte, weil ich das Gegenteil angenommen hatte:
Es bringt keine Vorteile, eine Funktion per setInterval() wiederholt aufzurufen, ganz im Gegenteil, in diversen Browsern(FF bspw.), dauert das dann teilweise bis 30% länger

Und wie gesagt, diverse Browser probieren, gerade bei Chrome gibts dann irgendwann die Ernüchterung, weil es zu gut läuft, nämlich annähernd so, wie man es im Skript angegeben hat :suspekt:

Ohne Browserweiche mit angepassten Werten dürfte da kaum etwas annähernd einheitliches Zustande kommen.

Hier mal zum simplen Testen, wer wie lange braucht:

timer=function(steps,interval)
{
  this.interval=interval;
  this.steps=steps;
  this.step=0;
  this.started=new Date().getTime();
  var _this=this;
  
  this.fx=function()
  {
    if(_this.steps>_this.step)
    {
      _this.step++;
      setTimeout(_this.fx,_this.interval)
    }
    else
    {
      var a=new Date().getTime()-_this.started
      var b=_this.interval*_this.steps;
      alert('Theorie:'+b+'ms\nPraxis:'+a+'ms');
    }
  }  

}

new timer(100,1).fx();

 

[FipsTheThief]

Das Problem welches ich mit setInterval immer hatte das er nur 1 Interval abarbeiten kann. Also wenn Du 2 Intervalle hast beide auf einer sekunde dann laufen die Dinger im FF zum Beispiel alle 2 Sekunden 1 mal durch , wie zum beispiel einen Counter wo mehere Counter gleichzeitig existierten.
Dann zählen die alle nach 2 sekunden , 3 sekunden je nachdem wie viele es gab weiter das dann aber zur selben Zeit. Eine Lösung brachte da nur die Intervalle anders zu setzen wie der erste hat ein Interval von 990 ms , der zweite 995 ms was aber irgendwie albern ist. Keine Ahnung ob das schon behoben wurde inzwischen aber mit setTimeout gabs diese Probleme nie.

Bei setTimeout() funktioniert es hingegen prima, das setInterval würde ich nur dann einsetzen wenn es sicher ist man wirklich nur eines hat.
Aber auch da würde ich nen setTimeout nehmen . Ist immer nen bissel kritisch mit dem setInterval , setTimeout funktioniert hingegen überall korrekt auch bei meheren.

 

[Napofis]

Genau solche Tipps suche ich
Das man nicht auf allen Rechnern eine gleiche Darstellung erreichen kann ist mir klar aber genau solche Tipps wie ihr da oben geschrieben habt suche ich.
Kann mir jemand noch mehr so gute Tipps geben.

Und schon mal vielen Dank für die bisherigen Antworten, das Hilft mir wirklich sehr.

Gruß Napofis