Mehrere requestAnimationFrame() ...problematisch?

[Rolf B]

Hallo,

wenn Du requestAnimationFrame aufrufst, wird der Aufruf "bestellt" und beim nächsten fälligen Animationszeitpunkt ausgeführt. Frag mich nicht, wann das ist. Das hängt sicherlich auch daran, wie der Browser geschrieben ist und ob die Darstellung mit einem double buffer erfolgt oder nicht.

Rein technisch bist Du nicht gezwungen, nur einen Aufruf zu machen. Wenn 20 Aufrufe bestellt sind, werden auch 20 ausgeführt. Alle 20 erhalten den gleichen Timestamp, rechnen also auf der gleichen Grundlage. Ob Du also 20 Aufrufe hinterlegst, oder nur einen, in dem Du dann 20 Funktionen aufrufst, ist gleichgültig.

Ob Du Objekte im gleichen Aufruf animierst oder in verschiedenen, ist also frei entscheidbar.

Wann sollte man Objekte nicht mit requestAnimationFrame animieren?

• Der Browser kann eine Menge Animationen von ganz allein.

  • CSS Transitionen
  • CSS Animationen
  • SVG Animationen

  Bevor man selbst animiert, sollte man genau prüfen, was schon vorhanden ist. Ich wollte letztens einen Pfeil animieren; er sollte aus einem Punkt heraus entlang eines Pfades wachsen und die Pfeilspitze sollte dabei mitlaufen. Ich das mühsam mit requestAnimationFrame programmiert. Und dann stellte ich fest, dass das mit ein paar SVG Optionen ohne mein Zutun ging 😫

Wann sollte man Objekte im gleichen Aufruf animieren?

• es gibt Informationen, die für diese Objekte gemeinsam gebraucht werden und die Du andernfalls jedesmal neu berechnen müsstest
• du malst auf einen Canvas und brauchst einen RenderingContext. Das Beschaffen des Context ist meines Wissens eine "teure" Operation, und wenn man darin auch noch Einstellungen treffen muss, wird es noch teurer
• du musst vor dem Zeichnen eine z-Order bestimmen, d.h. die Reihenfolge, in der Du zeichnest

Wann sollte man Objekte in verschiedenen Aufrufen animieren?

• Du animierst HTML Elemente (d.h. du änderst an ihrem style herum) und diese haben miteinander nichts zu tun.
• Du baust eine Komponente, die in ihrem UI Animationen verwendet, und diese Komponente taucht mehrfach auf. In dem Fall möchtest Du keinen zentralen Animator haben, sondern jede Komponente sollte das für sich steuerm

Rolf