Холст как анимировать высоту от 0 до заданной высоты.

Question

 paintForegroundBars(hours: Array<number>) { 
     let barColor = "#b3bec9"; 
     let numBars = hours.length; 
     let barWidth = Math.floor((this.canvasWidth/numBars) - this.barsSpacing); 
     let maxBarHeight = this.canvasHeight - (this.timesHeight + (this.timesSpacing * 2)); 
     let barLeft = 0 + (this.barsSpacing/2); 

     this.canvasContext.fillStyle = barColor; 
     this.canvasContext.strokeStyle = barColor; 
     this.canvasContext.lineJoin = "round"; 
     this.canvasContext.lineWidth = this.cornerRadius; 

     for (let i = 0; i < numBars; i++) { 
      let barHeight = Math.round(maxBarHeight * hours[i]); 
      if (barHeight > 0) { 
       let barTop = maxBarHeight - barHeight; 
       let roundedBarTop = barTop + (this.cornerRadius/2); 
       let roundedBarLeft = barLeft + (this.cornerRadius/2); 
       let roundedBarWidth = barWidth - this.cornerRadius; 
       let roundedBarHeight = barHeight - this.cornerRadius; 

       this.canvasContext.strokeRect(roundedBarLeft, roundedBarTop, roundedBarWidth, roundedBarHeight); 
       this.canvasContext.fillRect(roundedBarLeft, roundedBarTop, roundedBarWidth, roundedBarHeight); 
      } 

      barLeft = Math.floor(barLeft + barWidth) + (this.barsSpacing); 
     } 

    } 

На данный момент я рисую высоту гистограммы с кодом ниже:

this.canvasContext.strokeRect(roundedBarLeft, roundedBarTop, roundedBarWidth, roundedBarHeight); 
this.canvasContext.fillRect(roundedBarLeft, roundedBarTop, roundedBarWidth, roundedBarHeight); 

Вместо того, чтобы, когда это работает она просто быть фиксированной высотой я хочу, чтобы анимировать от 0 до высоты который был рассчитан в моем JS. Как вы это делаете?

Большое спасибо

Answer 1

Ниже приведен простой пример того, как этот вид анимации работает. Вещь, которую вы ищете, - это easing value - после этого вы настроены! В этом случае я сохраняю время начала внутри переменной start, а затем вы просто берете текущее время, удаляете время начала и делите его на время, которое вы хотите передать. Это даст вам число от 0 до 1, и умножение любого другого числа на это даст вам номер в диапазоне от 0 до n. Если вы хотите добавить базовое значение для этого, ваша общая формула в основном это:

fromValue + (nowTime - sinceTime)/duration * (toValue - fromValue); 

Причина ослабления значение настолько важна, что она позволяет анимацию. Например, вы можете создать гладкую кривую, умножив эту величину ослабления сам по себе:

var easing = (nowTime - sinceTime)/duration; 
    easing = easing * easing; 
fromValue + easing * (toValue - fromValue); 

Используйте приложение графиков, чтобы узнать больше об этих кривых :)

var canvas = document.querySelector('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var start = Date.now(); 
 
var duration = 5000; 
 

 
var animationFrame = false; 
 

 
canvas.width = 40; 
 
canvas.height = 400; 
 

 
function drawBar(){ 
 
    var progress = (Date.now() - start)/duration; 
 
    if(progress >= 1){ 
 
     // Final state before stopping any drawing function 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
     window.cancelAnimationFrame(drawBar); 
 
    } else { 
 
     // In progress 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
     ctx.fillRect(0, 0, canvas.width, canvas.height * progress); 
 
     window.requestAnimationFrame(drawBar); 
 
    } 
 
} 
 

 
animationFrame = setInterval(drawBar, 1000/60); 
 

 
document.body.addEventListener('click', function(event){ 
 
    start = Date.now(); 
 
    window.cancelAnimationFrame(drawBar); 
 
    window.requestAnimationFrame(drawBar); 
 
});

<canvas></canvas>