Question

我正试图在画布标签上加快速度，在基本动画方面我遇到了困难。我已经四处寻找，我可以获得大部分已经发现的教程，但是我在将其转化为我想要做的事情时遇到了一些麻烦。

我有一个条形图，我正在为我的投资组合构建，我希望能够为图表上的条形图设置动画。基本上，当页面加载时，条形图从图形的底部开始，并向上增长到它们需要的位置。我在这里找到了一个我在jquery中构建的版本，以便了解我所追求的内容：http://jokedesigns.com/portfoliov6/

有人能指出我正确的方向如何实现我正在寻找的动画吗？即使它是一个简单的功能，我应该能够将它重新制作成我需要的东西。我发现的大多数教程主要涉及旋转，我确实找到了一个线性动画，但我仍然无法将其重新修改为我需要的东西。

以下是我到目前为止的图表代码：

<html>
  <head>
    <script type="application/javascript">
function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }
function draw() {
  var canvas = document.getElementById("canvas");
   var canvasbg = document.getElementById("canvasbg");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    var ctx2 = canvasbg.getContext("2d");
    var img = new Image();
    img.onload = function(){
        ctx2.drawImage(img,0,0);
    };
    img.src = 'skills_bg.jpg';
    ctx.fillStyle = "#0a4888";
    ctx.fillRect (0, 82, 34, 50);
    ctx.fillStyle = "#ed9323";
    ctx.fillRect (60, 82, 34, 50);
    ctx.fillStyle = "#87982d";
    ctx.fillRect (120, 82, 34, 50);
    ctx.fillStyle = "#902e63";
    ctx.fillRect (180, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (360, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (420, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (480, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (540, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (600, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (660, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (720, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (780, 82, 34, 50);
    ctx.fillStyle = "#262627";
    ctx.fillRect (840, 82, 34, 50);

    var sources = {
        ps: 'icn_ps.png',
        ai: 'icn_ai.png',
        dw: 'icn_dw.png',
        id: 'icn_id.png',
        ht: 'icn_html.png',
        cs: 'icn_css.png',
        js: 'icn_js.png',
        sql: 'icn_mysql.png',
        php: 'icn_php.png',
        perl: 'icn_perl.png',
        ruby: 'icn_ruby.png',
        cplus: 'icn_cplusplus.png',
        asp: 'icn_asp.png'
    };
    loadImages(sources, function(images) {
        ctx.drawImage(images.ps, 0, 132, 36, 37);
        ctx.drawImage(images.ai, 60, 132, 36, 37);
        ctx.drawImage(images.dw, 120, 132, 36, 37);
        ctx.drawImage(images.id, 180, 132, 36, 37);
        ctx.drawImage(images.ht, 360, 132, 36, 37);
        ctx.drawImage(images.cs, 420, 132, 36, 37);
        ctx.drawImage(images.js, 480, 132, 36, 37);
        ctx.drawImage(images.sql, 540, 132, 36, 37);
        ctx.drawImage(images.php, 600, 132, 36, 37);
        ctx.drawImage(images.perl, 660, 132, 36, 37);
        ctx.drawImage(images.ruby, 720, 132, 36, 37);
        ctx.drawImage(images.cplus, 780, 132, 36, 37);
        ctx.drawImage(images.asp, 840, 132, 36, 37);
    });

  }
}

</script>
</head>
<body onload="draw();">
<canvas id="canvasbg" width="960" height="200" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="canvas" width="960" height="200" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</body>
</html>

Answer 1

您可以使用requestAnimationFrame创建动画循环以允许您的条形增长

要为高度不均匀的条形成均匀增长，您可以应用百分比

// this will grow all bars at an even rate

bar1Height = bar1.maxHeight * percentComplete/100;

bar2Height = bar2.maxHeight * percentComplete/100;  

percentComplete++;

以下是示例代码和演示：http://jsfiddle.net/m1erickson/YR4D7/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        var skillBars=[];
        skillBars.push({max:200,color:"red"});
        skillBars.push({max:75,color:"green"});
        skillBars.push({max:275,color:"blue"});

        var chartBottomY=325;
        var chartBarWidth=30;
        var chartBarPadding=20;
        var percent=0;

        animate();

        function animate() {
            // if not 100% done, request another frame
            if(percent++<100){
                requestAnimationFrame(animate);
            }

            // Drawing code goes here
            ctx.clearRect(0,0,canvas.width,canvas.height);
            var x=chartBarPadding;
            for(var i=0;i<skillBars.length;i++){
                var height=skillBars[i].max*percent/100;
                ctx.fillStyle=skillBars[i].color;
                ctx.fillRect(x,chartBottomY,chartBarWidth,-height);
                x+=chartBarWidth+chartBarPadding;
            }
        }

    }); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

Answer 2

我看到了几个问题。

首先，你一次绘制所有内容，而你应该在每个图像加载后绘制，但是yiu会想要使用setTimeout或类似的东西来绘制canvas元素。

你还应该有一个方法，让它记住当前的步骤值，它只会绘制下一个块。

我会将onload放在图片标记image.onload function with return上，当它加载时会绘制下一个栏并加载下一个栏。

但请记住使用setTimeout来进行绘图。

以下是一些可能有用的链接

JavaScript animation with multiple setTimeout

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/AnimatingtheCanvas/AnimatingtheCanvas.html

画布条形图动画

2 个答案: