javascript - 如何为这个峰值图表制作动画？

Question

我是 CSS 和 Javascript 的新手，所以我正在努力尝试制作我在 codepen 上找到的峰值(条形)图表的动画...:http://codepen.io/Anna_123/pen/QbQqQb

/* Pie chart based on the pen by aaronlsilber (http://codepen.io/aaronlsilber/pen/IqrkL) which is based on an article by James Litten (http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/) */



/* Peak Chart Javascript
=====================================================================*/
var peakColors = ['rgb(236, 208, 120)', 'rgba(217, 91, 67, 0.7)', 'rgba(192, 41, 66, 0.7)', 'rgba(84, 36, 55, 0.7)', 'rgba(83, 119, 122, 0.7)', 'rgba(119, 146, 174, 0.7)'];

function drawPeakChart( canvasId ) {
    var i, start, peakPoint,
        canvas = document.getElementById( canvasId ),
        peakData = canvas.dataset.values.split(',').map( function(x){ return parseInt( x, 10 )}),
        ctx = canvas.getContext( '2d' ),
        max = Math.max.apply( Math, peakData ),
        plotBase = canvas.width / peakData.length,
        overlap = plotBase * .4;
        plotBase += canvas.width * .05;
    
    ctx.clearRect( 0, 0, canvas.width, canvas.height );
    
    for( i = 0; i < peakData.length; i++) {
        start = i === 0 ? 0 : i * plotBase - i * overlap;
        peakPoint = canvas.height - Math.round( canvas.height * ( peakData[i] / max ) );
        ctx.fillStyle = peakColors[i];
        ctx.beginPath();
        ctx.moveTo( start, canvas.height );
        ctx.lineTo( start + plotBase * .5, peakPoint );
        ctx.lineTo( start + plotBase, canvas.height );
        ctx.lineTo( start, canvas.height );
        ctx.fill();
    }
}

drawPeakChart('canPeak');

body {
  font: normal normal 400 1rem/1.5 "Segoe UI", "Helvetica Neue", "DejaVu Sans", Helvetica, Arial, sans-serif;
}
aside {
  float: left;
  margin-right: 100px;
}
.chart {
  margin-bottom:0;
  margin-top:0;
}
.vert > canvas, .vert > ol {
  display:inline-block
}
.horiz > li {
  display: inline;
  padding-right: 20px;
}
.legend {
  vertical-align:top;
  padding-left:15px;
  list-style: none;
}
.key {
  position:relative;
}
.key:before {
  content:"";
  position:absolute;
  top:35%;
  left:-15px;
  width:10px;
  height:10px;
}
.one:before{background:rgb(236, 208, 120)}
.two:before{background:rgba(217, 91, 67, 0.7)}
.three:before{background:rgba(192, 41, 66, 0.7)}
.four:before{background:rgba(84, 36, 55, 0.7)}
.five:before{background:rgba(83, 119, 122, 0.7)}
.six:before{background:rgba(119, 146, 174, 0.7)}

<aside class="chart">
  <canvas id="canPeak" width="300" height="200" data-values='40, 30, 20, 60, 10, 50'>
    This browser does not support HTML5 Canvas.
  </canvas>
  <ol class="legend horiz">
    <li class="key one">One</li>
    <li class="key two">Two</li>
    <li class="key three">Three</li>
    <li class="key four">Four</li>
    <li class="key five">Five</li>
    <li class="key six">Six</li>
  </ol>
</aside>

我想创建与以下示例相同的图形动画:http://codepen.io/boars/pen/bnAfC ，但经过相当多的尝试和错误，我没有成功让它工作......有人可以帮我从这里出去吗？谢谢 ! :-)

Answer 1

只需在绘制三 Angular 条的部分周围添加一个动画循环，就像这样

var animationSteps = 60;
var animationStepCounter = 0;
var animation = setInterval(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (i = 0; i < peakData.length; i++) {
        start = i === 0 ? 0 : i * plotBase - i * overlap;
        peakPoint = canvas.height - Math.round(canvas.height * (peakData[i] / max) * animationStepCounter / animationSteps);
        ctx.fillStyle = peakColors[i];
        ctx.beginPath();
        ctx.moveTo(start, canvas.height);
        ctx.lineTo(start + plotBase * .5, peakPoint);
        ctx.lineTo(start + plotBase, canvas.height);
        ctx.lineTo(start, canvas.height);
        ctx.fill();
    }

    if (animationStepCounter === animationSteps)
        clearInterval(animation);
    else
        animationStepCounter++;
}, 10);

它所做的就是绘制条形图 60 次(两次重绘之间等待 10 毫秒)，每次都增加条形图的高度，直到达到实际高度。

如果您希望动画进行得更快(减少其中之一或两者)/更平滑等，您可以更改 60 或 10 毫秒。

---

CodePen - http://codepen.io/anon/pen/MwQOVG