畫布條形圖動畫

我試圖在畫布標籤上加快速度，並且在基本動畫方面遇到困難。我已經找遍了，我可以獲得大部分我已經找到工作的教程，但是我已經遇到了一些麻煩，將其轉化爲我正在嘗試做的事情。畫布條形圖動畫

我有一個條形圖，我正在爲我的投資組合構建，我希望能夠在圖形上爲條形圖添加動畫。基本上當頁面加載時，條從圖的底部開始，並向上成長到它們需要的位置。我有一個我在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>

來源

2014-02-23 Joe Burton

您可以使用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>

來源

2014-02-23 19:10:45 markE

這是一個巨大的幫助！非常感謝！ –

我看到幾個問題。

首先，你一次繪製所有的東西，而你應該在每個圖像加載後繪製，但是yiu會想要使用setTimeout或類似的東西來允許繪製canvas元素。

你也應該有一個方法吧，並記住當前的步驟值，它只會繪製下一個塊。

我會放在圖像標籤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

來源

2014-02-23 19:11:47

感謝您的提示和鏈接。我覺得我可能在繪圖部分做錯了什麼。在看到您的一些資源後，我將不得不重溫我的做法。 –

畫布條形圖動畫

回答

相關問題