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

以下是这种动画如何工作的简单示例。你正在寻找的是缓动值 - 一旦你拥有它，你就被设定了！在这种情况下，我将开始时间存储在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>

画布如何设置从0到给定高度的高度动画。

1 个答案: