JavaScript Animationen

[Roadster]

Hallo Roadster,

Hallo Jürgen!

ich würde, wenn eben möglich, Animationen per CSS durchführen, Stichworte transition und animation. Nach meiner Erfahrung laufen JS-Animationen viel zu "ruckelig". [...]

Stichwort: requestAnimationFrame()

Du hast insofern recht, als dass setInterval() und setTimeout() tatsächlich nahezu zwangsläufig dazu führen, dass die Animationen "ruckelig" ablaufen, aber nachdem ich jetzt (ziemlich erfolgreich) mit requestAnimationFrame() herumexperimentiert habe, muss ich sagen, das ist ein Unterschied wie Tag und Nacht!

Seit ich meine Animationsfunktionen mit requestAnimationFrame() aufrufe, laufen sie _butterweich_ ! Sogar noch flüssiger als mit CSS, wie mir scheint!

Ruft man seine Animationsfunktion mit requestAnimationFrame() auf, landet man letztlich immer bei etwa 60 Iterationen pro Sekunde, was sehr geschmeidig ist und womit sich außerdem noch gut rechnen lässt.

Der Unterschied ist wohl einfach, dass man den Browser mit setInterval() oder setTimeout() in einen starren Zeitplan drängt, der - man verzeihe mir meine laienhafte Ausdrucksweise - ganz offenbar den "natürlichen" Fluss des Programmablaufs hemmt, was dann zu Verzögerungen im Ablauf führt, wohingegen man mit requestAnimationFrame() dem Browser selbst die Entscheidung überlässt, wann 'genau' die nächste Iteration ausgespuckt wird, und die dazu nötige Rechenoperation dadurch sozusagen synchron zum "Fluss" des Programmablaufs eingebaut wird.

Habe mich da mal ein wenig eingelesen und abgesehen davon, dass ich meine Animationen mittlerweile (inklusive "easing"-function) erfolgreich in reinem JS umgesetzt habe (mit Ausnahme der Rotation - da musste ich tatsächlich auf das CSSOM zurückgreifen - insoweit nur halbes JS ;) glaube ich, dass hinsichtlich Animationen in JS noch einiges an Potential steckt und während es wie gesehen zwar Dinge gibt, die im Moment mittels CSS noch besser handhabbar sind, gilt das so wie ich das sehe auch andersherum, - gerade wenn es um komplexere Berechnungen geht.

Gruß,

Roadster.