Reine JavaScript - zeitgesteuerte Animation - konsistente Höhe?

Question

Ich habe ein Skript erstellt, das die Höhe eines Elements in 500ms animiert.

Der Timer funktioniert gut, aber ich habe Mühe, die Höhe konstant zu erhöhen.

Wie animiere ich die Höhe reibungslos innerhalb des Zeitraums? Es springt im Moment.

Ich möchte klüger folgendes mit etwas ersetzen:

self.startHeight + 5 

Ich stelle mir es etwas mit der Geschwindigkeit zu tun hat und die verstrichene Zeit?

https://jsfiddle.net/zrm7xena/1/

(function() { 
    'use strict'; 

    var animator = {}; 

    animator.endHeight = 200; //The end height 
    animator.interval = null; //Create a variable to hold our interval 
    animator.speed = 500; //500ms 
    animator.startHeight = 0; //The start height 

    animator.animate = function (el) { 
     var self = this, 
      startTime = Date.now(); //Get the start time 

     this.interval = setInterval(function() { 
      var elapsed = Date.now() - startTime, //Work out the elapsed time 
       maxHeight = self.maxHeight; //Cache the max height 

      //If the elapsed time is less than the speed (500ms) 
      if (elapsed < self.speed) { 
       console.log('Still in the timeframe'); 

       //If the client height is less than the max height (200px) 
       if (el.clientHeight < self.endHeight) { 
        self.startHeight = self.startHeight + 5; //Adjust the height 
        el.style.height = self.startHeight + 'px'; //Animate the height 
       } 
      } else { 
       console.log('Stop and clear the interval'); 
       el.style.height = self.endHeight + 'px'; 
       clearInterval(self.interval); 
      } 
     }, 16); //60FPS 
    }; 

    animator.animate(document.getElementById('box')); 
}()); 

Vielen Dank im Voraus!

Carorus gab eine gute Antwort unten. Ich habe meine jsfiddle aktualisiert, so dass Sie den endgültige Code Arbeits sehen:

https://jsfiddle.net/zrm7xena/8/

Typhoon einen großen Link in Bezug auf den Browser FPS geschrieben:

How to determine the best "framerate" (setInterval delay) to use in a JavaScript animation loop?

Ich würde wahrscheinlich verwenden fordern Sie Animationsrahmen an statt eines setInterval:

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Prost allen!

Answer 1

Die harcodierte 5, die Sie für das Höheninkrement verwenden, ermöglicht nicht, dass die Animation die gesamte endgültige Höhe (200) in der von Ihnen festgelegten Zeit (500 ms) abschließt, Sie müssen das Höheninkrement basierend auf berechnen die endgültige Höhe, die Animationszeit und das Intervall, um es konsistent zu machen:

(function() { 
'use strict'; 

var animator = {}; 

animator.endHeight = 200; //The end height 
animator.interval = null; //Create a variable to hold our interval 
animator.speed = 500; //500ms 
animator.startHeight = 0; //The start height 
animator.interval = 16; 

animator.animate = function (el) { 
    var self = this, 
    startTime = Date.now(); //Get the start time 
    //calculating height variation 
    self.deltaHeight = (animator.endHeight/animator.speed) * animator.interval; 
    this.intervalId = setInterval(function() { 
     var elapsed = Date.now() - startTime, //Work out the elapsed time 
      maxHeight = self.maxHeight; //Cache the max height 

     //If the elapsed time is less than the speed (500ms) 
     if (elapsed < self.speed) { 
      console.log('Still in the timeframe'); 

      //If the client height is less than the max height (200px) 
      if (el.clientHeight < self.endHeight) { 
       self.startHeight = self.startHeight + self.deltaHeight; //Adjust the height 
       el.style.height = self.startHeight + 'px'; //Animate the height 
      } 
     } else { 
      console.log('Stop and clear the interval'); 
      el.style.height = self.endHeight + 'px'; 
      clearInterval(self.intervalId); 
     } 
    }, animator.interval); //60FPS 
}; 

animator.animate(document.getElementById('box')); 
}());