畫布條形圖動畫

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元素。

你還應該有一個bar的方法，讓它記住當前的步長值，它只會繪制下一個塊。

我會把onload放在image標簽上，帶有return的image.onload函數，當它加載時繪制下一個bar並加載下一個吧。

但請記住使用setTimeout來進行繪圖。

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

具有多個setTimeout的JavaScript動畫

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

畫布條形圖動畫

問題描述

2 個解決方案

解決方案1
2 已采納 2014-02-23 19:10:45

解決方案2
1 2014-02-23 19:11:47

畫布條形圖動畫

問題描述

2 個解決方案

解決方案1 2 已采納 2014-02-23 19:10:45

解決方案2 1 2014-02-23 19:11:47

解決方案1
2 已采納 2014-02-23 19:10:45

解決方案2
1 2014-02-23 19:11:47