Bug動畫Javascript

Question

我有我覺得是一個錯誤模擬器的良好基礎，但我沒有得到我想要的動畫運動。

當使用畫布創建動畫中的移動流體運動時，最佳方法是什麼。

我是JavaScript新手，只是搞亂，所以任何改進我的編碼標準的建議也是受歡迎的。

感謝

http://jsfiddle.net/UmSss/11/

HTML

<canvas width="578" height="200" margin="3px" id="targer" style="border: 1px solid black;"></canvas> 

JAVASCRIPT

var canvas = document.getElementById('targer'); 

    function bugObj(x, y, size) { 
     this.x = x; 
     this.y = y; 
     this.size = size; 
     this.update = function(move) { 
      var p = Math.floor((Math.random()*3)-1) + this.x; 
      var q = Math.floor((Math.random()*3)-1) + this.y; 
      if (p > canvas.width) { p = canvas.width }; 
      if (p < 0) { p = 0 }; 
      if (q > canvas.height) { q = canvas.height }; 
      if (q < 0) { q = 0 }; 

      this.x = p; 
      this.y = q; 
     } 
     return this; 
    } 

    function popBugs(){ 
     var bug;     
     var ctv = canvas.getContext('2d'); 
     ctv.fillStyle = 'black'; 
     ctv.fillRect(0, 0, canvas.width, canvas.height); 
     for(var i = 0; bug = bugs[i]; i++) {     
      ctv.fillStyle = 'yellow'; 
      ctv.fillRect (bug.x, bug.y, bug.size, bug.size);     
     } 

    } 

    var bugs = [], 
     numberbugs = 100, 
     x,y; 

    for (var i = 0; i < numberbugs; i++){ 
     x = Math.random()*canvas.width; 
     y = Math.floor(Math.random()*canvas.height); 
     bugs.push(new bugObj(x, y, 2)); 
    } 

    function loop() { 

     /// update each bugs objects 
     for(var i = 0;i < bugs.length; i++) bugs[i].update();   

     popBugs(); 

     requestAnimationFrame(loop); 
    } 

    loop(); 

    window.requestAnimationFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       function(callback){ 
       window.setTimeout(callback, 1000); 
       }; 
    })();  

Answer 1

幾件事情要儘量使動畫更流暢：

1. 做動作較小。
2. 不要一次性禁用所有的錯誤，然後重新繪製它們。黑掉每個bug並立即重新繪製成黃色。依次執行每個錯誤。
3. 跟蹤上次移動錯誤的方式，只允許它將該方向或90度移動到任一側。
4. 設置10個10組中的錯誤併爲每個組設置一個計時器。這可以防止錯誤動作與其他錯誤同步，並且可能更好看。

Answer 2

眼下，蟲子正在每幀的隨機數的像素。這給他們一個緊張的影響。如果你希望他們看起來更像是爬行，你需要讓他們總是前進，但隨機轉向。爲此，您需要更復雜的算法。對於初學者，您需要爲每個錯誤提供速度，以改變每幀的位置，並隨着時間的推移改變速度。

您可能還想調查Steering Behavior這可能更像是你要找的。

Answer 3

我猜你正在嘗試做的是讓蟲子從一個位置順利地飛到下一個位置，而不是像現在一樣晃動。

有一百萬種不同的方式來做到這一點，但這是我會做的，讓球滾動。再次，這是一個開始，只是開始使用目的地，而不是隨機逐幀移動。

1. 第一次調用任何bug對象的更新時，我會生成一個隨機DESTINATION。

2. 之後每次調用更新函數時，都會將該錯誤移至該位置。爲了使它更好，爲每個bug分配一個隨機的SPEED，或者調查某些類型的緩動函數（例如，在每一幀中，找到bug和目標之間的中間點並將其移動到那裏會產生緩動效果。）

3. 每次調用更新函數時，都會檢查錯誤是否已到達目的地。如果有的話，然後創建一個新的隨機目標併發送錯誤，否則只是讓錯誤沿着它的路徑移動。

這只是一個開始，以後你會想進入的使用速度/載體，和一些基本的三角函數所以當一個bug變成邁向一個新的目的地的路徑是一個小拱，而不是急彎。