JavaScript Animationen

[Camping_RIDER]

Aloha ;)

Thema: Animieren mit JavaScript! :D

Ich habe im Prinzip drei Arten von CSS-Animationen, die ich gerne in JavaScript simulieren möchte:

Nett. Du machst das, was man jetzt mit CSS machen kann, mit JavaScript - so wie wir das schon vor 10 Jahren mangels CSS-Möglichkeiten gemacht haben ;) Nostalgie...

Aber: Warum eigentlich dieser Rückschritt?

Zur Rotation: Animation: Das ist imho nicht sinnvoll zu lösen, da dir schlicht die proprietären Werkzeuge dafür in JavaScript fehlen. Es wird dir allenfalls möglich sein, eine verhältnismäßig schlechte Nachahmung des Effekts umzusetzen. Zumindest wenn du auf CSS3 verzichten willst a la retro. Mit Einsatz von CSS3 ist es genauso einfach zu lösen wie die anderen beiden.

Von der praktischen Umsetzung der Rotation-Animation abgesehen, wäre für mich Folgendes von Interesse:

a) Wie kann ich mit Blick auf die drei Animationen in JS die animation-timing-function simulieren, sprich, statt eines streng linearen Ablaufs einen ease-in - Effekt für die Fade-In-Animation oder einen ease-out - Effekt für eine Fade-Out-Animation oder einen ease-in-out - Effekt für die Ladebalken- und die Rotation-Animation erzeugen?

Das kommt auch ein bisschen auf die erwünschte Komplexität an. CSS arbeitet mit der Bezierkurve. Die kann man in JavaScript nachbilden. Die Werte aus der Bezierkurve bestimmen letztendlich den Step. Das erzeugt dann letztendlich den selben Effekt. Es geht aber auch mit einfacheren Funktionen einfacher, wenn man etwas weniger Wert auf Geschmeidigkeit legt.

b) Wie kann ich aus der Fade-In-Animation - Funktion eine generell abrufbare 'Fade'-Animation - Funktion machen, mit der ich beliebige Elemente ein- ODER ausblenden kann - und dabei im Optimalfall noch über einen Parameter bestimmen kann, wie lange der Vorgang dauern soll?

Du könntest in einer Fade-Funktion per Timeout oder Intervall festlegen, dass zeitlich nach Ende der fade-In-Animation die fade-Out-Animation abgespielt wird.

Noch besser: du programmierst eine fade-Animation, die bis 100% hochzählt und danach intern umschaltet. Also in etwa eine

function fade (element,step,duration,counter) {...}

element,step,duration bleiben gleich, counter wird immer um 1 erhöht. Die Opacity ergibt sich dann aus der counter-Variable:

element.style.opacity = ((counter % 200 > 100)?(100-counter % 100):(counter % 100)) / 100;

Die Animation soll dann laufen bis duration < counter * step.

Wenn du z.B. per Bezierkurve noch die Geschwindigkeit kontrollierst brauchst du statt step eine andere variable v zum Übergeben, die die Länge einer Teilanimation angibt (als Parameter für die Bezierkurve) und die Abbruchbedingung muss sich dann aus duration < v*(100 - counter % 100)/100 + x zusammensetzen, wobei sich x aus der Bezierkurve berechnet und die vergangene Dauer im aktuellen Zyklus angeben...

Abschließend, hat jemand praktische Erfahrung mit requestAnimationFrame ? Eine Alternative zu setInterval() oder setTimeout() ? Und falls ja, wie könnte man das an meinen Beispielen hier nutzen?

Nö, hab ich leider noch nicht. Meine praktischen Fertigkeiten sind etwas eingerostet, als ich das letztemal mit JS-Animationen zu tun hatte gabs weder CSS3 noch requestAnimationFrame. Ich glaube aber, dass das die sinnvollere Möglichkeit ist. An meinen Ausführungen oben erkennst du, dass es extremst aufwändig ist, das Rad neu zu erfinden. Lieber soviel wie möglich vorhandenes nutzen.

Grüße,

RIDER