Roadster: JavaScript Animationen

Beitrag lesen

Hallo miteinander!

Ich übe mich mal wieder in der Praxis, in Freibeutermanier meinen eigenen Thread zu kapern, um noch ein paar Fragen loszuwerden, deren grundsätzliche Sinnhaftigkeit gerne angezweifelt werden darf, die aber für mich in meiner konkreten Situation durchaus von Interesse sind. ;)

Thema: Animieren mit JavaScript! :D

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

Einmal eine klassische Ladebalken-Animation...

function progressing() {  
  
  var progress = document.getElementById("progress");  
  
  var width = parseInt(progress.style.width);  
  
  progress.style.width = width + 4 + "px";  
  
  if(width < 276) {  
  
    setTimeout(progressing, 10);  
  
  }  
  
}

...sowie eine Fade-In-Animation...

function fadeIn(element,step) {  
  
  var step = step || 0;  
  
  element.style.opacity = step/100;  
  
  var step = step + 1;  
  
  if(step <= 100) {  
  
    setTimeout(function() {  
  
      fadeIn(element,step);  
  
    }, 15);  
  
  }  
  
}

...und eine Rotation-Animation, für die ich in JS noch keine Umsetzung versucht habe...

.rotate {  
  
  animation-name: rotation;  
  animation-duration: 0.5s;  
  animation-iteration-count: infinite;  
  animation-direction: alternate;  
  animation-play-state: paused;  
  animation-timing-function: ease-in-out;  
  
}  
@keyframes rotation {  
  
   0% {transform: rotateX(0deg);}  
 100% {transform: rotateX(90deg);}  
  
}

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?

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?

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?

Für Ideen, Hinweise und Anregungen wäre ich wie immer dankbar! ;)

Soweit,

Ahoi,

Roadster.