將多個HTML5畫布動畫

Question

我有這樣的jsfiddle http://jsfiddle.net/t9L6g3bd/4/

// requestAnimationFrame Shim 
(function() { 
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
window.requestAnimationFrame = requestAnimationFrame; 
})(); 


var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var endPercent = 101; 
var curPerc = 0; 
var counterClockwise = false; 
var circ = Math.PI * 2; 
var quart = Math.PI/2; 

context.lineWidth = 2; 
context.strokeStyle = '#333'; 
animate(); 


function animate(current) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); 
    context.stroke(); 
    curPerc++; 
    if (curPerc < endPercent) { 
     requestAnimationFrame(function() { 
      animate(curPerc/100) 
     }); 
    } else { 
     ex(126, 126); 
     cross(126, 126); 
     //fadein(0); 
    } 
} 

function fadein(a) { 
    context.lineWidth = 1.5; 
    context.globalAlpha = a; 
    context.beginPath(); 
    context.moveTo(166, 84); 
    context.lineTo(84, 166); 
    context.stroke(); 
    context.beginPath(); 
    context.moveTo(166, 166); 
    context.lineTo(84, 84); 
    context.stroke(); 
    if (a != 0.8) { 
     requestAnimationFrame(function() { 
     fadein(a + 0.01); 
     }); 
    } 
} 

    function ex(x, y) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.moveTo(84, x); 
    context.lineTo(168, y); 
    context.stroke(); 
    if (x != 168) { 
     requestAnimationFrame(function() { 
      ex(x + 1, y - 1) 
     }); 
    } 
} 
function cross(x, y) { 
    // context.clearRect(0, 0, canvas.width, canvas.height); 
    context.beginPath(); 
    context.moveTo(84, x); 
    context.lineTo(168, y); 
    context.stroke(); 
    if (x != 84) { 
     requestAnimationFrame(function() { 
      cross(x - 1, y + 1) 
     }); 
    } 

} 

我想知道是否有其他的後圓的動畫，並在同一時間的X，或一個結合的方式，使他們都在屏幕上，並且都有光滑的邊緣

Answer 1

您需要重構您的代碼。

Link to refactored jsfiddle

function animate() { 

    if (curPerc < endPercent) { 
      context.clearRect(0, 0, canvas.width, canvas.height);  
      drawCircle(curPerc/100); 
      fadeIn(curPerc/100); 
      curPerc++; 
      requestAnimationFrame(function() { 
       animate(); 
      }); 
    } 
} 

基本上你需要改變你的代碼，以便只有一個動畫循環運行，並在每次循環迭代呼籲每個動畫的更新功能。但我想說，總體代碼難以維護，您應該考慮進一步重構來糾正這一問題。希望這可以幫助。

Answer 2

你的確應該只使用一個requestAnimationFrame，因爲它的開銷很大，但主要是爲了清晰你的代碼（很難知道哪個對象是動畫或不是）。
- >>如何將所有的動畫數據存儲到對象中，甚至讓對象動畫/繪製自己？
通過這種方式，您可以清晰地分離關注點，並且更改動畫的一個方面要容易得多。
我開始這樣做，在這個小提琴：

http://jsfiddle.net/0200h552/6/

動畫循環變得相當簡單：

function animate() { 
    requestAnimationFrame(animate); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    // 
    circle.draw(); 
    if (!circle.animate()) { 
     ex.draw(); 
     cross.draw(); 
     ex.animate(); 
     cross.animate(); 
    } 
} 

這裏正在使用的三個對象：

var circle = { 
    x: centerX, 
    y: centerY, 
    radius: 75, 
    curPerc: 0, 
    endPercent: 101, 
    animate: function() { 
     if (this.curPerc < this.endPercent) { 
      this.curPerc++; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var perc = this.curPerc/this.endPercent; 
     var oldAlpha = context.globalAlpha; 
     context.globalAlpha = perc; 
     context.beginPath(); 
     context.arc(this.x, this.y, this.radius, -(quart), ((circ) * perc) - quart, false); 
     context.stroke(); 
     context.globalAlpha = oldAlpha; 
    } 
}; 

「ex」：

var ex = { 
    x: centerX, 
    y: centerY, 
    animate: function() { 
     if (this.x != 168) { 
      this.x++; 
      this.y--; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var x = this.x; 
     var y = this.y; 
     context.beginPath(); 
     context.moveTo(84, x); 
     context.lineTo(168, y); 
     context.stroke(); 
    } 
}; 

十字架：

var cross = { 
    x: centerX, 
    y: centerY, 
    animate: function() { 
     if (this.x != 84) { 
      this.x--; 
      this.y++; 
      return true; 
     } 
     return false; 
    }, 
    draw: function() { 
     var x = this.x; 
     var y = this.y; 
     context.beginPath(); 
     context.moveTo(84, x); 
     context.lineTo(168, y); 
     context.stroke(); 
    } 
};